Merge branch 'mentions-modal' into 'develop'

Fix modals

See merge request soapbox-pub/soapbox-fe!962

app/soapbox/actions/modal.js

@@ -9,9 +9,10 @@ export function openModal(type, props) {
   };
 }
 
-export function closeModal(type) {
+export function closeModal(type, noPop) {
   return {
     type: MODAL_CLOSE,
     modalType: type,
+    noPop,
   };
 }

app/soapbox/components/modal_root.js

@@ -45,6 +45,7 @@ class ModalRoot extends React.PureComponent {
     hasComposeContent: PropTypes.bool,
     type: PropTypes.string,
     onCancel: PropTypes.func,
+    noPop: PropTypes.bool,
   };
 
   state = {
@@ -122,7 +123,9 @@ class ModalRoot extends React.PureComponent {
       this.activeElement = null;
       this.getSiblings().forEach(sibling => sibling.removeAttribute('inert'));
 
-      this._handleModalClose();
+      if (!this.props.noPop) {
+        this._handleModalClose();
+      }
     }
 
     if (this.props.children) {

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

@@ -23,6 +23,10 @@ export default @connect(mapStateToProps)
 @injectIntl
 class FavouritesModal extends React.PureComponent {
 
+  static contextTypes = {
+    router: PropTypes.object,
+  };
+
   static propTypes = {
     onClose: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
@@ -40,10 +44,21 @@ class FavouritesModal extends React.PureComponent {
 
   componentDidMount() {
     this.fetchData();
+    this.unlistenHistory = this.context.router.history.listen((_, action) => {
+      if (action === 'PUSH') {
+        this.onClickClose(null, true);
+      }
+    });
   }
 
-  onClickClose = () => {
-    this.props.onClose('FAVOURITES');
+  componentWillUnmount() {
+    if (this.unlistenHistory) {
+      this.unlistenHistory();
+    }
+  }
+
+  onClickClose = (_, noPop) => {
+    this.props.onClose('FAVOURITES', noPop);
   };
 
   render() {

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

@@ -31,6 +31,10 @@ export default @connect(mapStateToProps)
 @injectIntl
 class MentionsModal extends React.PureComponent {
 
+  static contextTypes = {
+    router: PropTypes.object,
+  };
+
   static propTypes = {
     onClose: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
@@ -48,10 +52,21 @@ class MentionsModal extends React.PureComponent {
 
   componentDidMount() {
     this.fetchData();
+    this.unlistenHistory = this.context.router.history.listen((_, action) => {
+      if (action === 'PUSH') {
+        this.onClickClose(null, true);
+      }
+    });
   }
 
-  onClickClose = () => {
-    this.props.onClose('MENTIONS');
+  componentWillUnmount() {
+    if (this.unlistenHistory) {
+      this.unlistenHistory();
+    }
+  }
+
+  onClickClose = (_, noPop) => {
+    this.props.onClose('MENTIONS', noPop);
   };
 
   render() {

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

@@ -62,6 +62,7 @@ export default class ModalRoot extends React.PureComponent {
   static propTypes = {
     type: PropTypes.string,
     props: PropTypes.object,
+    noPop: PropTypes.bool,
     onClose: PropTypes.func.isRequired,
   };
 
@@ -85,17 +86,17 @@ export default class ModalRoot extends React.PureComponent {
     return <BundleModalError {...props} onClose={this.onClickClose} />;
   }
 
-  onClickClose = () => {
+  onClickClose = (_, noPop) => {
     const { onClose, type } = this.props;
-    onClose(type);
+    onClose(type, noPop);
   }
 
   render() {
-    const { type, props } = this.props;
+    const { type, props, noPop } = this.props;
     const visible = !!type;
 
     return (
-      <Base onClose={this.onClickClose} type={type}>
+      <Base onClose={this.onClickClose} type={type} noPop={noPop}>
         {visible && (
           <BundleContainer fetchComponent={MODAL_COMPONENTS[type]} loading={this.renderLoading(type)} error={this.renderError} renderDelay={200}>
             {(SpecificComponent) => <SpecificComponent {...props} onClose={this.onClickClose} />}

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

@@ -31,6 +31,10 @@ export default @connect(mapStateToProps)
 @injectIntl
 class ReactionsModal extends React.PureComponent {
 
+  static contextTypes = {
+    router: PropTypes.object,
+  };
+
   static propTypes = {
     onClose: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
@@ -54,10 +58,21 @@ class ReactionsModal extends React.PureComponent {
 
   componentDidMount() {
     this.fetchData();
+    this.unlistenHistory = this.context.router.history.listen((_, action) => {
+      if (action === 'PUSH') {
+        this.onClickClose(null, true);
+      }
+    });
   }
 
-  onClickClose = () => {
-    this.props.onClose('REACTIONS');
+  componentWillUnmount() {
+    if (this.unlistenHistory) {
+      this.unlistenHistory();
+    }
+  }
+
+  onClickClose = (_, noPop) => {
+    this.props.onClose('REACTIONS', noPop);
   };
 
   handleFilterChange = (reaction) => () => {

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

@@ -24,6 +24,10 @@ export default @connect(mapStateToProps)
 @injectIntl
 class ReblogsModal extends React.PureComponent {
 
+  static contextTypes = {
+    router: PropTypes.object,
+  };
+
   static propTypes = {
     onClose: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
@@ -42,10 +46,21 @@ class ReblogsModal extends React.PureComponent {
 
   componentDidMount() {
     this.fetchData();
+    this.unlistenHistory = this.context.router.history.listen((_, action) => {
+      if (action === 'PUSH') {
+        this.onClickClose(null, true);
+      }
+    });
   }
 
-  onClickClose = () => {
-    this.props.onClose('REBLOGS');
+  componentWillUnmount() {
+    if (this.unlistenHistory) {
+      this.unlistenHistory();
+    }
+  }
+
+  onClickClose = (_, noPop) => {
+    this.props.onClose('REBLOGS', noPop);
   };
 
   render() {

app/soapbox/features/ui/containers/modal_container.js

@@ -6,15 +6,16 @@ import ModalRoot from '../components/modal_root';
 const mapStateToProps = state => ({
   type: state.get('modal').modalType,
   props: state.get('modal').modalProps,
+  noPop: state.get('modal').noPop,
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  onClose(optionalType) {
+  onClose(optionalType, noPop) {
     if (optionalType === 'COMPOSE') {
       dispatch(cancelReplyCompose());
     }
 
-    dispatch(closeModal());
+    dispatch(closeModal(undefined, noPop));
   },
 });
 

app/soapbox/reducers/__tests__/modal-test.js

@@ -6,6 +6,7 @@ describe('modal reducer', () => {
     expect(reducer(undefined, {})).toEqual({
       modalType: null,
       modalProps: {},
+      noPop: false,
     });
   });
 
@@ -13,6 +14,7 @@ describe('modal reducer', () => {
     const state = {
       modalType: null,
       modalProps: {},
+      noPop: false,
     };
     const action = {
       type: MODAL_OPEN,
@@ -36,6 +38,7 @@ describe('modal reducer', () => {
     expect(reducer(state, action)).toMatchObject({
       modalType: null,
       modalProps: {},
+      noPop: false,
     });
   });
 

app/soapbox/reducers/modal.js

@@ -3,6 +3,7 @@ import { MODAL_OPEN, MODAL_CLOSE } from '../actions/modal';
 const initialState = {
   modalType: null,
   modalProps: {},
+  noPop: false,
 };
 
 export default function modal(state = initialState, action) {
@@ -10,7 +11,12 @@ export default function modal(state = initialState, action) {
   case MODAL_OPEN:
     return { modalType: action.modalType, modalProps: action.modalProps };
   case MODAL_CLOSE:
-    return (action.modalType === undefined || action.modalType === state.modalType) ? initialState : state;
+    return {
+      ...(action.modalType === undefined || action.modalType === state.modalType)
+        ? initialState
+        : state,
+      noPop: !!action.noPop,
+    };
   default:
     return state;
   }