Use stack for modals

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

app/soapbox/actions/modal.js

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

app/soapbox/components/modal_root.js

@@ -6,7 +6,7 @@ import { injectIntl, FormattedMessage, defineMessages } from 'react-intl';
 import { connect } from 'react-redux';
 
 import { cancelReplyCompose } from '../actions/compose';
-import { openModal } from '../actions/modal';
+import { openModal, closeModal } from '../actions/modal';
 
 const messages = defineMessages({
   confirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
@@ -31,7 +31,11 @@ const mapDispatchToProps = (dispatch) => ({
   onOpenModal(type, opts) {
     dispatch(openModal(type, opts));
   },
+  onCloseModal(type) {
+    dispatch(closeModal(type));
+  },
   onCancelReplyCompose() {
+    dispatch(closeModal('COMPOSE'));
     dispatch(cancelReplyCompose());
   },
 });
@@ -42,12 +46,12 @@ class ModalRoot extends React.PureComponent {
     children: PropTypes.node,
     onClose: PropTypes.func.isRequired,
     onOpenModal: PropTypes.func.isRequired,
+    onCloseModal: PropTypes.func.isRequired,
     onCancelReplyCompose: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
     hasComposeContent: PropTypes.bool,
     type: PropTypes.string,
     onCancel: PropTypes.func,
-    noPop: PropTypes.bool,
   };
 
   state = {
@@ -64,7 +68,7 @@ class ModalRoot extends React.PureComponent {
   }
 
   handleOnClose = () => {
-    const { onOpenModal, hasComposeContent, intl, type, onCancelReplyCompose } = this.props;
+    const { onOpenModal, onCloseModal, hasComposeContent, intl, type, onCancelReplyCompose } = this.props;
 
     if (hasComposeContent && type === 'COMPOSE') {
       onOpenModal('CONFIRM', {
@@ -73,10 +77,10 @@ class ModalRoot extends React.PureComponent {
         message: <FormattedMessage id='confirmations.delete.message' defaultMessage='Are you sure you want to delete this post?' />,
         confirm: intl.formatMessage(messages.confirm),
         onConfirm: () => onCancelReplyCompose(),
-        onCancel: () => onOpenModal('COMPOSE'),
+        onCancel: () => onCloseModal('CONFIRM'),
       });
     } else if (hasComposeContent && type === 'CONFIRM') {
-      onOpenModal('COMPOSE');
+      onCloseModal('CONFIRM');
     } else {
       this.props.onClose();
     }
@@ -125,9 +129,7 @@ class ModalRoot extends React.PureComponent {
       this.activeElement = null;
       this.getSiblings().forEach(sibling => sibling.removeAttribute('inert'));
 
-      if (!this.props.noPop) {
-        this._handleModalClose();
-      }
+      this._handleModalClose(prevProps.type);
     }
 
     if (this.props.children) {
@@ -155,15 +157,17 @@ class ModalRoot extends React.PureComponent {
     });
   }
 
-  _handleModalClose() {
+  _handleModalClose(type) {
     if (this.unlistenHistory) {
       this.unlistenHistory();
     }
+    if (!['FAVOURITES', 'MENTIONS', 'REACTIONS', 'REBLOGS'].includes(type)) {
       const { state } = this.history.location;
       if (state && state.soapboxModalKey === this._modalHistoryKey) {
         this.history.goBack();
       }
     }
+  }
 
   _ensureHistoryBuffer() {
     const { pathname, state } = this.history.location;

app/soapbox/containers/dropdown_menu_container.js

@@ -6,7 +6,7 @@ import DropdownMenu from '../components/dropdown_menu';
 import { isUserTouching } from '../is_mobile';
 
 const mapStateToProps = state => ({
-  isModalOpen: state.get('modal').modalType === 'ACTIONS',
+  isModalOpen: state.get('modal').size && state.get('modal').last().modalType === 'ACTIONS',
   dropdownPlacement: state.getIn(['dropdown_menu', 'placement']),
   openDropdownId: state.getIn(['dropdown_menu', 'openId']),
   openedViaKeyboard: state.getIn(['dropdown_menu', 'keyboard']),

app/soapbox/features/compose/containers/compose_form_container.js

@@ -26,7 +26,7 @@ const mapStateToProps = state => ({
   isUploading: state.getIn(['compose', 'is_uploading']),
   showSearch: state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']),
   anyMedia: state.getIn(['compose', 'media_attachments']).size > 0,
-  isModalOpen: state.get('modal').modalType === 'COMPOSE',
+  isModalOpen: state.get('modal').size && state.get('modal').last().modalType === 'COMPOSE',
   maxTootChars: state.getIn(['instance', 'max_toot_chars']),
   scheduledAt: state.getIn(['compose', 'schedule']),
   scheduledStatusCount: state.get('scheduled_statuses').size,

app/soapbox/features/compose/containers/privacy_dropdown_container.js

@@ -6,7 +6,7 @@ import { isUserTouching } from '../../../is_mobile';
 import PrivacyDropdown from '../components/privacy_dropdown';
 
 const mapStateToProps = state => ({
-  isModalOpen: state.get('modal').modalType === 'ACTIONS',
+  isModalOpen: state.get('modal').size && state.get('modal').last().modalType === 'ACTIONS',
   value: state.getIn(['compose', 'privacy']),
 });
 

app/soapbox/features/compose/containers/reply_mentions_container.js

@@ -38,9 +38,7 @@ const makeMapStateToProps = () => {
 
 const mapDispatchToProps = dispatch => ({
   onOpenMentionsModal() {
-    dispatch(openModal('REPLY_MENTIONS', {
-      onCancel: () => dispatch(openModal('COMPOSE')),
-    }));
+    dispatch(openModal('REPLY_MENTIONS'));
   },
 });
 

app/soapbox/features/compose/containers/upload_container.js

@@ -26,7 +26,7 @@ const mapDispatchToProps = dispatch => ({
   },
 
   onOpenModal: media => {
-    dispatch(openModal('MEDIA', { media: ImmutableList.of(media), index: 0 }));
+    dispatch(openModal('MEDIA', { media: ImmutableList.of(media), index: 0, onClose: console.log }));
   },
 
   onSubmit(router) {

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

@@ -5,10 +5,10 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
+import { cancelReplyCompose } from 'soapbox/actions/compose';
+import { openModal, closeModal } from 'soapbox/actions/modal';
 import IconButton from 'soapbox/components/icon_button';
 
-import { cancelReplyCompose } from '../../../actions/compose';
-import { openModal } from '../../../actions/modal';
 import ComposeFormContainer from '../../compose/containers/compose_form_container';
 
 const messages = defineMessages({
@@ -49,8 +49,10 @@ class ComposeModal extends ImmutablePureComponent {
         heading: <FormattedMessage id='confirmations.delete.heading' defaultMessage='Delete post' />,
         message: <FormattedMessage id='confirmations.delete.message' defaultMessage='Are you sure you want to delete this post?' />,
         confirm: intl.formatMessage(messages.confirm),
-        onConfirm: () => dispatch(cancelReplyCompose()),
-        onCancel: () => dispatch(openModal('COMPOSE')),
+        onConfirm: () => {
+          dispatch(closeModal('COMPOSE'));
+          dispatch(cancelReplyCompose());
+        },
       }));
     } else {
       onClose('COMPOSE');

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

@@ -33,18 +33,18 @@ class ConfirmationModal extends React.PureComponent {
   }
 
   handleClick = () => {
-    this.props.onClose();
+    this.props.onClose('CONFIRM');
     this.props.onConfirm();
   }
 
   handleSecondary = () => {
-    this.props.onClose();
+    this.props.onClose('CONFIRM');
     this.props.onSecondary();
   }
 
   handleCancel = () => {
     const { onClose, onCancel } = this.props;
-    onClose();
+    onClose('CONFIRM');
     if (onCancel) onCancel();
   }
 

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

@@ -24,10 +24,6 @@ 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,
@@ -45,21 +41,10 @@ class FavouritesModal extends React.PureComponent {
 
   componentDidMount() {
     this.fetchData();
-    this.unlistenHistory = this.context.router.history.listen((_, action) => {
-      if (action === 'PUSH') {
-        this.onClickClose(null, true);
-      }
-    });
   }
 
-  componentWillUnmount() {
-    if (this.unlistenHistory) {
-      this.unlistenHistory();
-    }
-  }
-
-  onClickClose = (_, noPop) => {
-    this.props.onClose('FAVOURITES', noPop);
+  onClickClose = () => {
+    this.props.onClose('FAVOURITES');
   };
 
   render() {

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

@@ -32,10 +32,6 @@ 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,
@@ -53,21 +49,10 @@ class MentionsModal extends React.PureComponent {
 
   componentDidMount() {
     this.fetchData();
-    this.unlistenHistory = this.context.router.history.listen((_, action) => {
-      if (action === 'PUSH') {
-        this.onClickClose(null, true);
-      }
-    });
   }
 
-  componentWillUnmount() {
-    if (this.unlistenHistory) {
-      this.unlistenHistory();
-    }
-  }
-
-  onClickClose = (_, noPop) => {
-    this.props.onClose('MENTIONS', noPop);
+  onClickClose = () => {
+    this.props.onClose('MENTIONS');
   };
 
   render() {

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

@@ -64,7 +64,6 @@ export default class ModalRoot extends React.PureComponent {
   static propTypes = {
     type: PropTypes.string,
     props: PropTypes.object,
-    noPop: PropTypes.bool,
     onClose: PropTypes.func.isRequired,
   };
 
@@ -88,17 +87,17 @@ export default class ModalRoot extends React.PureComponent {
     return <BundleModalError {...props} onClose={this.onClickClose} />;
   }
 
-  onClickClose = (_, noPop) => {
+  onClickClose = (_) => {
     const { onClose, type } = this.props;
-    onClose(type, noPop);
+    onClose(type);
   }
 
   render() {
-    const { type, props, noPop } = this.props;
+    const { type, props } = this.props;
     const visible = !!type;
 
     return (
-      <Base onClose={this.onClickClose} type={type} noPop={noPop}>
+      <Base onClose={this.onClickClose} type={type}>
         {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

@@ -32,10 +32,6 @@ 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,
@@ -59,21 +55,10 @@ class ReactionsModal extends React.PureComponent {
 
   componentDidMount() {
     this.fetchData();
-    this.unlistenHistory = this.context.router.history.listen((_, action) => {
-      if (action === 'PUSH') {
-        this.onClickClose(null, true);
-      }
-    });
   }
 
-  componentWillUnmount() {
-    if (this.unlistenHistory) {
-      this.unlistenHistory();
-    }
-  }
-
-  onClickClose = (_, noPop) => {
-    this.props.onClose('REACTIONS', noPop);
+  onClickClose = () => {
+    this.props.onClose('REACTIONS');
   };
 
   handleFilterChange = (reaction) => () => {

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

@@ -60,8 +60,8 @@ class ReblogsModal extends React.PureComponent {
     }
   }
 
-  onClickClose = (_, noPop) => {
-    this.props.onClose('REBLOGS', noPop);
+  onClickClose = () => {
+    this.props.onClose('REBLOGS');
   };
 
   render() {

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

@@ -36,27 +36,25 @@ const makeMapStateToProps = () => {
     return {
       mentions,
       author: status.getIn(['account', 'id']),
-      to: state.getIn(['compose', 'to']),
+      // to: state.getIn(['compose', 'to']),
       isReply: true,
     };
   };
 };
 
-class ComposeModal extends ImmutablePureComponent {
+class ReplyMentionsModal extends ImmutablePureComponent {
 
   static propTypes = {
-    account: ImmutablePropTypes.map,
+    mentions: ImmutablePropTypes.OrderedSet,
     author: PropTypes.string,
     intl: PropTypes.object.isRequired,
     onClose: PropTypes.func.isRequired,
-    inReplyTo: PropTypes.string,
     dispatch: PropTypes.func.isRequired,
   };
 
   onClickClose = () => {
-    const { onClose, onCancel } = this.props;
-    onClose('COMPOSE');
-    if (onCancel) onCancel();
+    const { onClose } = this.props;
+    onClose('REPLY_MENTIONS');
   };
 
   render() {
@@ -85,4 +83,4 @@ class ComposeModal extends ImmutablePureComponent {
 
 }
 
-export default injectIntl(connect(makeMapStateToProps)(ComposeModal));
+export default injectIntl(connect(makeMapStateToProps)(ReplyMentionsModal));

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

@@ -4,19 +4,25 @@ import { cancelReplyCompose } from '../../../actions/compose';
 import { closeModal } from '../../../actions/modal';
 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 mapStateToProps = state => {
+  const modal = state.get('modal').last({
+    modalType: null,
+    modalProps: {},
   });
 
+  return {
+    type: modal.modalType,
+    props: modal.modalProps,
+  };
+};
+
 const mapDispatchToProps = (dispatch) => ({
-  onClose(optionalType, noPop) {
-    if (optionalType === 'COMPOSE') {
+  onClose(type) {
+    if (type === 'COMPOSE') {
       dispatch(cancelReplyCompose());
     }
 
-    dispatch(closeModal(undefined, noPop));
+    dispatch(closeModal(type));
   },
 });
 

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

@@ -1,46 +1,57 @@
+import { List as ImmutableList } from 'immutable';
+
 import { MODAL_OPEN, MODAL_CLOSE } from 'soapbox/actions/modal';
 
 import reducer from '../modal';
 
 describe('modal reducer', () => {
   it('should return the initial state', () => {
-    expect(reducer(undefined, {})).toEqual({
-      modalType: null,
-      modalProps: {},
-      noPop: false,
-    });
+    expect(reducer(undefined, {})).toEqual(ImmutableList());
   });
 
   it('should handle MODAL_OPEN', () => {
-    const state = {
-      modalType: null,
-      modalProps: {},
-      noPop: false,
-    };
+    const state = ImmutableList();
     const action = {
       type: MODAL_OPEN,
       modalType: 'type1',
       modalProps: { props1: '1' },
     };
-    expect(reducer(state, action)).toMatchObject({
+    expect(reducer(state, action)).toMatchObject(ImmutableList([{
       modalType: 'type1',
       modalProps: { props1: '1' },
-    });
+    }]));
   });
 
   it('should handle MODAL_CLOSE', () => {
-    const state = {
+    const state = ImmutableList([{
       modalType: 'type1',
       modalProps: { props1: '1' },
-    };
+    }]);
     const action = {
       type: MODAL_CLOSE,
     };
-    expect(reducer(state, action)).toMatchObject({
-      modalType: null,
-      modalProps: {},
-      noPop: false,
+    expect(reducer(state, action)).toMatchObject(ImmutableList());
   });
+
+  it('should handle MODAL_CLOSE with specified modalType', () => {
+    const state = ImmutableList([
+      {
+        modalType: 'type1',
+      },
+      {
+        modalType: 'type2',
+      },
+      {
+        modalType: 'type1',
+      },
+    ]);
+    const action = {
+      type: MODAL_CLOSE,
+      modalType: 'type2',
+    };
+    expect(reducer(state, action)).toMatchObject(ImmutableList([{
+      modalType: 'type1',
+    }]));
   });
 
 });

app/soapbox/reducers/modal.js

@@ -1,22 +1,24 @@
+import { List as ImmutableList } from 'immutable';
+
 import { MODAL_OPEN, MODAL_CLOSE } from '../actions/modal';
 
-const initialState = {
-  modalType: null,
-  modalProps: {},
-  noPop: false,
-};
+const initialState = ImmutableList();
 
 export default function modal(state = initialState, action) {
   switch(action.type) {
   case MODAL_OPEN:
-    return { modalType: action.modalType, modalProps: action.modalProps };
+    return state.push({ modalType: action.modalType, modalProps: action.modalProps });
   case MODAL_CLOSE:
-    return {
-      ...(action.modalType === undefined || action.modalType === state.modalType)
-        ? initialState
-        : state,
-      noPop: !!action.noPop,
-    };
+    if (state.size === 0) {
+      return state;
+    }
+    if (action.modalType === undefined) {
+      return state.pop();
+    }
+    if (state.some(({ modalType }) => action.modalType === modalType)) {
+      return state.slice(0, state.findLastIndex(({ modalType }) => action.modalType === modalType));
+    }
+    return state;
   default:
     return state;
   }