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