Minor changes, port 'Generalize “press back to close modal” to any modal and to public pages' from Mastodon

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/components/modal_root.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import 'wicg-inert';
+import { createBrowserHistory } from 'history';
 import { injectIntl, FormattedMessage, defineMessages } from 'react-intl';
 import { connect } from 'react-redux';
 import { openModal } from '../actions/modal';
@@ -43,6 +44,7 @@ class ModalRoot extends React.PureComponent {
     intl: PropTypes.object.isRequired,
     hasComposeContent: PropTypes.bool,
     type: PropTypes.string,
+    onCancel: PropTypes.func,
   };
 
   state = {
@@ -100,12 +102,15 @@ class ModalRoot extends React.PureComponent {
   componentDidMount() {
     window.addEventListener('keyup', this.handleKeyUp, false);
     window.addEventListener('keydown', this.handleKeyDown, false);
+    this.history = this.context.router ? this.context.router.history : createBrowserHistory();
   }
 
   componentDidUpdate(prevProps) {
     if (!!this.props.children && !prevProps.children) {
       this.activeElement = document.activeElement;
       this.getSiblings().forEach(sibling => sibling.setAttribute('inert', true));
+
+      this._handleModalOpen();
     } else if (!prevProps.children) {
       this.setState({ revealed: false });
     }
@@ -114,12 +119,16 @@ class ModalRoot extends React.PureComponent {
       this.activeElement.focus();
       this.activeElement = null;
       this.getSiblings().forEach(sibling => sibling.removeAttribute('inert'));
+
+      this._handleModalClose();
     }
 
     if (this.props.children) {
       requestAnimationFrame(() => {
         this.setState({ revealed: true });
       });
+
+      this._ensureHistoryBuffer();
     }
   }
 
@@ -128,6 +137,34 @@ class ModalRoot extends React.PureComponent {
     window.removeEventListener('keydown', this.handleKeyDown);
   }
 
+  _handleModalOpen() {
+    this._modalHistoryKey = Date.now();
+    this.unlistenHistory = this.history.listen((_, action) => {
+      if (action === 'POP') {
+        this.handleOnClose();
+
+        if (this.props.onCancel) this.props.onCancel();
+      }
+    });
+  }
+
+  _handleModalClose() {
+    if (this.unlistenHistory) {
+      this.unlistenHistory();
+    }
+    const { state } = this.history.location;
+    if (state && state.soapboxModalKey === this._modalHistoryKey) {
+      this.history.goBack();
+    }
+  }
+
+  _ensureHistoryBuffer() {
+    const { pathname, state } = this.history.location;
+    if (!state || state.soapboxModalKey !== this._modalHistoryKey) {
+      this.history.push(pathname, { ...state, soapboxModalKey: this._modalHistoryKey });
+    }
+  }
+
   getSiblings = () => {
     return Array(...this.node.parentElement.childNodes).filter(node => node !== this.node);
   }

app/soapbox/components/status_reply_mentions.js

@@ -89,13 +89,9 @@ class StatusReplyMentions extends ImmutablePureComponent {
               {' '}
             </>)),
             more: to.size > 2 && (
-              <a
+              <span type='button' role='presentation' onClick={this.handleOpenMentionsModal}>
-                href='#'
-                onClick={this.handleOpenMentionsModal}
-              >
-
                 <FormattedMessage id='reply_mentions.more' defaultMessage='and {count} more' values={{ count: to.size - 2 }} />
-              </a>
+              </span>
             ),
           }}
         />

app/soapbox/containers/soapbox.js

@@ -29,9 +29,6 @@ import { createGlobals } from 'soapbox/globals';
 
 const validLocale = locale => Object.keys(messages).includes(locale);
 
-const previewMediaState = 'previewMediaModal';
-const previewVideoState = 'previewVideoModal';
-
 export const store = configureStore();
 
 // Configure global functions for developers
@@ -117,8 +114,8 @@ class SoapboxMount extends React.PureComponent {
     this.maybeUpdateMessages(prevProps);
   }
 
