Revert "Upgrade to react-router v5 (mastodon#25047)"

This reverts commit 1b70d7e.

.eslintrc.js

@@ -236,7 +236,7 @@ module.exports = {
           },
           // Common React utilities
           {
-            pattern: '{classnames,react-helmet,react-router,react-router-dom}',
+            pattern: '{classnames,react-helmet,react-router-dom}',
             group: 'external',
             position: 'before',
           },

app/javascript/mastodon/components/column_back_button.jsx

@@ -4,28 +4,29 @@ 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';
 
-class ColumnBackButton extends PureComponent {
+export default class ColumnBackButton extends PureComponent {
+
+  static contextTypes = {
+    router: PropTypes.object,
+  };
 
   static propTypes = {
     multiColumn: PropTypes.bool,
     onClick: PropTypes.func,
-    ...WithRouterPropTypes,
   };
 
   handleClick = () => {
-    const { onClick, history } = this.props;
+    const { router } = this.context;
+    const { onClick } = this.props;
 
     if (onClick) {
       onClick();
-    } else if (history.location?.state?.fromMastodon) {
-      history.goBack();
+    } else if (router.history.location?.state?.fromMastodon) {
+      router.history.goBack();
     } else {
-      history.push('/');
+      router.history.push('/');
     }
   };
 
@@ -59,5 +60,3 @@ class ColumnBackButton extends PureComponent {
   }
 
 }
-
-export default withRouter(ColumnBackButton);

app/javascript/mastodon/components/column_header.jsx

@@ -5,10 +5,8 @@ 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' },
@@ -20,6 +18,7 @@ const messages = defineMessages({
 class ColumnHeader extends PureComponent {
 
   static contextTypes = {
+    router: PropTypes.object,
     identity: PropTypes.object,
   };
 
@@ -39,7 +38,6 @@ class ColumnHeader extends PureComponent {
     onClick: PropTypes.func,
     appendContent: PropTypes.node,
     collapseIssues: PropTypes.bool,
-    ...WithRouterPropTypes,
   };
 
   state = {
@@ -65,12 +63,12 @@ class ColumnHeader extends PureComponent {
   };
 
   handleBackClick = () => {
-    const { history } = this.props;
+    const { router } = this.context;
 
-    if (history.location?.state?.fromMastodon) {
-      history.goBack();
+    if (router.history.location?.state?.fromMastodon) {
+      router.history.goBack();
     } else {
-      history.push('/');
+      router.history.push('/');
     }
   };
 
@@ -80,14 +78,15 @@ class ColumnHeader extends PureComponent {
 
   handlePin = () => {
     if (!this.props.pinned) {
-      this.props.history.replace('/');
+      this.context.router.history.replace('/');
     }
 
     this.props.onPin();
   };
 
   render () {
-    const { title, icon, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, placeholder, appendContent, collapseIssues, history } = this.props;
+    const { router } = this.context;
+    const { title, icon, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, placeholder, appendContent, collapseIssues } = this.props;
     const { collapsed, animating } = this.state;
 
     const wrapperClassName = classNames('column-header__wrapper', {
@@ -130,7 +129,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 && history.location?.state?.fromMastodon) || showBackButton)) {
+    if (!pinned && ((multiColumn && router.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 />
@@ -216,4 +215,4 @@ class ColumnHeader extends PureComponent {
 
 }
 
-export default injectIntl(withRouter(ColumnHeader));
+export default injectIntl(ColumnHeader);

app/javascript/mastodon/components/dropdown_menu.jsx

@@ -2,23 +2,24 @@ 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 'mastodon/components/circular_progress';
-import { WithRouterPropTypes } from 'mastodon/utils/react_router';
-
+import { CircularProgress } from "./circular_progress";
 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,
@@ -158,7 +159,11 @@ class DropdownMenu extends PureComponent {
 
 }
 
-class Dropdown extends PureComponent {
+export default class Dropdown extends PureComponent {
+
+  static contextTypes = {
+    router: PropTypes.object,
+  };
 
   static propTypes = {
     children: PropTypes.node,
@@ -178,7 +183,6 @@ class Dropdown extends PureComponent {
     renderItem: PropTypes.func,
     renderHeader: PropTypes.func,
     onItemClick: PropTypes.func,
-    ...WithRouterPropTypes
   };
 
   static defaultProps = {
@@ -246,7 +250,7 @@ class Dropdown extends PureComponent {
       item.action();
     } else if (item && item.to) {
       e.preventDefault();
-      this.props.history.push(item.to);
+      this.context.router.history.push(item.to);
     }
   };
 
@@ -334,5 +338,3 @@ class Dropdown extends PureComponent {
   }
 
 }
-
-export default withRouter(Dropdown);

app/javascript/mastodon/components/modal_root.jsx

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

app/javascript/mastodon/components/navigation_portal.jsx

@@ -0,0 +1,35 @@
+import { PureComponent } from 'react';
+
+import { Switch, Route, withRouter } 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 = () => (
+  showTrends ? (
+    <>
+      <div className='flex-spacer' />
+      <Trends />
+    </>
+  ) : null
+);
+
+class NavigationPortal extends PureComponent {
+
+  render () {
+    return (
+      <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>
+    );
+  }
+
+}
+export default withRouter(NavigationPortal);

app/javascript/mastodon/components/router.tsx

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