diff --git a/app/soapbox/actions/compose.js b/app/soapbox/actions/compose.js index 03139a465..04b1c3cd7 100644 --- a/app/soapbox/actions/compose.js +++ b/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'; diff --git a/app/soapbox/actions/modal.js b/app/soapbox/actions/modals.js similarity index 83% rename from app/soapbox/actions/modal.js rename to app/soapbox/actions/modals.js index 8c0eed922..72604ecc6 100644 --- a/app/soapbox/actions/modal.js +++ b/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, }; } diff --git a/app/soapbox/actions/moderation.js b/app/soapbox/actions/moderation.js index 7bad7e82d..d84242d66 100644 --- a/app/soapbox/actions/moderation.js +++ b/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'; diff --git a/app/soapbox/actions/mutes.js b/app/soapbox/actions/mutes.js index f7c2b6a11..f204ea9b8 100644 --- a/app/soapbox/actions/mutes.js +++ b/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'; diff --git a/app/soapbox/actions/reports.js b/app/soapbox/actions/reports.js index 2db3bce31..8b7c55644 100644 --- a/app/soapbox/actions/reports.js +++ b/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'; diff --git a/app/soapbox/actions/statuses.js b/app/soapbox/actions/statuses.js index 12dfaa576..ba53994b5 100644 --- a/app/soapbox/actions/statuses.js +++ b/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'; diff --git a/app/soapbox/components/attachment_thumbs.js b/app/soapbox/components/attachment_thumbs.js index 61a1ad69f..2e7b6e117 100644 --- a/app/soapbox/components/attachment_thumbs.js +++ b/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'; diff --git a/app/soapbox/components/birthday_input.js b/app/soapbox/components/birthday_input.js index 12f42bb59..26131370b 100644 --- a/app/soapbox/components/birthday_input.js +++ b/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, diff --git a/app/soapbox/components/birthday_reminders.js b/app/soapbox/components/birthday_reminders.js index 9a14f1f55..b93c30ed5 100644 --- a/app/soapbox/components/birthday_reminders.js +++ b/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'; diff --git a/app/soapbox/components/modal_root.js b/app/soapbox/components/modal_root.js index 3b622e3e0..9cda3b890 100644 --- a/app/soapbox/components/modal_root.js +++ b/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: , 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,13 +157,15 @@ class ModalRoot extends React.PureComponent { }); } - _handleModalClose() { + _handleModalClose(type) { if (this.unlistenHistory) { this.unlistenHistory(); } - const { state } = this.history.location; - if (state && state.soapboxModalKey === this._modalHistoryKey) { - this.history.goBack(); + if (!['FAVOURITES', 'MENTIONS', 'REACTIONS', 'REBLOGS'].includes(type)) { + const { state } = this.history.location; + if (state && state.soapboxModalKey === this._modalHistoryKey) { + this.history.goBack(); + } } } diff --git a/app/soapbox/components/poll.js b/app/soapbox/components/poll.js index 041585d8a..d3ed22942 100644 --- a/app/soapbox/components/poll.js +++ b/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'; diff --git a/app/soapbox/components/status_action_bar.js b/app/soapbox/components/status_action_bar.js index 79018e680..1780f6575 100644 --- a/app/soapbox/components/status_action_bar.js +++ b/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'; diff --git a/app/soapbox/components/status_reply_mentions.js b/app/soapbox/components/status_reply_mentions.js index 34413dceb..11664bb31 100644 --- a/app/soapbox/components/status_reply_mentions.js +++ b/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) => ({ diff --git a/app/soapbox/components/sub_navigation.js b/app/soapbox/components/sub_navigation.js index 1ec66d0e9..0f9092760 100644 --- a/app/soapbox/components/sub_navigation.js +++ b/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'; diff --git a/app/soapbox/containers/account_container.js b/app/soapbox/containers/account_container.js index e514015f2..78abcdea8 100644 --- a/app/soapbox/containers/account_container.js +++ b/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'; diff --git a/app/soapbox/containers/domain_container.js b/app/soapbox/containers/domain_container.js index d994246dc..a1d705eaf 100644 --- a/app/soapbox/containers/domain_container.js +++ b/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({ diff --git a/app/soapbox/containers/dropdown_menu_container.js b/app/soapbox/containers/dropdown_menu_container.js index 79d8445bf..b4101c2d2 100644 --- a/app/soapbox/containers/dropdown_menu_container.js +++ b/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']), diff --git a/app/soapbox/containers/status_container.js b/app/soapbox/containers/status_container.js index e479647e9..e671dab56 100644 --- a/app/soapbox/containers/status_container.js +++ b/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'; diff --git a/app/soapbox/features/account/components/header.js b/app/soapbox/features/account/components/header.js index 775f1327b..163993637 100644 --- a/app/soapbox/features/account/components/header.js +++ b/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'; diff --git a/app/soapbox/features/account_gallery/index.js b/app/soapbox/features/account_gallery/index.js index 7689a58c0..4f0bafecb 100644 --- a/app/soapbox/features/account_gallery/index.js +++ b/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'; diff --git a/app/soapbox/features/account_timeline/containers/header_container.js b/app/soapbox/features/account_timeline/containers/header_container.js index ae4dcb067..cec3c29fe 100644 --- a/app/soapbox/features/account_timeline/containers/header_container.js +++ b/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'; diff --git a/app/soapbox/features/admin/components/report_status.js b/app/soapbox/features/admin/components/report_status.js index f0530177f..90c0d062f 100644 --- a/app/soapbox/features/admin/components/report_status.js +++ b/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'; diff --git a/app/soapbox/features/auth_login/components/registration_form.js b/app/soapbox/features/auth_login/components/registration_form.js index dbda945a8..1ed0b7f20 100644 --- a/app/soapbox/features/auth_login/components/registration_form.js +++ b/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'; diff --git a/app/soapbox/features/chats/components/chat_message_list.js b/app/soapbox/features/chats/components/chat_message_list.js index d94b72d67..fec3196e2 100644 --- a/app/soapbox/features/chats/components/chat_message_list.js +++ b/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'; diff --git a/app/soapbox/features/compose/containers/compose_form_container.js b/app/soapbox/features/compose/containers/compose_form_container.js index 9baf367a2..bf34ad39e 100644 --- a/app/soapbox/features/compose/containers/compose_form_container.js +++ b/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, diff --git a/app/soapbox/features/compose/containers/privacy_dropdown_container.js b/app/soapbox/features/compose/containers/privacy_dropdown_container.js index 23da32fbd..702b96e1c 100644 --- a/app/soapbox/features/compose/containers/privacy_dropdown_container.js +++ b/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(openModal('COMPOSE')); + dispatch(closeModal('ACTIONS')); }, }); diff --git a/app/soapbox/features/compose/containers/reply_mentions_container.js b/app/soapbox/features/compose/containers/reply_mentions_container.js index 9d2d209e0..2c3f68e64 100644 --- a/app/soapbox/features/compose/containers/reply_mentions_container.js +++ b/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', { - onCancel: () => dispatch(openModal('COMPOSE')), - })); + dispatch(openModal('REPLY_MENTIONS')); }, }); diff --git a/app/soapbox/features/compose/containers/upload_container.js b/app/soapbox/features/compose/containers/upload_container.js index a9829b13d..9c77c6df7 100644 --- a/app/soapbox/features/compose/containers/upload_container.js +++ b/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) { diff --git a/app/soapbox/features/crypto_donate/components/crypto_address.js b/app/soapbox/features/crypto_donate/components/crypto_address.js index 6b88c52b9..d3115853e 100644 --- a/app/soapbox/features/crypto_donate/components/crypto_address.js +++ b/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'; diff --git a/app/soapbox/features/list_timeline/index.js b/app/soapbox/features/list_timeline/index.js index 01d3de38f..584b11d45 100644 --- a/app/soapbox/features/list_timeline/index.js +++ b/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'; diff --git a/app/soapbox/features/new_status/index.js b/app/soapbox/features/new_status/index.js index 941cd296b..ef6092b11 100644 --- a/app/soapbox/features/new_status/index.js +++ b/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 => ({ diff --git a/app/soapbox/features/notifications/containers/column_settings_container.js b/app/soapbox/features/notifications/containers/column_settings_container.js index 292c08961..a60532d40 100644 --- a/app/soapbox/features/notifications/containers/column_settings_container.js +++ b/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'; diff --git a/app/soapbox/features/notifications/containers/notification_container.js b/app/soapbox/features/notifications/containers/notification_container.js index 8b061fba2..f840f405c 100644 --- a/app/soapbox/features/notifications/containers/notification_container.js +++ b/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, diff --git a/app/soapbox/features/scheduled_statuses/components/scheduled_status_action_bar.js b/app/soapbox/features/scheduled_statuses/components/scheduled_status_action_bar.js index ed77fdd82..2579cc338 100644 --- a/app/soapbox/features/scheduled_statuses/components/scheduled_status_action_bar.js +++ b/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'; diff --git a/app/soapbox/features/status/components/action_bar.js b/app/soapbox/features/status/components/action_bar.js index 967702a1a..5908ab6ad 100644 --- a/app/soapbox/features/status/components/action_bar.js +++ b/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'; diff --git a/app/soapbox/features/status/components/status_interaction_bar.js b/app/soapbox/features/status/components/status_interaction_bar.js index aaf5ce3de..1d6171a5f 100644 --- a/app/soapbox/features/status/components/status_interaction_bar.js +++ b/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'; diff --git a/app/soapbox/features/status/containers/detailed_status_container.js b/app/soapbox/features/status/containers/detailed_status_container.js index 070e70c14..ded96257d 100644 --- a/app/soapbox/features/status/containers/detailed_status_container.js +++ b/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 { diff --git a/app/soapbox/features/status/index.js b/app/soapbox/features/status/index.js index 4c554252f..9c63ccc78 100644 --- a/app/soapbox/features/status/index.js +++ b/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 { diff --git a/app/soapbox/features/ui/components/action_button.js b/app/soapbox/features/ui/components/action_button.js index f64a5b828..f76fe466e 100644 --- a/app/soapbox/features/ui/components/action_button.js +++ b/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'; diff --git a/app/soapbox/features/ui/components/compose_modal.js b/app/soapbox/features/ui/components/compose_modal.js index 6c76ee57f..a62a59001 100644 --- a/app/soapbox/features/ui/components/compose_modal.js +++ b/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: , message: , confirm: intl.formatMessage(messages.confirm), - onConfirm: () => dispatch(cancelReplyCompose()), - onCancel: () => dispatch(openModal('COMPOSE')), + onConfirm: () => { + dispatch(closeModal('COMPOSE')); + dispatch(cancelReplyCompose()); + }, })); } else { onClose('COMPOSE'); diff --git a/app/soapbox/features/ui/components/confirmation_modal.js b/app/soapbox/features/ui/components/confirmation_modal.js index 41b22bfe0..14b22eb41 100644 --- a/app/soapbox/features/ui/components/confirmation_modal.js +++ b/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(); } diff --git a/app/soapbox/features/ui/components/favourites_modal.js b/app/soapbox/features/ui/components/favourites_modal.js index 29c6c9e54..4df4d4da8 100644 --- a/app/soapbox/features/ui/components/favourites_modal.js +++ b/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() { diff --git a/app/soapbox/features/ui/components/instance_moderation_panel.js b/app/soapbox/features/ui/components/instance_moderation_panel.js index 8e17cd8ca..ad54c4db1 100644 --- a/app/soapbox/features/ui/components/instance_moderation_panel.js +++ b/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'; diff --git a/app/soapbox/features/ui/components/link_footer.js b/app/soapbox/features/ui/components/link_footer.js index fd9bf6b41..6710d44f0 100644 --- a/app/soapbox/features/ui/components/link_footer.js +++ b/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'); diff --git a/app/soapbox/features/ui/components/mentions_modal.js b/app/soapbox/features/ui/components/mentions_modal.js index 178a9ca80..ebd814a86 100644 --- a/app/soapbox/features/ui/components/mentions_modal.js +++ b/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() { diff --git a/app/soapbox/features/ui/components/modal_root.js b/app/soapbox/features/ui/components/modal_root.js index 1cc6304c6..5b7e43a8a 100644 --- a/app/soapbox/features/ui/components/modal_root.js +++ b/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 ; } - 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 ( - + {visible && ( {(SpecificComponent) => } diff --git a/app/soapbox/features/ui/components/mute_modal.js b/app/soapbox/features/ui/components/mute_modal.js index 51de0cac9..5f8cdb466 100644 --- a/app/soapbox/features/ui/components/mute_modal.js +++ b/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'; diff --git a/app/soapbox/features/ui/components/profile_media_panel.js b/app/soapbox/features/ui/components/profile_media_panel.js index a63ed523b..b5b40eb27 100644 --- a/app/soapbox/features/ui/components/profile_media_panel.js +++ b/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'; diff --git a/app/soapbox/features/ui/components/reactions_modal.js b/app/soapbox/features/ui/components/reactions_modal.js index 2eb65644b..eabe50042 100644 --- a/app/soapbox/features/ui/components/reactions_modal.js +++ b/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) => () => { diff --git a/app/soapbox/features/ui/components/reblogs_modal.js b/app/soapbox/features/ui/components/reblogs_modal.js index b50ccb794..662ec48c7 100644 --- a/app/soapbox/features/ui/components/reblogs_modal.js +++ b/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() { diff --git a/app/soapbox/features/ui/components/reply_mentions_modal.js b/app/soapbox/features/ui/components/reply_mentions_modal.js index c42062219..3685b0a51 100644 --- a/app/soapbox/features/ui/components/reply_mentions_modal.js +++ b/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; - onClose('COMPOSE'); - if (onCancel) onCancel(); + const { onClose } = this.props; + onClose('REPLY_MENTIONS'); }; render() { @@ -85,4 +82,4 @@ class ComposeModal extends ImmutablePureComponent { } -export default injectIntl(connect(makeMapStateToProps)(ComposeModal)); +export default injectIntl(connect(makeMapStateToProps)(ReplyMentionsModal)); diff --git a/app/soapbox/features/ui/components/tabs_bar.js b/app/soapbox/features/ui/components/tabs_bar.js index 8e833334a..70f7fbd26 100644 --- a/app/soapbox/features/ui/components/tabs_bar.js +++ b/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'; diff --git a/app/soapbox/features/ui/containers/modal_container.js b/app/soapbox/features/ui/containers/modal_container.js index f37650827..a3f01dcd7 100644 --- a/app/soapbox/features/ui/containers/modal_container.js +++ b/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 => ({ - type: state.get('modal').modalType, - props: state.get('modal').modalProps, - noPop: state.get('modal').noPop, -}); +const mapStateToProps = state => { + const modal = state.get('modals').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)); }, }); diff --git a/app/soapbox/features/ui/index.js b/app/soapbox/features/ui/index.js index 1e0ed2d51..b43fc3843 100644 --- a/app/soapbox/features/ui/index.js +++ b/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'; diff --git a/app/soapbox/reducers/__tests__/modal-test.js b/app/soapbox/reducers/__tests__/modal-test.js deleted file mode 100644 index 4aba72b00..000000000 --- a/app/soapbox/reducers/__tests__/modal-test.js +++ /dev/null @@ -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, - }); - }); - -}); diff --git a/app/soapbox/reducers/__tests__/modals-test.js b/app/soapbox/reducers/__tests__/modals-test.js new file mode 100644 index 000000000..3873d0a76 --- /dev/null +++ b/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', + }])); + }); + +}); diff --git a/app/soapbox/reducers/index.js b/app/soapbox/reducers/index.js index 604d2d524..a5c178b3c 100644 --- a/app/soapbox/reducers/index.js +++ b/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, diff --git a/app/soapbox/reducers/modal.js b/app/soapbox/reducers/modal.js deleted file mode 100644 index 5c0cba93d..000000000 --- a/app/soapbox/reducers/modal.js +++ /dev/null @@ -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; - } -} diff --git a/app/soapbox/reducers/modals.js b/app/soapbox/reducers/modals.js new file mode 100644 index 000000000..65a0b85f6 --- /dev/null +++ b/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; + } +}