diff --git a/.eslintrc.js b/.eslintrc.js index 3bac9ed69..70506f60c 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -236,7 +236,7 @@ module.exports = { }, // Common React utilities { - pattern: '{classnames,react-helmet,react-router-dom}', + pattern: '{classnames,react-helmet,react-router,react-router-dom}', group: 'external', position: 'before', }, diff --git a/app/javascript/mastodon/components/column_back_button.jsx b/app/javascript/mastodon/components/column_back_button.jsx index 74a03b093..b47718ed8 100644 --- a/app/javascript/mastodon/components/column_back_button.jsx +++ b/app/javascript/mastodon/components/column_back_button.jsx @@ -4,29 +4,28 @@ import { createPortal } from 'react-dom'; import { FormattedMessage } from 'react-intl'; +import { withRouter } from 'react-router-dom'; + import { Icon } from 'mastodon/components/icon'; +import { WithRouterPropTypes } from 'mastodon/utils/react_router'; -export default class ColumnBackButton extends PureComponent { - - static contextTypes = { - router: PropTypes.object, - }; +class ColumnBackButton extends PureComponent { static propTypes = { multiColumn: PropTypes.bool, onClick: PropTypes.func, + ...WithRouterPropTypes, }; handleClick = () => { - const { router } = this.context; - const { onClick } = this.props; + const { onClick, history } = this.props; if (onClick) { onClick(); - } else if (router.history.location?.state?.fromMastodon) { - router.history.goBack(); + } else if (history.location?.state?.fromMastodon) { + history.goBack(); } else { - router.history.push('/'); + history.push('/'); } }; @@ -60,3 +59,5 @@ export default class ColumnBackButton extends PureComponent { } } + +export default withRouter(ColumnBackButton); diff --git a/app/javascript/mastodon/components/column_header.jsx b/app/javascript/mastodon/components/column_header.jsx index 9d29bbae0..2896a501b 100644 --- a/app/javascript/mastodon/components/column_header.jsx +++ b/app/javascript/mastodon/components/column_header.jsx @@ -5,8 +5,10 @@ import { createPortal } from 'react-dom'; import { FormattedMessage, injectIntl, defineMessages } from 'react-intl'; import classNames from 'classnames'; +import { withRouter } from 'react-router-dom'; import { Icon } from 'mastodon/components/icon'; +import { WithRouterPropTypes } from 'mastodon/utils/react_router'; const messages = defineMessages({ show: { id: 'column_header.show_settings', defaultMessage: 'Show settings' }, @@ -18,7 +20,6 @@ const messages = defineMessages({ class ColumnHeader extends PureComponent { static contextTypes = { - router: PropTypes.object, identity: PropTypes.object, }; @@ -38,6 +39,7 @@ class ColumnHeader extends PureComponent { onClick: PropTypes.func, appendContent: PropTypes.node, collapseIssues: PropTypes.bool, + ...WithRouterPropTypes, }; state = { @@ -63,12 +65,12 @@ class ColumnHeader extends PureComponent { }; handleBackClick = () => { - const { router } = this.context; + const { history } = this.props; - if (router.history.location?.state?.fromMastodon) { - router.history.goBack(); + if (history.location?.state?.fromMastodon) { + history.goBack(); } else { - router.history.push('/'); + history.push('/'); } }; @@ -78,15 +80,14 @@ class ColumnHeader extends PureComponent { handlePin = () => { if (!this.props.pinned) { - this.context.router.history.replace('/'); + this.props.history.replace('/'); } this.props.onPin(); }; render () { - const { router } = this.context; - const { title, icon, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, placeholder, appendContent, collapseIssues } = this.props; + const { title, icon, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, placeholder, appendContent, collapseIssues, history } = this.props; const { collapsed, animating } = this.state; const wrapperClassName = classNames('column-header__wrapper', { @@ -129,7 +130,7 @@ class ColumnHeader extends PureComponent { pinButton = ; } - if (!pinned && ((multiColumn && router.history.location?.state?.fromMastodon) || showBackButton)) { + if (!pinned && ((multiColumn && history.location?.state?.fromMastodon) || showBackButton)) { backButton = (