Merge branch 'modals-stack' into 'develop'

Allow stacking modals

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

app/soapbox/actions/compose.js

@@ -15,7 +15,7 @@ import { showAlert, showAlertForError } from './alerts';
 import { useEmoji } from './emojis';
 import { importFetchedAccounts } from './importer';
 import { uploadMedia, fetchMedia, updateMedia } from './media';
-import { openModal, closeModal } from './modal';
+import { openModal, closeModal } from './modals';
 import { getSettings } from './settings';
 import { createStatus } from './statuses';
 

app/soapbox/actions/modals.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/actions/moderation.js

@@ -3,7 +3,7 @@ import { defineMessages } from 'react-intl';
 
 import { fetchAccountByUsername } from 'soapbox/actions/accounts';
 import { deactivateUsers, deleteUsers, deleteStatus, toggleStatusSensitivity } from 'soapbox/actions/admin';
-import { openModal } from 'soapbox/actions/modal';
+import { openModal } from 'soapbox/actions/modals';
 import snackbar from 'soapbox/actions/snackbar';
 import AccountContainer from 'soapbox/containers/account_container';
 import { isLocal } from 'soapbox/utils/accounts';

app/soapbox/actions/mutes.js

@@ -5,7 +5,7 @@ import api, { getLinks } from '../api';
 
 import { fetchRelationships } from './accounts';
 import { importFetchedAccounts } from './importer';
-import { openModal } from './modal';
+import { openModal } from './modals';
 
 export const MUTES_FETCH_REQUEST = 'MUTES_FETCH_REQUEST';
 export const MUTES_FETCH_SUCCESS = 'MUTES_FETCH_SUCCESS';

app/soapbox/actions/reports.js

@@ -1,6 +1,6 @@
 import api from '../api';
 
-import { openModal, closeModal } from './modal';
+import { openModal, closeModal } from './modals';
 
 export const REPORT_INIT   = 'REPORT_INIT';
 export const REPORT_CANCEL = 'REPORT_CANCEL';

app/soapbox/actions/statuses.js

@@ -5,7 +5,7 @@ import { shouldHaveCard } from 'soapbox/utils/status';
 import api from '../api';
 
 import { importFetchedStatus, importFetchedStatuses } from './importer';
-import { openModal } from './modal';
+import { openModal } from './modals';
 import { deleteFromTimelines } from './timelines';
 
 export const STATUS_CREATE_REQUEST = 'STATUS_CREATE_REQUEST';

app/soapbox/components/attachment_thumbs.js

@@ -4,7 +4,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { openModal } from 'soapbox/actions/modal';
+import { openModal } from 'soapbox/actions/modals';
 import Bundle from 'soapbox/features/ui/components/bundle';
 import { MediaGallery } from 'soapbox/features/ui/util/async-components';
 

app/soapbox/components/birthday_input.js