-  shouldUpdateScroll(_, { location }) {
+  shouldUpdateScroll(prevRouterProps, { location }) {
-    return location.state !== previewMediaState && location.state !== previewVideoState;
+    return !(location.state?.soapboxModalKey && location.state?.soapboxModalKey !== prevRouterProps?.location?.state?.soapboxModalKey);
   }
 
   render() {

app/soapbox/features/status/components/status_interaction_bar.js

@@ -76,16 +76,17 @@ class StatusInteractionBar extends ImmutablePureComponent {
 
     if (status.get('reblogs_count')) {
       return (
-        <a
+        <span
-          href='#'
           className='emoji-react emoji-react--reblogs'
+          type='button'
+          role='presentation'
           onClick={this.handleOpenReblogsModal}
         >
           <Icon src={require('feather-icons/dist/icons/repeat.svg')} />
           <span className='emoji-reacts__count'>
             <FormattedNumber value={status.get('reblogs_count')} />
           </span>
-        </a>
+        </span>
       );
     }
 
@@ -113,13 +114,14 @@ class StatusInteractionBar extends ImmutablePureComponent {
 
       if (features.exposableReactions) {
         return (
-          <a
+          <span
-            href='#'
             className='emoji-react emoji-react--favourites'
+            type='button'
+            role='presentation'
             onClick={this.handleOpenFavouritesModal}
           >
             {favourites}
-          </a>
+          </span>
         );
       } else {
         return (
@@ -164,14 +166,15 @@ class StatusInteractionBar extends ImmutablePureComponent {
 
               if (features.exposableReactions) {
                 return (
-                  <a
+                  <span
-                    href='#'
                     className='emoji-react'
+                    type='button'
+                    role='presentation'
                     key={i}
                     onClick={this.handleOpenReactionsModal(e)}
                   >
                     {emojiReact}
-                  </a>
+                  </span>
                 );
               }
 

app/soapbox/features/ui/components/media_modal.js

@@ -18,8 +18,6 @@ const messages = defineMessages({
   next: { id: 'lightbox.next', defaultMessage: 'Next' },
 });
 
-export const previewState = 'previewMediaModal';
-
 export default @injectIntl
 class MediaModal extends ImmutablePureComponent {
 
@@ -32,10 +30,6 @@ class MediaModal extends ImmutablePureComponent {
     intl: PropTypes.object.isRequired,
   };
 
-  static contextTypes = {
-    router: PropTypes.object,
-  };
-
   state = {
     index: null,
     navigationHidden: false,
@@ -75,28 +69,10 @@ class MediaModal extends ImmutablePureComponent {
 
   componentDidMount() {
     window.addEventListener('keydown', this.handleKeyDown, false);
-
-    if (this.context.router) {
-      const history = this.context.router.history;
-
-      history.push(history.location.pathname, previewState);
-
-      this.unlistenHistory = history.listen(() => {
-        this.props.onClose();
-      });
-    }
   }
 
   componentWillUnmount() {
     window.removeEventListener('keydown', this.handleKeyDown);
-
-    if (this.context.router) {
-      this.unlistenHistory();
-
-      if (this.context.router.history.location.state === previewState) {
-        this.context.router.history.goBack();
-      }
-    }
   }
 
   getIndex() {

app/soapbox/features/ui/components/video_modal.js

@@ -5,8 +5,6 @@ import Video from 'soapbox/features/video';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { FormattedMessage } from 'react-intl';
 
-export const previewState = 'previewVideoModal';
-
 export default class VideoModal extends ImmutablePureComponent {
 
   static propTypes = {
@@ -17,32 +15,6 @@ export default class VideoModal extends ImmutablePureComponent {
     onClose: PropTypes.func.isRequired,
   };
 
-  static contextTypes = {
-    router: PropTypes.object,
-  };
-
-  componentDidMount() {
-    if (this.context.router) {
-      const history = this.context.router.history;
-
-      history.push(history.location.pathname, previewState);
-
-      this.unlistenHistory = history.listen(() => {
-        this.props.onClose();
-      });
-    }
-  }
-
-  componentWillUnmount() {
-    if (this.context.router) {
-      this.unlistenHistory();
-
-      if (this.context.router.history.location.state === previewState) {
-        this.context.router.history.goBack();
-      }
-    }
-  }
-
   handleStatusClick = e => {
     const { status, account } = this.props;
     if (e.button === 0 && !(e.ctrlKey || e.metaKey)) {

app/styles/components/emoji-reacts.scss

@@ -19,6 +19,10 @@
   + .emoji-react {
     margin-right: -8px;
   }
+
+  &[type='button'] {
+    cursor: pointer;
+  }
 }
 
 .emoji-react--reblogs,

app/styles/components/reply-mentions.scss

@@ -20,5 +20,9 @@
   .reply-mentions {
     display: block;
     margin: 4px 0 0 0;
+
+    span {
+      cursor: pointer;
+    }
   }
 }

package.json

@@ -85,6 +85,7 @@
     "escape-html": "^1.0.3",
     "exif-js": "^2.3.0",
     "feather-icons": "^4.28.0",
+    "history": "^4.10.1",
     "html-webpack-harddisk-plugin": "^2.0.0",
     "html-webpack-plugin": "^5.3.2",
     "http-link-header": "^1.0.2",

yarn.lock

@@ -4588,7 +4588,7 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
-history@^4.7.2:
+history@^4.10.1, history@^4.7.2:
   version "4.10.1"
   resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
   integrity sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==