From 1b70d7ed7c0fd3a9fcf028bf76b8c62ac8b3897f Mon Sep 17 00:00:00 2001 From: Renaud Chaput Date: Thu, 19 Oct 2023 19:44:55 +0200 Subject: [PATCH] Upgrade to react-router v5 (#25047) Co-authored-by: Claire --- .eslintrc.js | 2 +- .../components/column_back_button.jsx | 21 ++--- .../mastodon/components/column_header.jsx | 21 ++--- .../mastodon/components/dropdown_menu.jsx | 20 +++-- .../mastodon/components/modal_root.jsx | 12 +-- .../mastodon/components/navigation_portal.jsx | 35 -------- .../mastodon/components/navigation_portal.tsx | 25 ++++++ app/javascript/mastodon/components/router.tsx | 28 +++++-- .../mastodon/components/scrollable_list.jsx | 37 +++++++-- app/javascript/mastodon/components/status.jsx | 24 +++--- .../mastodon/components/status_action_bar.jsx | 20 ++--- .../mastodon/components/status_content.jsx | 19 +++-- .../account/components/featured_tags.jsx | 4 - .../features/account/components/header.jsx | 28 +++---- .../account_timeline/components/header.jsx | 17 ++-- .../features/community_timeline/index.jsx | 1 - .../compose/components/compose_form.jsx | 11 +-- .../compose/components/reply_indicator.jsx | 10 +-- .../features/compose/components/search.jsx | 33 ++++---- .../features/compose/components/upload.jsx | 4 - .../components/conversation.jsx | 16 ++-- .../mastodon/features/directory/index.jsx | 4 - .../mastodon/features/explore/index.jsx | 1 - .../components/announcements.jsx | 24 +++--- .../features/getting_started/index.jsx | 1 - .../mastodon/features/list_timeline/index.jsx | 13 ++- .../notifications/components/notification.jsx | 17 ++-- .../mastodon/features/onboarding/index.jsx | 21 ++--- .../picture_in_picture/components/footer.jsx | 17 ++-- .../features/public_timeline/index.jsx | 1 - .../features/status/components/action_bar.jsx | 16 ++-- .../status/components/detailed_status.jsx | 18 ++--- .../mastodon/features/status/index.jsx | 13 +-- .../features/ui/components/boost_modal.jsx | 12 ++- .../features/ui/components/columns_area.jsx | 5 -- .../features/ui/components/list_panel.jsx | 4 +- .../ui/components/navigation_panel.jsx | 3 +- app/javascript/mastodon/features/ui/index.jsx | 42 +++++----- .../features/ui/util/react_router_helpers.jsx | 37 ++++----- .../mastodon/utils/react_router.jsx | 60 ++++++++++++++ package.json | 7 +- yarn.lock | 80 +++++++++++-------- 42 files changed, 421 insertions(+), 363 deletions(-) delete mode 100644 app/javascript/mastodon/components/navigation_portal.jsx create mode 100644 app/javascript/mastodon/components/navigation_portal.tsx create mode 100644 app/javascript/mastodon/utils/react_router.jsx diff --git a/.eslintrc.js b/.eslintrc.js index 3bac9ed694ee11..70506f60c48521 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 74a03b093ab8cc..b47718ed8924bd 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 { Icon } from 'mastodon/components/icon'; +import { withRouter } from 'react-router-dom'; -export default class ColumnBackButton extends PureComponent { +import { Icon } from 'mastodon/components/icon'; +import { WithRouterPropTypes } from 'mastodon/utils/react_router'; - 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 9d29bbae0346be..2896a501be7d70 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 = (