@@ -28,7 +28,7 @@ const mapStateToProps = state => {
 
 export default @connect(mapStateToProps)
 @injectIntl
-class EditProfile extends ImmutablePureComponent {
+class BirthdayInput extends ImmutablePureComponent {
 
   static propTypes = {
     hint: PropTypes.node,

app/soapbox/components/birthday_reminders.js

@@ -9,7 +9,7 @@ import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 
 import { fetchBirthdayReminders } from 'soapbox/actions/accounts';
-import { openModal } from 'soapbox/actions/modal';
+import { openModal } from 'soapbox/actions/modals';
 import Icon from 'soapbox/components/icon';
 import { makeGetAccount } from 'soapbox/selectors';
 

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/modals';
 
 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(prevProps.type);
-        this._handleModalClose();
-      }
     }
 
     if (this.props.children) {
@@ -155,13 +157,15 @@ class ModalRoot extends React.PureComponent {
     });
   }
 
-  _handleModalClose() {
+  _handleModalClose(type) {
     if (this.unlistenHistory) {
       this.unlistenHistory();
     }
-    const { state } = this.history.location;
+    if (!['FAVOURITES', 'MENTIONS', 'REACTIONS', 'REBLOGS'].includes(type)) {
-    if (state && state.soapboxModalKey === this._modalHistoryKey) {
+      const { state } = this.history.location;
-      this.history.goBack();
+      if (state && state.soapboxModalKey === this._modalHistoryKey) {
+        this.history.goBack();
+      }
     }
   }
 

app/soapbox/components/poll.js

@@ -7,7 +7,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import spring from 'react-motion/lib/spring';
 
-import { openModal } from 'soapbox/actions/modal';
+import { openModal } from 'soapbox/actions/modals';
 import { vote, fetchPoll } from 'soapbox/actions/polls';
 import Icon from 'soapbox/components/icon';
 import emojify from 'soapbox/features/emoji/emoji';

app/soapbox/components/status_action_bar.js

@@ -15,7 +15,7 @@ import { getReactForStatus, reduceEmoji } from 'soapbox/utils/emoji_reacts';
 import { getFeatures } from 'soapbox/utils/features';
 import SoapboxPropTypes from 'soapbox/utils/soapbox_prop_types';
 
-import { openModal } from '../actions/modal';
+import { openModal } from '../actions/modals';
 import DropdownMenuContainer from '../containers/dropdown_menu_container';
 
 import IconButton from './icon_button';

app/soapbox/components/status_reply_mentions.js

@@ -6,7 +6,7 @@ import { FormattedMessage, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 
-import { openModal } from 'soapbox/actions/modal';
+import { openModal } from 'soapbox/actions/modals';
 import HoverRefWrapper from 'soapbox/components/hover_ref_wrapper';
 
 const mapDispatchToProps = (dispatch) => ({

app/soapbox/components/sub_navigation.js

@@ -5,7 +5,7 @@ import React from 'react';
 import { injectIntl, defineMessages } from 'react-intl';
 import { connect } from 'react-redux';
 
-import { openModal } from 'soapbox/actions/modal';
+import { openModal } from 'soapbox/actions/modals';
 import Helmet from 'soapbox/components/helmet';
 import Icon from 'soapbox/components/icon';
 import IconButton from 'soapbox/components/icon_button';

app/soapbox/containers/account_container.js

@@ -10,7 +10,7 @@ import {
   muteAccount,
   unmuteAccount,
 } from '../actions/accounts';
-import { openModal } from '../actions/modal';
+import { openModal } from '../actions/modals';
 import { initMuteModal } from '../actions/mutes';
 import { getSettings } from '../actions/settings';
 import Account from '../components/account';

app/soapbox/containers/domain_container.js

@@ -3,7 +3,7 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
 import { blockDomain, unblockDomain } from '../actions/domain_blocks';
-import { openModal } from '../actions/modal';
+import { openModal } from '../actions/modals';
 import Domain from '../components/domain';
 
 const messages = defineMessages({

app/soapbox/containers/dropdown_menu_container.js

@@ -1,12 +1,12 @@
 import { connect } from 'react-redux';
 
 import { openDropdownMenu, closeDropdownMenu } from '../actions/dropdown_menu';
-import { openModal, closeModal } from '../actions/modal';
+import { openModal, closeModal } from '../actions/modals';
 import DropdownMenu from '../components/dropdown_menu';
 import { isUserTouching } from '../is_mobile';
 
 const mapStateToProps = state => ({
-  isModalOpen: state.get('modal').modalType === 'ACTIONS',
+  isModalOpen: state.get('modals').size && state.get('modals').last().modalType === 'ACTIONS',
   dropdownPlacement: state.getIn(['dropdown_menu', 'placement']),
   openDropdownId: state.getIn(['dropdown_menu', 'openId']),
   openedViaKeyboard: state.getIn(['dropdown_menu', 'keyboard']),

app/soapbox/containers/status_container.js

@@ -28,7 +28,7 @@ import {
   pin,
   unpin,
 } from '../actions/interactions';
-import { openModal } from '../actions/modal';
+import { openModal } from '../actions/modals';
 import { initMuteModal } from '../actions/mutes';
 import { initReport } from '../actions/reports';
 import { getSettings } from '../actions/settings';

app/soapbox/features/account/components/header.js

@@ -11,7 +11,7 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 import { NavLink } from 'react-router-dom';
 
-import { openModal } from 'soapbox/actions/modal';
+import { openModal } from 'soapbox/actions/modals';
 import Avatar from 'soapbox/components/avatar';
 import Badge from 'soapbox/components/badge';
 import Icon from 'soapbox/components/icon';

app/soapbox/features/account_gallery/index.js

@@ -10,7 +10,7 @@ import {
   fetchAccount,
   fetchAccountByUsername,
 } from 'soapbox/actions/accounts';
-import { openModal } from 'soapbox/actions/modal';
+import { openModal } from 'soapbox/actions/modals';
 import Column from 'soapbox/components/column';
 import LoadMore from 'soapbox/components/load_more';
 import LoadingIndicator from 'soapbox/components/loading_indicator';

app/soapbox/features/account_timeline/containers/header_container.js

@@ -34,7 +34,7 @@ import {
   directCompose,
 } from '../../../actions/compose';
 import { blockDomain, unblockDomain } from '../../../actions/domain_blocks';
-import { openModal } from '../../../actions/modal';
+import { openModal } from '../../../actions/modals';
 import { initMuteModal } from '../../../actions/mutes';
 import { initReport } from '../../../actions/reports';
 import { makeGetAccount } from '../../../selectors';

app/soapbox/features/admin/components/report_status.js

@@ -5,7 +5,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { injectIntl, defineMessages } from 'react-intl';
 import { connect } from 'react-redux';
 
-import { openModal } from 'soapbox/actions/modal';
+import { openModal } from 'soapbox/actions/modals';
 import { deleteStatusModal } from 'soapbox/actions/moderation';
 import StatusContent from 'soapbox/components/status_content';
 import DropdownMenu from 'soapbox/containers/dropdown_menu_container';

app/soapbox/features/auth_login/components/registration_form.js

@@ -12,7 +12,7 @@ import { v4 as uuidv4 } from 'uuid';
 
 import { accountLookup } from 'soapbox/actions/accounts';
 import { register, verifyCredentials } from 'soapbox/actions/auth';
-import { openModal } from 'soapbox/actions/modal';
+import { openModal } from 'soapbox/actions/modals';
 import { getSettings } from 'soapbox/actions/settings';
 import BirthdayInput from 'soapbox/components/birthday_input';
 import ShowablePassword from 'soapbox/components/showable_password';

app/soapbox/features/chats/components/chat_message_list.js

@@ -10,7 +10,7 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 
 import { fetchChatMessages, deleteChatMessage } from 'soapbox/actions/chats';
-import { openModal } from 'soapbox/actions/modal';
+import { openModal } from 'soapbox/actions/modals';
 import { initReportById } from 'soapbox/actions/reports';
 import DropdownMenuContainer from 'soapbox/containers/dropdown_menu_container';
 import emojify from 'soapbox/features/emoji/emoji';

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('modals').size && state.get('modals').last().modalType === 'COMPOSE',
   maxTootChars: state.getIn(['instance', 'configuration', 'statuses', 'max_characters']),
   scheduledAt: state.getIn(['compose', 'schedule']),
   scheduledStatusCount: state.get('scheduled_statuses').size,

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

@@ -1,12 +1,12 @@
 import { connect } from 'react-redux';
 
 import { changeComposeVisibility } from '../../../actions/compose';
-import { openModal, closeModal } from '../../../actions/modal';
+import { openModal, closeModal } from '../../../actions/modals';
 import { isUserTouching } from '../../../is_mobile';
 import PrivacyDropdown from '../components/privacy_dropdown';
 
 const mapStateToProps = state => ({
-  isModalOpen: state.get('modal').modalType === 'ACTIONS',
+  isModalOpen: state.get('modals').size && state.get('modals').last().modalType === 'ACTIONS',
   value: state.getIn(['compose', 'privacy']),
 });
 
@@ -19,8 +19,7 @@ const mapDispatchToProps = dispatch => ({
   isUserTouching,
   onModalOpen: props => dispatch(openModal('ACTIONS', props)),
   onModalClose: () => {
-    dispatch(closeModal());
+    dispatch(closeModal('ACTIONS'));
-    dispatch(openModal('COMPOSE'));
   },
 
 });

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

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 
-import { openModal } from 'soapbox/actions/modal';
+import { openModal } from 'soapbox/actions/modals';
 import { makeGetStatus } from 'soapbox/selectors';
 import { getFeatures } from 'soapbox/utils/features';
 
@@ -38,9 +38,7 @@ const makeMapStateToProps = () => {
 
 const mapDispatchToProps = dispatch => ({
   onOpenMentionsModal() {
-    dispatch(openModal('REPLY_MENTIONS', {
+    dispatch(openModal('REPLY_MENTIONS'));
-      onCancel: () => dispatch(openModal('COMPOSE')),
-    }));
   },
 });
 

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

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 
 import { undoUploadCompose, changeUploadCompose } from '../../../actions/compose';
 import { submitCompose } from '../../../actions/compose';
-import { openModal } from '../../../actions/modal';
+import { openModal } from '../../../actions/modals';
 import Upload from '../components/upload';
 
 const mapStateToProps = (state, { id }) => ({
@@ -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/crypto_donate/components/crypto_address.js

@@ -3,7 +3,7 @@ import React from 'react';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
-import { openModal } from 'soapbox/actions/modal';
+import { openModal } from 'soapbox/actions/modals';
 import Icon from 'soapbox/components/icon';
 import { CopyableInput } from 'soapbox/features/forms';
 

app/soapbox/features/list_timeline/index.js

@@ -8,7 +8,7 @@ import Button from 'soapbox/components/button';
 import Column from 'soapbox/features/ui/components/column';
 
 import { fetchList, deleteList } from '../../actions/lists';
-import { openModal } from '../../actions/modal';
+import { openModal } from '../../actions/modals';
 import { connectListStream } from '../../actions/streaming';
 import { expandListTimeline } from '../../actions/timelines';
 import LoadingIndicator from '../../components/loading_indicator';

app/soapbox/features/new_status/index.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { Redirect } from 'react-router-dom';
 
-import { openModal } from '../../actions/modal';
+import { openModal } from '../../actions/modals';
 
 const mapDispatchToProps = dispatch => ({
 

app/soapbox/features/notifications/containers/column_settings_container.js

@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 
 import { getFeatures } from 'soapbox/utils/features';
 
-import { openModal } from '../../../actions/modal';
+import { openModal } from '../../../actions/modals';
 import { setFilter } from '../../../actions/notifications';
 import { clearNotifications } from '../../../actions/notifications';
 import { changeAlerts as changePushNotifications } from '../../../actions/push_notifications';

app/soapbox/features/notifications/containers/notification_container.js

@@ -9,7 +9,7 @@ import {
   unreblog,
   unfavourite,
 } from '../../../actions/interactions';
-import { openModal } from '../../../actions/modal';
+import { openModal } from '../../../actions/modals';
 import {
   hideStatus,
   revealStatus,

app/soapbox/features/scheduled_statuses/components/scheduled_status_action_bar.js

@@ -5,7 +5,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { defineMessages, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 
-import { openModal } from 'soapbox/actions/modal';
+import { openModal } from 'soapbox/actions/modals';
 import { cancelScheduledStatus } from 'soapbox/actions/scheduled_statuses';
 import { getSettings } from 'soapbox/actions/settings';
 import IconButton from 'soapbox/components/icon_button';

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

@@ -11,7 +11,7 @@ import { getReactForStatus } from 'soapbox/utils/emoji_reacts';
 import { getFeatures } from 'soapbox/utils/features';
 import SoapboxPropTypes from 'soapbox/utils/soapbox_prop_types';
 
-import { openModal } from '../../../actions/modal';
+import { openModal } from '../../../actions/modals';
 import IconButton from '../../../components/icon_button';
 import DropdownMenuContainer from '../../../containers/dropdown_menu_container';
 

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

@@ -5,7 +5,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { FormattedNumber } from 'react-intl';
 import { connect } from 'react-redux';
 
-import { openModal } from 'soapbox/actions/modal';
+import { openModal } from 'soapbox/actions/modals';
 import { getSoapboxConfig } from 'soapbox/actions/soapbox';
 import Icon from 'soapbox/components/icon';
 import emojify from 'soapbox/features/emoji/emoji';

app/soapbox/features/status/containers/detailed_status_container.js

@@ -23,7 +23,7 @@ import {
   pin,
   unpin,
 } from '../../../actions/interactions';
-import { openModal } from '../../../actions/modal';
+import { openModal } from '../../../actions/modals';
 import { initMuteModal } from '../../../actions/mutes';
 import { initReport } from '../../../actions/reports';
 import {

app/soapbox/features/status/index.js

@@ -41,7 +41,7 @@ import {
   pin,
   unpin,
 } from '../../actions/interactions';
-import { openModal } from '../../actions/modal';
+import { openModal } from '../../actions/modals';
 import { initMuteModal } from '../../actions/mutes';
 import { initReport } from '../../actions/reports';
 import {

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

@@ -12,7 +12,7 @@ import {
   blockAccount,
   unblockAccount,
 } from 'soapbox/actions/accounts';
-import { openModal } from 'soapbox/actions/modal';
+import { openModal } from 'soapbox/actions/modals';
 import Button from 'soapbox/components/button';
 import Icon from 'soapbox/components/icon';
 import { getFeatures } from 'soapbox/utils/features';

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/modals';
 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()),
+        onConfirm: () => {
-        onCancel: () => dispatch(openModal('COMPOSE')),
+          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() {
+  onClickClose = () => {
-    if (this.unlistenHistory) {
+    this.props.onClose('FAVOURITES');
-      this.unlistenHistory();
-    }
-  }
-
-  onClickClose = (_, noPop) => {
-    this.props.onClose('FAVOURITES', noPop);
   };
 
   render() {

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

@@ -7,7 +7,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
-import { openModal } from 'soapbox/actions/modal';
+import { openModal } from 'soapbox/actions/modals';
 import DropdownMenu from 'soapbox/containers/dropdown_menu_container';
 import InstanceRestrictions from 'soapbox/features/federation_restrictions/components/instance_restrictions';
 import { makeGetRemoteInstance } from 'soapbox/selectors';

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

@@ -10,7 +10,7 @@ import { getBaseURL, isAdmin } from 'soapbox/utils/accounts';
 import sourceCode from 'soapbox/utils/code';
 import { getFeatures } from 'soapbox/utils/features';
 
-import { openModal } from '../../../actions/modal';
+import { openModal } from '../../../actions/modals';
 
 const mapStateToProps = state => {
   const me = state.get('me');

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() {
+  onClickClose = () => {
-    if (this.unlistenHistory) {
+    this.props.onClose('MENTIONS');
-      this.unlistenHistory();
-    }
-  }
-
-  onClickClose = (_, noPop) => {
-    this.props.onClose('MENTIONS', noPop);
   };
 
   render() {

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

@@ -66,7 +66,6 @@ export default class ModalRoot extends React.PureComponent {
   static propTypes = {
     type: PropTypes.string,
     props: PropTypes.object,
-    noPop: PropTypes.bool,
     onClose: PropTypes.func.isRequired,
   };
 
@@ -90,17 +89,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/mute_modal.js

@@ -5,7 +5,7 @@ import { connect } from 'react-redux';
 import Toggle from 'react-toggle';
 
 import { muteAccount } from 'soapbox/actions/accounts';
-import { closeModal } from 'soapbox/actions/modal';
+import { closeModal } from 'soapbox/actions/modals';
 import { toggleHideNotifications } from 'soapbox/actions/mutes';
 import Button from 'soapbox/components/button';
 import Icon from 'soapbox/components/icon';

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

@@ -5,7 +5,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 
-import { openModal } from 'soapbox/actions/modal';
+import { openModal } from 'soapbox/actions/modals';
 import Icon from 'soapbox/components/icon';
 import LoadingIndicator from 'soapbox/components/loading_indicator';
 import { getAccountGallery } from 'soapbox/selectors';

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() {
+  onClickClose = () => {
-    if (this.unlistenHistory) {
+    this.props.onClose('REACTIONS');
-      this.unlistenHistory();
-    }
-  }
-
-  onClickClose = (_, noPop) => {
-    this.props.onClose('REACTIONS', noPop);
   };
 
   handleFilterChange = (reaction) => () => {

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

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

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

@@ -36,27 +36,24 @@ const makeMapStateToProps = () => {
     return {
       mentions,
       author: status.getIn(['account', 'id']),
-      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;
+    const { onClose } = this.props;
-    onClose('COMPOSE');
+    onClose('REPLY_MENTIONS');
-    if (onCancel) onCancel();
   };
 
   render() {
@@ -85,4 +82,4 @@ class ComposeModal extends ImmutablePureComponent {
 
 }
 
-export default injectIntl(connect(makeMapStateToProps)(ComposeModal));
+export default injectIntl(connect(makeMapStateToProps)(ReplyMentionsModal));

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

@@ -14,7 +14,7 @@ import SearchContainer from 'soapbox/features/compose/containers/search_containe
 import { isStaff } from 'soapbox/utils/accounts';
 import { getFeatures } from 'soapbox/utils/features';
 
-import { openModal } from '../../../actions/modal';
+import { openModal } from '../../../actions/modals';
 import { openSidebar } from '../../../actions/sidebar';
 import Avatar from '../../../components/avatar';
 import ThemeToggle from '../../ui/components/theme_toggle_container';

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

@@ -1,22 +1,28 @@
 import { connect } from 'react-redux';
 
 import { cancelReplyCompose } from '../../../actions/compose';
-import { closeModal } from '../../../actions/modal';
+import { closeModal } from '../../../actions/modals';
 import ModalRoot from '../components/modal_root';
 
-const mapStateToProps = state => ({
+const mapStateToProps = state => {
-  type: state.get('modal').modalType,
+  const modal = state.get('modals').last({
-  props: state.get('modal').modalProps,
+    modalType: null,
-  noPop: state.get('modal').noPop,
+    modalProps: {},
-});
+  });
+
+  return {
+    type: modal.modalType,
+    props: modal.modalProps,
+  };
+};
 
 const mapDispatchToProps = (dispatch) => ({
-  onClose(optionalType, noPop) {
+  onClose(type) {
-    if (optionalType === 'COMPOSE') {
+    if (type === 'COMPOSE') {
       dispatch(cancelReplyCompose());
     }
 
-    dispatch(closeModal(undefined, noPop));
+    dispatch(closeModal(type));
   },
 });
 

app/soapbox/features/ui/index.js

@@ -38,7 +38,7 @@ import { fetchReports, fetchUsers, fetchConfig } from '../../actions/admin';
 import { uploadCompose, resetCompose } from '../../actions/compose';
 import { fetchFilters } from '../../actions/filters';
 import { clearHeight } from '../../actions/height_cache';
-import { openModal } from '../../actions/modal';
+import { openModal } from '../../actions/modals';
 import { expandNotifications } from '../../actions/notifications';
 import { fetchScheduledStatuses } from '../../actions/scheduled_statuses';
 import { connectUserStream } from '../../actions/streaming';

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

@@ -1,46 +0,0 @@
-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,
-    });
-  });
-
-  it('should handle MODAL_OPEN', () => {
-    const state = {
-      modalType: null,
-      modalProps: {},
-      noPop: false,
-    };
-    const action = {
-      type: MODAL_OPEN,
-      modalType: 'type1',
-      modalProps: { props1: '1' },
-    };
-    expect(reducer(state, action)).toMatchObject({
-      modalType: 'type1',
-      modalProps: { props1: '1' },
-    });
-  });
-
-  it('should handle MODAL_CLOSE', () => {
-    const state = {
-      modalType: 'type1',
-      modalProps: { props1: '1' },
-    };
-    const action = {
-      type: MODAL_CLOSE,
-    };
-    expect(reducer(state, action)).toMatchObject({
-      modalType: null,
-      modalProps: {},
-      noPop: false,
-    });
-  });
-
-});

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

@@ -0,0 +1,57 @@
+import { List as ImmutableList } from 'immutable';
+
+import { MODAL_OPEN, MODAL_CLOSE } from 'soapbox/actions/modals';
+
+import reducer from '../modals';
+
+describe('modal reducer', () => {
+  it('should return the initial state', () => {
+    expect(reducer(undefined, {})).toEqual(ImmutableList());
+  });
+
+  it('should handle MODAL_OPEN', () => {
+    const state = ImmutableList();
+    const action = {
+      type: MODAL_OPEN,
+      modalType: 'type1',
+      modalProps: { props1: '1' },
+    };
+    expect(reducer(state, action)).toMatchObject(ImmutableList([{
+      modalType: 'type1',
+      modalProps: { props1: '1' },
+    }]));
+  });
+
+  it('should handle MODAL_CLOSE', () => {
+    const state = ImmutableList([{
+      modalType: 'type1',
+      modalProps: { props1: '1' },
+    }]);
+    const action = {
+      type: MODAL_CLOSE,
+    };
+    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/index.js

@@ -34,7 +34,7 @@ import listEditor from './list_editor';
 import lists from './lists';
 import me from './me';
 import meta from './meta';
-import modal from './modal';
+import modals from './modals';
 import mutes from './mutes';
 import notifications from './notifications';
 import patron from './patron';
@@ -62,7 +62,7 @@ const appReducer = combineReducers({
   timelines,
   meta,
   alerts,
-  modal,
+  modals,
   user_lists,
   domain_lists,
   status_lists,

app/soapbox/reducers/modal.js

@@ -1,23 +0,0 @@
-import { MODAL_OPEN, MODAL_CLOSE } from '../actions/modal';
-
-const initialState = {
-  modalType: null,
-  modalProps: {},
-  noPop: false,
-};
-
-export default function modal(state = initialState, action) {
-  switch(action.type) {
-  case MODAL_OPEN:
-    return { modalType: action.modalType, modalProps: action.modalProps };
-  case MODAL_CLOSE:
-    return {
-      ...(action.modalType === undefined || action.modalType === state.modalType)
-        ? initialState
-        : state,
-      noPop: !!action.noPop,
-    };
-  default:
-    return state;
-  }
-}

app/soapbox/reducers/modals.js

@@ -0,0 +1,25 @@
+import { List as ImmutableList } from 'immutable';
+
+import { MODAL_OPEN, MODAL_CLOSE } from '../actions/modals';
+
+const initialState = ImmutableList();
+
+export default function modal(state = initialState, action) {
+  switch(action.type) {
+  case MODAL_OPEN:
+    return state.push({ modalType: action.modalType, modalProps: action.modalProps });
+  case MODAL_CLOSE:
+    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;
+  }
+}