Upgrade to react-router v5 (mastodon#25047)

Co-authored-by: Claire <[email protected]>

.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',
           },

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);

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 = <button key='pin-button' className='text-btn column-header__setting-btn' onClick={this.handlePin}><Icon id='plus' /> <FormattedMessage id='column_header.pin' defaultMessage='Pin' /></button>;
     }
 
-    if (!pinned && ((multiColumn && router.history.location?.state?.fromMastodon) || showBackButton)) {
+    if (!pinned && ((multiColumn && history.location?.state?.fromMastodon) || showBackButton)) {
       backButton = (
         <button onClick={this.handleBackClick} className='column-header__back-button'>
           <Icon id='chevron-left' className='column-back-button__icon' fixedWidth />
@@ -215,4 +216,4 @@ class ColumnHeader extends PureComponent {
 
 }
 
-export default injectIntl(ColumnHeader);
+export default injectIntl(withRouter(ColumnHeader));

app/javascript/mastodon/components/dropdown_menu.jsx

@@ -2,24 +2,23 @@ import PropTypes from 'prop-types';
 import { PureComponent, cloneElement, Children } from 'react';
 
 import classNames from 'classnames';
+import { withRouter } from 'react-router-dom';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
 import { supportsPassiveEvents } from 'detect-passive-events';
 import Overlay from 'react-overlays/Overlay';
 
-import { CircularProgress } from "./circular_progress";
+import { CircularProgress } from 'mastodon/components/circular_progress';
+import { WithRouterPropTypes } from 'mastodon/utils/react_router';
+
 import { IconButton } from './icon_button';
 
 const listenerOptions = supportsPassiveEvents ? { passive: true, capture: true } : true;
 let id = 0;
 
 class DropdownMenu extends PureComponent {
 
-  static contextTypes = {
-    router: PropTypes.object,
-  };
-
   static propTypes = {
     items: PropTypes.oneOfType([PropTypes.array, ImmutablePropTypes.list]).isRequired,
     loading: PropTypes.bool,
@@ -159,11 +158,7 @@ class DropdownMenu extends PureComponent {
 
 }
 
-export default class Dropdown extends PureComponent {
-
-  static contextTypes = {
-    router: PropTypes.object,
-  };
+class Dropdown extends PureComponent {
 
   static propTypes = {
     children: PropTypes.node,
@@ -183,6 +178,7 @@ export default class Dropdown extends PureComponent {
     renderItem: PropTypes.func,
     renderHeader: PropTypes.func,
     onItemClick: PropTypes.func,
+    ...WithRouterPropTypes
   };
 
   static defaultProps = {
@@ -250,7 +246,7 @@ export default class Dropdown extends PureComponent {
       item.action();
     } else if (item && item.to) {
       e.preventDefault();
-      this.context.router.history.push(item.to);
+      this.props.history.push(item.to);
     }
   };
 
@@ -338,3 +334,5 @@ export default class Dropdown extends PureComponent {
   }
 
 }
+
+export default withRouter(Dropdown);

app/javascript/mastodon/components/modal_root.jsx

@@ -2,14 +2,13 @@ import PropTypes from 'prop-types';
 import { PureComponent } from 'react';
 
 import 'wicg-inert';
+
 import { multiply } from 'color-blend';
 import { createBrowserHistory } from 'history';
 
-export default class ModalRoot extends PureComponent {
+import { WithOptionalRouterPropTypes, withOptionalRouter } from 'mastodon/utils/react_router';
 
-  static contextTypes = {
-    router: PropTypes.object,
-  };
+class ModalRoot extends PureComponent {
 
   static propTypes = {
     children: PropTypes.node,
@@ -20,6 +19,7 @@ export default class ModalRoot extends PureComponent {
       b: PropTypes.number,
     }),
     ignoreFocus: PropTypes.bool,
+    ...WithOptionalRouterPropTypes,
   };
 
   activeElement = this.props.children ? document.activeElement : null;
@@ -55,7 +55,7 @@ export default class ModalRoot extends PureComponent {
   componentDidMount () {
     window.addEventListener('keyup', this.handleKeyUp, false);
     window.addEventListener('keydown', this.handleKeyDown, false);
-    this.history = this.context.router ? this.context.router.history : createBrowserHistory();
+    this.history = this.props.history || createBrowserHistory();
   }
 
   UNSAFE_componentWillReceiveProps (nextProps) {
@@ -156,3 +156,5 @@ export default class ModalRoot extends PureComponent {
   }
 
 }
+
+export default withOptionalRouter(ModalRoot);

app/javascript/mastodon/components/navigation_portal.tsx

@@ -0,0 +1,25 @@
+import { Switch, Route } from 'react-router-dom';
+
+import AccountNavigation from 'mastodon/features/account/navigation';
+import Trends from 'mastodon/features/getting_started/containers/trends_container';
+import { showTrends } from 'mastodon/initial_state';
+
+const DefaultNavigation: React.FC = () =>
+  showTrends ? (
+    <>
+      <div className='flex-spacer' />
+      <Trends />
+    </>
+  ) : null;
+
+export const NavigationPortal: React.FC = () => (
+  <Switch>
+    <Route path='/@:acct' exact component={AccountNavigation} />
+    <Route path='/@:acct/tagged/:tagged?' exact component={AccountNavigation} />
+    <Route path='/@:acct/with_replies' exact component={AccountNavigation} />
+    <Route path='/@:acct/followers' exact component={AccountNavigation} />
+    <Route path='/@:acct/following' exact component={AccountNavigation} />
+    <Route path='/@:acct/media' exact component={AccountNavigation} />
+    <Route component={DefaultNavigation} />
+  </Switch>
+);

app/javascript/mastodon/components/router.tsx

@@ -1,41 +1,55 @@
 import type { PropsWithChildren } from 'react';
 import React from 'react';
 
-import { createBrowserHistory } from 'history';
 import { Router as OriginalRouter } from 'react-router';
 
+import type { LocationDescriptor, Path } from 'history';
+import { createBrowserHistory } from 'history';
+
 import { layoutFromWindow } from 'mastodon/is_mobile';
 
 interface MastodonLocationState {
   fromMastodon?: boolean;
   mastodonModalKey?: string;
 }
+type HistoryPath = Path | LocationDescriptor<MastodonLocationState>;
 
 const browserHistory = createBrowserHistory<
   MastodonLocationState | undefined
 >();
 const originalPush = browserHistory.push.bind(browserHistory);
 const originalReplace = browserHistory.replace.bind(browserHistory);
 
-browserHistory.push = (path: string, state?: MastodonLocationState) => {
+function extractRealPath(path: HistoryPath) {
+  if (typeof path === 'string') return path;
+  else return path.pathname;
+}
+
+browserHistory.push = (path: HistoryPath, state?: MastodonLocationState) => {
   state = state ?? {};
   state.fromMastodon = true;
 
-  if (layoutFromWindow() === 'multi-column' && !path.startsWith('/deck')) {
-    originalPush(`/deck${path}`, state);
+  const realPath = extractRealPath(path);
+  if (!realPath) return;
+
+  if (layoutFromWindow() === 'multi-column' && !realPath.startsWith('/deck')) {
+    originalPush(`/deck${realPath}`, state);
   } else {
     originalPush(path, state);
   }
 };
 
-browserHistory.replace = (path: string, state?: MastodonLocationState) => {
+browserHistory.replace = (path: HistoryPath, state?: MastodonLocationState) => {
   if (browserHistory.location.state?.fromMastodon) {
     state = state ?? {};
     state.fromMastodon = true;
   }
 
-  if (layoutFromWindow() === 'multi-column' && !path.startsWith('/deck')) {
-    originalReplace(`/deck${path}`, state);
+  const realPath = extractRealPath(path);
+  if (!realPath) return;
+
+  if (layoutFromWindow() === 'multi-column' && !realPath.startsWith('/deck')) {
+    originalReplace(`/deck${realPath}`, state);
   } else {
     originalReplace(path, state);
   }