[Glitch] Upgrade to react-router v5

Port 1b70d7ed7c to glitch-soc

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

app/javascript/flavours/glitch/features/compose/components/compose_form.jsx

@@ -9,6 +9,7 @@ import { length } from 'stringz';
 
 import { maxChars } from 'flavours/glitch/initial_state';
 import { isMobile } from 'flavours/glitch/is_mobile';
+import { WithOptionalRouterPropTypes, withOptionalRouter } from 'flavours/glitch/utils/react_router';
 
 import AutosuggestInput from '../../../components/autosuggest_input';
 import AutosuggestTextarea from '../../../components/autosuggest_textarea';
@@ -38,11 +39,6 @@ const messages = defineMessages({
 });
 
 class ComposeForm extends ImmutablePureComponent {
-
-  static contextTypes = {
-    router: PropTypes.object,
-  };
-
   static propTypes = {
     intl: PropTypes.object.isRequired,
     text: PropTypes.string,
@@ -70,7 +66,6 @@ class ComposeForm extends ImmutablePureComponent {
     isInReply: PropTypes.bool,
     singleColumn: PropTypes.bool,
     lang: PropTypes.string,
-
     advancedOptions: ImmutablePropTypes.map,
     layout: PropTypes.string,
     media: ImmutablePropTypes.list,
@@ -82,6 +77,7 @@ class ComposeForm extends ImmutablePureComponent {
     onChangeSpoilerness: PropTypes.func,
     onChangeVisibility: PropTypes.func,
     onMediaDescriptionConfirm: PropTypes.func,
+    ...WithOptionalRouterPropTypes
   };
 
   static defaultProps = {
@@ -129,12 +125,12 @@ class ComposeForm extends ImmutablePureComponent {
     // Submit unless there are media with missing descriptions
     if (mediaDescriptionConfirmation && onMediaDescriptionConfirm && media && media.some(item => !item.get('description'))) {
       const firstWithoutDescription = media.find(item => !item.get('description'));
-      onMediaDescriptionConfirm(this.context.router ? this.context.router.history : null, firstWithoutDescription.get('id'), overriddenVisibility);
+      onMediaDescriptionConfirm(this.props.history || null, firstWithoutDescription.get('id'), overriddenVisibility);
     } else if (onSubmit) {
       if (onChangeVisibility && overriddenVisibility) {
         onChangeVisibility(overriddenVisibility);
       }
-      onSubmit(this.context.router ? this.context.router.history : null);
+      onSubmit(this.props.history || null);
     }
   };
 
@@ -390,4 +386,4 @@ class ComposeForm extends ImmutablePureComponent {
 
 }
 
-export default injectIntl(ComposeForm);
+export default withOptionalRouter(injectIntl(ComposeForm));

app/javascript/flavours/glitch/features/compose/components/reply_indicator.jsx

@@ -1,4 +1,3 @@
-//  Package imports.
 import PropTypes from 'prop-types';
 
 import { defineMessages, injectIntl } from 'react-intl';
@@ -6,18 +5,13 @@ import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-//  Components.
 import AttachmentList from 'flavours/glitch/components/attachment_list';
 import { IconButton } from 'flavours/glitch/components/icon_button';
 import AccountContainer from 'flavours/glitch/containers/account_container';
-//  Messages.
-const messages = defineMessages({
-  cancel: {
-    defaultMessage: 'Cancel',
-    id: 'reply_indicator.cancel',
-  },
-});
 
+const messages = defineMessages({
+  cancel: { id: 'reply_indicator.cancel', defaultMessage: 'Cancel' },
+});
 
 class ReplyIndicator extends ImmutablePureComponent {
 

app/javascript/flavours/glitch/features/compose/components/search.jsx

@@ -4,14 +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 'flavours/glitch/components/icon';
+import { Icon }  from 'flavours/glitch/components/icon';
 import { domain, searchEnabled } from 'flavours/glitch/initial_state';
-import { focusRoot } from 'flavours/glitch/utils/dom_helpers';
 import { HASHTAG_REGEX } from 'flavours/glitch/utils/hashtags';
+import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
 
 const messages = defineMessages({
   placeholder: { id: 'search.placeholder', defaultMessage: 'Search' },
@@ -32,7 +32,6 @@ const labelForRecentSearch = search => {
 class Search extends PureComponent {
 
   static contextTypes = {
-    router: PropTypes.object.isRequired,
     identity: PropTypes.object.isRequired,
   };
 
@@ -50,6 +49,7 @@ class Search extends PureComponent {
     openInRoute: PropTypes.bool,
     intl: PropTypes.object.isRequired,
     singleColumn: PropTypes.bool,
+    ...WithRouterPropTypes,
   };
 
   state = {
@@ -122,8 +122,7 @@ class Search extends PureComponent {
     switch(e.key) {
     case 'Escape':
       e.preventDefault();
-
-      focusRoot();
+      this._unfocus();
 
       break;
     case 'ArrowDown':
@@ -170,32 +169,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 { onOpenURL } = this.props;
+    const { onOpenURL, history } = this.props;
 
-    onOpenURL(router.history);
+    onOpenURL(history);
     this._unfocus();
   };
 
@@ -208,13 +204,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'));
@@ -246,8 +241,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);
 
@@ -256,7 +250,7 @@ class Search extends PureComponent {
     }
 
     if (openInRoute) {
-      router.history.push('/search');
+      history.push('/search');
     }
 
     this._unfocus();
@@ -403,4 +397,4 @@ class Search extends PureComponent {
 
 }
 
-export default injectIntl(Search);
+export default withRouter(injectIntl(Search));

app/javascript/flavours/glitch/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,