Upgrade to react-router v5 (#25047)

Co-authored-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/mastodon/features/compose/components/compose_form.jsx

@@ -10,6 +10,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { length } from 'stringz';
 
 import { Icon }  from 'mastodon/components/icon';
+import { WithOptionalRouterPropTypes, withOptionalRouter } from 'mastodon/utils/react_router';
 
 import AutosuggestInput from '../../../components/autosuggest_input';
 import AutosuggestTextarea from '../../../components/autosuggest_textarea';
@@ -39,11 +40,6 @@ const messages = defineMessages({
 });
 
 class ComposeForm extends ImmutablePureComponent {
-
-  static contextTypes = {
-    router: PropTypes.object,
-  };
-
   static propTypes = {
     intl: PropTypes.object.isRequired,
     text: PropTypes.string.isRequired,
@@ -71,6 +67,7 @@ class ComposeForm extends ImmutablePureComponent {
     isInReply: PropTypes.bool,
     singleColumn: PropTypes.bool,
     lang: PropTypes.string,
+    ...WithOptionalRouterPropTypes
   };
 
   static defaultProps = {
@@ -114,7 +111,7 @@ class ComposeForm extends ImmutablePureComponent {
       return;
     }
 
-    this.props.onSubmit(this.context.router ? this.context.router.history : null);
+    this.props.onSubmit(this.props.history || null);
 
     if (e) {
       e.preventDefault();
@@ -318,4 +315,4 @@ class ComposeForm extends ImmutablePureComponent {
 
 }
 
-export default injectIntl(ComposeForm);
+export default withOptionalRouter(injectIntl(ComposeForm));

app/javascript/mastodon/features/compose/components/reply_indicator.jsx

@@ -6,6 +6,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
 import AttachmentList from 'mastodon/components/attachment_list';
+import { WithOptionalRouterPropTypes, withOptionalRouter } from 'mastodon/utils/react_router';
 
 import { Avatar } from '../../../components/avatar';
 import { DisplayName } from '../../../components/display_name';
@@ -17,14 +18,11 @@ const messages = defineMessages({
 
 class ReplyIndicator extends ImmutablePureComponent {
 
-  static contextTypes = {
-    router: PropTypes.object,
-  };
-
   static propTypes = {
     status: ImmutablePropTypes.map,
     onCancel: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
+    ...WithOptionalRouterPropTypes,
   };
 
   handleClick = () => {
@@ -34,7 +32,7 @@ class ReplyIndicator extends ImmutablePureComponent {
   handleAccountClick = (e) => {
     if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {
       e.preventDefault();
-      this.context.router.history.push(`/@${this.props.status.getIn(['account', 'acct'])}`);
+      this.props.history?.push(`/@${this.props.status.getIn(['account', 'acct'])}`);
     }
   };
 
@@ -72,4 +70,4 @@ class ReplyIndicator extends ImmutablePureComponent {
 
 }
 
-export default injectIntl(ReplyIndicator);
+export default withOptionalRouter(injectIntl(ReplyIndicator));

app/javascript/mastodon/features/compose/components/search.jsx

@@ -4,12 +4,14 @@ import { PureComponent } from 'react';
 import { defineMessages, injectIntl, FormattedMessage, FormattedList } from 'react-intl';
 
 import classNames from 'classnames';
+import { withRouter } from 'react-router-dom';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
 import { Icon }  from 'mastodon/components/icon';
 import { domain, searchEnabled } from 'mastodon/initial_state';
 import { HASHTAG_REGEX } from 'mastodon/utils/hashtags';
+import { WithRouterPropTypes } from 'mastodon/utils/react_router';
 
 const messages = defineMessages({
   placeholder: { id: 'search.placeholder', defaultMessage: 'Search' },
@@ -30,7 +32,6 @@ const labelForRecentSearch = search => {
 class Search extends PureComponent {
 
   static contextTypes = {
-    router: PropTypes.object.isRequired,
     identity: PropTypes.object.isRequired,
   };
 
@@ -48,6 +49,7 @@ class Search extends PureComponent {
     openInRoute: PropTypes.bool,
     intl: PropTypes.object.isRequired,
     singleColumn: PropTypes.bool,
+    ...WithRouterPropTypes,
   };
 
   state = {
@@ -160,32 +162,29 @@ class Search extends PureComponent {
   };
 
   handleHashtagClick = () => {
-    const { router } = this.context;
-    const { value, onClickSearchResult } = this.props;
+    const { value, onClickSearchResult, history } = this.props;
 
     const query = value.trim().replace(/^#/, '');
 
-    router.history.push(`/tags/${query}`);
+    history.push(`/tags/${query}`);
     onClickSearchResult(query, 'hashtag');
     this._unfocus();
   };
 
   handleAccountClick = () => {
-    const { router } = this.context;
-    const { value, onClickSearchResult } = this.props;
+    const { value, onClickSearchResult, history } = this.props;
 
     const query = value.trim().replace(/^@/, '');
 
-    router.history.push(`/@${query}`);
+    history.push(`/@${query}`);
     onClickSearchResult(query, 'account');
     this._unfocus();
   };
 
   handleURLClick = () => {
-    const { router } = this.context;
-    const { value, onOpenURL } = this.props;
+    const { value, onOpenURL, history } = this.props;
 
-    onOpenURL(value, router.history);
+    onOpenURL(value, history);
     this._unfocus();
   };
 
@@ -198,13 +197,12 @@ class Search extends PureComponent {
   };
 
   handleRecentSearchClick = search => {
-    const { onChange } = this.props;
-    const { router } = this.context;
+    const { onChange, history } = this.props;
 
     if (search.get('type') === 'account') {
-      router.history.push(`/@${search.get('q')}`);
+      history.push(`/@${search.get('q')}`);
     } else if (search.get('type') === 'hashtag') {
-      router.history.push(`/tags/${search.get('q')}`);
+      history.push(`/tags/${search.get('q')}`);
     } else {
       onChange(search.get('q'));
       this._submit(search.get('type'));
@@ -236,8 +234,7 @@ class Search extends PureComponent {
   }
 
   _submit (type) {
-    const { onSubmit, openInRoute, value, onClickSearchResult } = this.props;
-    const { router } = this.context;
+    const { onSubmit, openInRoute, value, onClickSearchResult, history } = this.props;
 
     onSubmit(type);
 
@@ -246,7 +243,7 @@ class Search extends PureComponent {
     }
 
     if (openInRoute) {
-      router.history.push('/search');
+      history.push('/search');
     }
 
     this._unfocus();
@@ -395,4 +392,4 @@ class Search extends PureComponent {
 
 }
 
-export default injectIntl(Search);
+export default withRouter(injectIntl(Search));

app/javascript/mastodon/features/compose/components/upload.jsx

@@ -13,10 +13,6 @@ import Motion from '../../ui/util/optional_motion';
 
 export default class Upload extends ImmutablePureComponent {
 
-  static contextTypes = {
-    router: PropTypes.object,
-  };
-
   static propTypes = {
     media: ImmutablePropTypes.map.isRequired,
     onUndo: PropTypes.func.isRequired,