[Glitch] Rewrite actions/modal and reducers/modal with typescript

Port a19c1671af to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
th-downstream
fusagiko / takayamaki 1 year ago committed by Claire
parent cd0ff98425
commit 62f386d44e

@ -95,6 +95,6 @@ export function initBlockModal(account) {
account, account,
}); });
dispatch(openModal('BLOCK')); dispatch(openModal({ modalType: 'BLOCK' }));
}; };
} }

@ -14,7 +14,10 @@ export function initBoostModal(props) {
privacy, privacy,
}); });
dispatch(openModal('BOOST', props)); dispatch(openModal({
modalType: 'BOOST',
modalProps: props,
}));
}; };
} }

@ -416,7 +416,10 @@ export function initMediaEditModal(id) {
id, id,
}); });
dispatch(openModal('FOCAL_POINT', { id })); dispatch(openModal({
modalType: 'FOCAL_POINT',
modalProps: { id },
}));
}; };
} }

@ -15,9 +15,12 @@ export const FILTERS_CREATE_SUCCESS = 'FILTERS_CREATE_SUCCESS';
export const FILTERS_CREATE_FAIL = 'FILTERS_CREATE_FAIL'; export const FILTERS_CREATE_FAIL = 'FILTERS_CREATE_FAIL';
export const initAddFilter = (status, { contextType }) => dispatch => export const initAddFilter = (status, { contextType }) => dispatch =>
dispatch(openModal('FILTER', { dispatch(openModal({
modalType: 'FILTER',
modalProps: {
statusId: status?.get('id'), statusId: status?.get('id'),
contextType: contextType, contextType: contextType,
},
})); }));
export const fetchFilters = () => (dispatch, getState) => { export const fetchFilters = () => (dispatch, getState) => {

@ -28,9 +28,12 @@ export function checkDeprecatedLocalSettings() {
} }
if (changed_settings.length > 0) { if (changed_settings.length > 0) {
dispatch(openModal('DEPRECATED_SETTINGS', { dispatch(openModal({
modalType: 'DEPRECATED_SETTINGS',
modalProps: {
settings: changed_settings, settings: changed_settings,
onConfirm: () => dispatch(clearDeprecatedLocalSettings()), onConfirm: () => dispatch(clearDeprecatedLocalSettings()),
},
})); }));
} }
}; };

@ -1,18 +0,0 @@
export const MODAL_OPEN = 'MODAL_OPEN';
export const MODAL_CLOSE = 'MODAL_CLOSE';
export function openModal(type, props) {
return {
type: MODAL_OPEN,
modalType: type,
modalProps: props,
};
}
export function closeModal(type, options = { ignoreFocus: false }) {
return {
type: MODAL_CLOSE,
modalType: type,
ignoreFocus: options.ignoreFocus,
};
}

@ -0,0 +1,17 @@
import { createAction } from '@reduxjs/toolkit';
import type { MODAL_COMPONENTS } from '../features/ui/components/modal_root';
export type ModalType = keyof typeof MODAL_COMPONENTS;
interface OpenModalPayload {
modalType: ModalType;
modalProps: unknown;
}
export const openModal = createAction<OpenModalPayload>('MODAL_OPEN');
interface CloseModalPayload {
modalType: ModalType | undefined;
ignoreFocus: boolean;
}
export const closeModal = createAction<CloseModalPayload>('MODAL_CLOSE');

@ -98,7 +98,7 @@ export function initMuteModal(account) {
account, account,
}); });
dispatch(openModal('MUTE')); dispatch(openModal({ modalType: 'MUTE' }));
}; };
} }

@ -6,7 +6,9 @@ export function showOnboardingOnce() {
const alreadySeen = getState().getIn(['settings', 'onboarded']); const alreadySeen = getState().getIn(['settings', 'onboarded']);
if (!alreadySeen) { if (!alreadySeen) {
dispatch(openModal('ONBOARDING')); dispatch(openModal({
modalType: 'ONBOARDING',
}));
dispatch(changeSetting(['onboarded'], true)); dispatch(changeSetting(['onboarded'], true));
dispatch(saveSettings()); dispatch(saveSettings());
} }

@ -7,9 +7,12 @@ export const REPORT_SUBMIT_SUCCESS = 'REPORT_SUBMIT_SUCCESS';
export const REPORT_SUBMIT_FAIL = 'REPORT_SUBMIT_FAIL'; export const REPORT_SUBMIT_FAIL = 'REPORT_SUBMIT_FAIL';
export const initReport = (account, status) => dispatch => export const initReport = (account, status) => dispatch =>
dispatch(openModal('REPORT', { dispatch(openModal({
modalType: 'REPORT',
modalProps: {
accountId: account.get('id'), accountId: account.get('id'),
statusId: status?.get('id'), statusId: status?.get('id'),
},
})); }));
export const submitReport = (params, onSuccess, onFail) => (dispatch, getState) => { export const submitReport = (params, onSuccess, onFail) => (dispatch, getState) => {

@ -15,7 +15,10 @@ import DropdownMenu from './containers/dropdown_menu_container';
const mapDispatchToProps = (dispatch, { statusId }) => ({ const mapDispatchToProps = (dispatch, { statusId }) => ({
onItemClick (index) { onItemClick (index) {
dispatch(openModal('COMPARE_HISTORY', { index, statusId })); dispatch(openModal({
modalType: 'COMPARE_HISTORY',
modalProps: { index, statusId },
}));
}, },
}); });

@ -35,10 +35,13 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
onFollow (account) { onFollow (account) {
if (account.getIn(['relationship', 'following']) || account.getIn(['relationship', 'requested'])) { if (account.getIn(['relationship', 'following']) || account.getIn(['relationship', 'requested'])) {
if (unfollowModal) { if (unfollowModal) {
dispatch(openModal('CONFIRM', { dispatch(openModal({
modalType: 'CONFIRM',
modalProps: {
message: <FormattedMessage id='confirmations.unfollow.message' defaultMessage='Are you sure you want to unfollow {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />, message: <FormattedMessage id='confirmations.unfollow.message' defaultMessage='Are you sure you want to unfollow {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
confirm: intl.formatMessage(messages.unfollowConfirm), confirm: intl.formatMessage(messages.unfollowConfirm),
onConfirm: () => dispatch(unfollowAccount(account.get('id'))), onConfirm: () => dispatch(unfollowAccount(account.get('id'))),
},
})); }));
} else { } else {
dispatch(unfollowAccount(account.get('id'))); dispatch(unfollowAccount(account.get('id')));

@ -18,10 +18,13 @@ const makeMapStateToProps = () => {
const mapDispatchToProps = (dispatch, { intl }) => ({ const mapDispatchToProps = (dispatch, { intl }) => ({
onBlockDomain (domain) { onBlockDomain (domain) {
dispatch(openModal('CONFIRM', { dispatch(openModal({
modalType: 'CONFIRM',
modalProps: {
message: <FormattedMessage id='confirmations.domain_block.message' defaultMessage='Are you really, really sure you want to block the entire {domain}? In most cases a few targeted blocks or mutes are sufficient and preferable. You will not see content from that domain in any public timelines or your notifications. Your followers from that domain will be removed.' values={{ domain: <strong>{domain}</strong> }} />, message: <FormattedMessage id='confirmations.domain_block.message' defaultMessage='Are you really, really sure you want to block the entire {domain}? In most cases a few targeted blocks or mutes are sufficient and preferable. You will not see content from that domain in any public timelines or your notifications. Your followers from that domain will be removed.' values={{ domain: <strong>{domain}</strong> }} />,
confirm: intl.formatMessage(messages.blockDomainConfirm), confirm: intl.formatMessage(messages.blockDomainConfirm),
onConfirm: () => dispatch(blockDomain(domain)), onConfirm: () => dispatch(blockDomain(domain)),
},
})); }));
}, },

@ -13,10 +13,13 @@ const mapStateToProps = state => ({
const mapDispatchToProps = (dispatch, { status, items, scrollKey }) => ({ const mapDispatchToProps = (dispatch, { status, items, scrollKey }) => ({
onOpen(id, onItemClick, keyboard) { onOpen(id, onItemClick, keyboard) {
dispatch(isUserTouching() ? openModal('ACTIONS', { dispatch(isUserTouching() ? openModal({
modalType: 'ACTIONS',
modalProps: {
status, status,
actions: items, actions: items,
onClick: onItemClick, onClick: onItemClick,
},
}) : openDropdownMenu(id, keyboard, scrollKey)); }) : openDropdownMenu(id, keyboard, scrollKey));
}, },

@ -23,10 +23,13 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
}, },
onDeleteMarked() { onDeleteMarked() {
dispatch(openModal('CONFIRM', { dispatch(openModal({
modalType: 'CONFIRM',
modalProps: {
message: intl.formatMessage(messages.clearMessage), message: intl.formatMessage(messages.clearMessage),
confirm: intl.formatMessage(messages.clearConfirm), confirm: intl.formatMessage(messages.clearConfirm),
onConfirm: () => dispatch(deleteMarkedNotifications()), onConfirm: () => dispatch(deleteMarkedNotifications()),
},
})); }));
}, },

@ -99,11 +99,14 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
let state = getState(); let state = getState();
if (state.getIn(['local_settings', 'confirm_before_clearing_draft']) && state.getIn(['compose', 'text']).trim().length !== 0) { if (state.getIn(['local_settings', 'confirm_before_clearing_draft']) && state.getIn(['compose', 'text']).trim().length !== 0) {
dispatch(openModal('CONFIRM', { dispatch(openModal({
modalType: 'CONFIRM',
modalProps: {
message: intl.formatMessage(messages.replyMessage), message: intl.formatMessage(messages.replyMessage),
confirm: intl.formatMessage(messages.replyConfirm), confirm: intl.formatMessage(messages.replyConfirm),
onDoNotAsk: () => dispatch(changeLocalSetting(['confirm_before_clearing_draft'], false)), onDoNotAsk: () => dispatch(changeLocalSetting(['confirm_before_clearing_draft'], false)),
onConfirm: () => dispatch(replyCompose(status, router)), onConfirm: () => dispatch(replyCompose(status, router)),
},
})); }));
} else { } else {
dispatch(replyCompose(status, router)); dispatch(replyCompose(status, router));
@ -151,7 +154,13 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
if (e.shiftKey || !favouriteModal) { if (e.shiftKey || !favouriteModal) {
this.onModalFavourite(status); this.onModalFavourite(status);
} else { } else {
dispatch(openModal('FAVOURITE', { status, onFavourite: this.onModalFavourite })); dispatch(openModal({
modalType: 'FAVOURITE',
modalProps: {
status,
onFavourite: this.onModalFavourite,
},
}));
} }
} }
}, },
@ -165,9 +174,12 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
}, },
onEmbed (status) { onEmbed (status) {
dispatch(openModal('EMBED', { dispatch(openModal({
modalType: 'EMBED',
modalProps: {
url: status.get('url'), url: status.get('url'),
onError: error => dispatch(showAlertForError(error)), onError: error => dispatch(showAlertForError(error)),
},
})); }));
}, },
@ -175,10 +187,13 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
if (!deleteModal) { if (!deleteModal) {
dispatch(deleteStatus(status.get('id'), history, withRedraft)); dispatch(deleteStatus(status.get('id'), history, withRedraft));
} else { } else {
dispatch(openModal('CONFIRM', { dispatch(openModal({
modalType: 'CONFIRM',
modalProps: {
message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage), message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage),
confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm), confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm),
onConfirm: () => dispatch(deleteStatus(status.get('id'), history, withRedraft)), onConfirm: () => dispatch(deleteStatus(status.get('id'), history, withRedraft)),
},
})); }));
} }
}, },
@ -187,10 +202,13 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
dispatch((_, getState) => { dispatch((_, getState) => {
let state = getState(); let state = getState();
if (state.getIn(['compose', 'text']).trim().length !== 0) { if (state.getIn(['compose', 'text']).trim().length !== 0) {
dispatch(openModal('CONFIRM', { dispatch(openModal({
modalType: 'CONFIRM',
modalProps: {
message: intl.formatMessage(messages.editMessage), message: intl.formatMessage(messages.editMessage),
confirm: intl.formatMessage(messages.editConfirm), confirm: intl.formatMessage(messages.editConfirm),
onConfirm: () => dispatch(editStatus(status.get('id'), history)), onConfirm: () => dispatch(editStatus(status.get('id'), history)),
},
})); }));
} else { } else {
dispatch(editStatus(status.get('id'), history)); dispatch(editStatus(status.get('id'), history));
@ -215,11 +233,17 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
}, },
onOpenMedia (statusId, media, index, lang) { onOpenMedia (statusId, media, index, lang) {
dispatch(openModal('MEDIA', { statusId, media, index, lang })); dispatch(openModal({
modalType: 'MEDIA',
modalProps: { statusId, media, index, lang },
}));
}, },
onOpenVideo (statusId, media, lang, options) { onOpenVideo (statusId, media, lang, options) {
dispatch(openModal('VIDEO', { statusId, media, lang, options })); dispatch(openModal({
modalType: 'VIDEO',
modalProps: { statusId, media, lang, options },
}));
}, },
onBlock (status) { onBlock (status) {
@ -264,10 +288,13 @@ const mapDispatchToProps = (dispatch, { intl, contextType }) => ({
}, },
onInteractionModal (type, status) { onInteractionModal (type, status) {
dispatch(openModal('INTERACTION', { dispatch(openModal({
modalType: 'INTERACTION',
modalProps: {
type, type,
accountId: status.getIn(['account', 'id']), accountId: status.getIn(['account', 'id']),
url: status.get('url'), url: status.get('url'),
},
})); }));
}, },

@ -149,14 +149,23 @@ class AccountGallery extends ImmutablePureComponent {
const lang = attachment.getIn(['status', 'language']); const lang = attachment.getIn(['status', 'language']);
if (attachment.get('type') === 'video') { if (attachment.get('type') === 'video') {
dispatch(openModal('VIDEO', { media: attachment, statusId, lang, options: { autoPlay: true } })); dispatch(openModal({
modalType: 'VIDEO',
modalProps: { media: attachment, statusId, lang, options: { autoPlay: true } },
}));
} else if (attachment.get('type') === 'audio') { } else if (attachment.get('type') === 'audio') {
dispatch(openModal('AUDIO', { media: attachment, statusId, lang, options: { autoPlay: true } })); dispatch(openModal({
modalType: 'AUDIO',
modalProps: { media: attachment, statusId, lang, options: { autoPlay: true } },
}));
} else { } else {
const media = attachment.getIn(['status', 'media_attachments']); const media = attachment.getIn(['status', 'media_attachments']);
const index = media.findIndex(x => x.get('id') === attachment.get('id')); const index = media.findIndex(x => x.get('id') === attachment.get('id'));
dispatch(openModal('MEDIA', { media, index, statusId, lang })); dispatch(openModal({
modalType: 'MEDIA',
modalProps: { media, index, statusId, lang },
}));
} }
}; };

@ -48,20 +48,26 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
onFollow (account) { onFollow (account) {
if (account.getIn(['relationship', 'following'])) { if (account.getIn(['relationship', 'following'])) {
if (unfollowModal) { if (unfollowModal) {
dispatch(openModal('CONFIRM', { dispatch(openModal({
modalType: 'CONFIRM',
modalProps: {
message: <FormattedMessage id='confirmations.unfollow.message' defaultMessage='Are you sure you want to unfollow {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />, message: <FormattedMessage id='confirmations.unfollow.message' defaultMessage='Are you sure you want to unfollow {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
confirm: intl.formatMessage(messages.unfollowConfirm), confirm: intl.formatMessage(messages.unfollowConfirm),
onConfirm: () => dispatch(unfollowAccount(account.get('id'))), onConfirm: () => dispatch(unfollowAccount(account.get('id'))),
},
})); }));
} else { } else {
dispatch(unfollowAccount(account.get('id'))); dispatch(unfollowAccount(account.get('id')));
} }
} else if (account.getIn(['relationship', 'requested'])) { } else if (account.getIn(['relationship', 'requested'])) {
if (unfollowModal) { if (unfollowModal) {
dispatch(openModal('CONFIRM', { dispatch(openModal({
modalType: 'CONFIRM',
modalProps: {
message: <FormattedMessage id='confirmations.cancel_follow_request.message' defaultMessage='Are you sure you want to withdraw your request to follow {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />, message: <FormattedMessage id='confirmations.cancel_follow_request.message' defaultMessage='Are you sure you want to withdraw your request to follow {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
confirm: intl.formatMessage(messages.cancelFollowRequestConfirm), confirm: intl.formatMessage(messages.cancelFollowRequestConfirm),
onConfirm: () => dispatch(unfollowAccount(account.get('id'))), onConfirm: () => dispatch(unfollowAccount(account.get('id'))),
},
})); }));
} else { } else {
dispatch(unfollowAccount(account.get('id'))); dispatch(unfollowAccount(account.get('id')));
@ -72,10 +78,13 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
}, },
onInteractionModal (account) { onInteractionModal (account) {
dispatch(openModal('INTERACTION', { dispatch(openModal({
modalType: 'INTERACTION',
modalProps: {
type: 'follow', type: 'follow',
accountId: account.get('id'), accountId: account.get('id'),
url: account.get('url'), url: account.get('url'),
},
})); }));
}, },
@ -136,10 +145,13 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
}, },
onBlockDomain (domain) { onBlockDomain (domain) {
dispatch(openModal('CONFIRM', { dispatch(openModal({
modalType: 'CONFIRM',
modalProps: {
message: <FormattedMessage id='confirmations.domain_block.message' defaultMessage='Are you really, really sure you want to block the entire {domain}? In most cases a few targeted blocks or mutes are sufficient and preferable.' values={{ domain: <strong>{domain}</strong> }} />, message: <FormattedMessage id='confirmations.domain_block.message' defaultMessage='Are you really, really sure you want to block the entire {domain}? In most cases a few targeted blocks or mutes are sufficient and preferable.' values={{ domain: <strong>{domain}</strong> }} />,
confirm: intl.formatMessage(messages.blockDomainConfirm), confirm: intl.formatMessage(messages.blockDomainConfirm),
onConfirm: () => dispatch(blockDomain(domain)), onConfirm: () => dispatch(blockDomain(domain)),
},
})); }));
}, },
@ -148,21 +160,30 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
}, },
onAddToList (account) { onAddToList (account) {
dispatch(openModal('LIST_ADDER', { dispatch(openModal({
modalType: 'LIST_ADDER',
modalProps: {
accountId: account.get('id'), accountId: account.get('id'),
},
})); }));
}, },
onChangeLanguages (account) { onChangeLanguages (account) {
dispatch(openModal('SUBSCRIBED_LANGUAGES', { dispatch(openModal({
modalType: 'SUBSCRIBED_LANGUAGES',
modalProps: {
accountId: account.get('id'), accountId: account.get('id'),
},
})); }));
}, },
onOpenAvatar (account) { onOpenAvatar (account) {
dispatch(openModal('IMAGE', { dispatch(openModal({
modalType: 'IMAGE',
modalProps: {
src: account.get('avatar'), src: account.get('avatar'),
alt: account.get('acct'), alt: account.get('acct'),
},
})); }));
}, },

@ -126,7 +126,9 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
}, },
onMediaDescriptionConfirm(routerHistory, mediaId, overriddenVisibility = null) { onMediaDescriptionConfirm(routerHistory, mediaId, overriddenVisibility = null) {
dispatch(openModal('CONFIRM', { dispatch(openModal({
modalType: 'CONFIRM',
modalProps: {
message: intl.formatMessage(messages.missingDescriptionMessage), message: intl.formatMessage(messages.missingDescriptionMessage),
confirm: intl.formatMessage(messages.missingDescriptionConfirm), confirm: intl.formatMessage(messages.missingDescriptionConfirm),
onConfirm: () => { onConfirm: () => {
@ -136,8 +138,12 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
dispatch(submitCompose(routerHistory)); dispatch(submitCompose(routerHistory));
}, },
secondary: intl.formatMessage(messages.missingDescriptionEdit), secondary: intl.formatMessage(messages.missingDescriptionEdit),
onSecondary: () => dispatch(openModal('FOCAL_POINT', { id: mediaId })), onSecondary: () => dispatch(openModal({
modalType: 'FOCAL_POINT',
modalProps: { id: mediaId },
})),
onDoNotAsk: () => dispatch(changeLocalSetting(['confirm_missing_media_description'], false)), onDoNotAsk: () => dispatch(changeLocalSetting(['confirm_missing_media_description'], false)),
},
})); }));
}, },

@ -7,7 +7,7 @@ import Dropdown from '../components/dropdown';
const mapDispatchToProps = dispatch => ({ const mapDispatchToProps = dispatch => ({
isUserTouching, isUserTouching,
onModalOpen: props => dispatch(openModal('ACTIONS', props)), onModalOpen: props => dispatch(openModal({ modalType: 'ACTIONS', modalProps: props })),
onModalClose: () => dispatch(closeModal()), onModalClose: () => dispatch(closeModal()),
}); });

@ -24,14 +24,17 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
onSettingsClick (e) { onSettingsClick (e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
dispatch(openModal('SETTINGS', {})); dispatch(openModal({ modalType: 'SETTINGS', modalProps: {} }));
}, },
onLogout () { onLogout () {
dispatch(openModal('CONFIRM', { dispatch(openModal({
modalType: 'CONFIRM',
modalProps: {
message: intl.formatMessage(messages.logoutMessage), message: intl.formatMessage(messages.logoutMessage),
confirm: intl.formatMessage(messages.logoutConfirm), confirm: intl.formatMessage(messages.logoutConfirm),
closeWhenConfirm: false, closeWhenConfirm: false,
onConfirm: () => logOut(), onConfirm: () => logOut(),
},
})); }));
}, },
}); });

@ -21,11 +21,14 @@ const mapStateToProps = state => {
const mapDispatchToProps = (dispatch, { intl }) => ({ const mapDispatchToProps = (dispatch, { intl }) => ({
onLogout () { onLogout () {
dispatch(openModal('CONFIRM', { dispatch(openModal({
modalType: 'CONFIRM',
modalProps: {
message: intl.formatMessage(messages.logoutMessage), message: intl.formatMessage(messages.logoutMessage),
confirm: intl.formatMessage(messages.logoutConfirm), confirm: intl.formatMessage(messages.logoutConfirm),
closeWhenConfirm: false, closeWhenConfirm: false,
onConfirm: () => logOut(), onConfirm: () => logOut(),
},
})); }));
}, },
}); });

@ -46,7 +46,10 @@ const mapDispatchToProps = (dispatch) => ({
}, },
onDoodleOpen() { onDoodleOpen() {
dispatch(openModal('DOODLE', { noEsc: true, noClose: true })); dispatch(openModal({
modalType: 'DOODLE',
modalProps: { noEsc: true, noClose: true },
}));
}, },
}); });

@ -17,8 +17,14 @@ const mapDispatchToProps = dispatch => ({
}, },
isUserTouching, isUserTouching,
onModalOpen: props => dispatch(openModal('ACTIONS', props)), onModalOpen: props => dispatch(openModal({
onModalClose: () => dispatch(closeModal()), modalType: 'ACTIONS',
modalProps: props,
})),
onModalClose: () => dispatch(closeModal({
modalType: undefined,
ignoreFocus: false,
})),
}); });

@ -42,10 +42,13 @@ const mapDispatchToProps = (dispatch, { intl, conversationId }) => ({
let state = getState(); let state = getState();
if (state.getIn(['compose', 'text']).trim().length !== 0) { if (state.getIn(['compose', 'text']).trim().length !== 0) {
dispatch(openModal('CONFIRM', { dispatch(openModal({
modalType: 'CONFIRM',
modalProps: {
message: intl.formatMessage(messages.replyMessage), message: intl.formatMessage(messages.replyMessage),
confirm: intl.formatMessage(messages.replyConfirm), confirm: intl.formatMessage(messages.replyConfirm),
onConfirm: () => dispatch(replyCompose(status, router)), onConfirm: () => dispatch(replyCompose(status, router)),
},
})); }));
} else { } else {
dispatch(replyCompose(status, router)); dispatch(replyCompose(status, router));

@ -53,7 +53,9 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
if (account.getIn(['relationship', 'following'])) { if (account.getIn(['relationship', 'following'])) {
if (unfollowModal) { if (unfollowModal) {
dispatch( dispatch(
openModal('CONFIRM', { openModal({
modalType: 'CONFIRM',
modalProps: {
message: ( message: (
<FormattedMessage <FormattedMessage
id='confirmations.unfollow.message' id='confirmations.unfollow.message'
@ -63,17 +65,20 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
), ),
confirm: intl.formatMessage(messages.unfollowConfirm), confirm: intl.formatMessage(messages.unfollowConfirm),
onConfirm: () => dispatch(unfollowAccount(account.get('id'))), onConfirm: () => dispatch(unfollowAccount(account.get('id'))),
}), } }),
); );
} else { } else {
dispatch(unfollowAccount(account.get('id'))); dispatch(unfollowAccount(account.get('id')));
} }
} else if (account.getIn(['relationship', 'requested'])) { } else if (account.getIn(['relationship', 'requested'])) {
if (unfollowModal) { if (unfollowModal) {
dispatch(openModal('CONFIRM', { dispatch(openModal({
modalType: 'CONFIRM',
modalProps: {
message: <FormattedMessage id='confirmations.cancel_follow_request.message' defaultMessage='Are you sure you want to withdraw your request to follow {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />, message: <FormattedMessage id='confirmations.cancel_follow_request.message' defaultMessage='Are you sure you want to withdraw your request to follow {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
confirm: intl.formatMessage(messages.cancelFollowRequestConfirm), confirm: intl.formatMessage(messages.cancelFollowRequestConfirm),
onConfirm: () => dispatch(unfollowAccount(account.get('id'))), onConfirm: () => dispatch(unfollowAccount(account.get('id'))),
},
})); }));
} else { } else {
dispatch(unfollowAccount(account.get('id'))); dispatch(unfollowAccount(account.get('id')));

@ -69,7 +69,10 @@ const makeMapStateToProps = () => {
const mapDispatchToProps = dispatch => ({ const mapDispatchToProps = dispatch => ({
fetchFollowRequests: () => dispatch(fetchFollowRequests()), fetchFollowRequests: () => dispatch(fetchFollowRequests()),
fetchLists: () => dispatch(fetchLists()), fetchLists: () => dispatch(fetchLists()),
openSettings: () => dispatch(openModal('SETTINGS', {})), openSettings: () => dispatch(openModal({
modalType: 'SETTINGS',
modalProps: {},
})),
}); });
const badgeDisplay = (number, limit) => { const badgeDisplay = (number, limit) => {

@ -38,11 +38,15 @@ class GettingStartedMisc extends ImmutablePureComponent {
}; };
openOnboardingModal = () => { openOnboardingModal = () => {
this.props.dispatch(openModal('ONBOARDING')); this.props.dispatch(openModal({
modalType: 'ONBOARDING',
}));
}; };
openFeaturedAccountsModal = () => { openFeaturedAccountsModal = () => {
this.props.dispatch(openModal('PINNED_ACCOUNTS_EDITOR')); this.props.dispatch(openModal({
modalType: 'PINNED_ACCOUNTS_EDITOR',
}));
}; };
render () { render () {

@ -18,8 +18,11 @@ const mapStateToProps = (state, { accountId }) => ({
const mapDispatchToProps = (dispatch) => ({ const mapDispatchToProps = (dispatch) => ({
onSignupClick() { onSignupClick() {
dispatch(closeModal()); dispatch(closeModal({
dispatch(openModal('CLOSED_REGISTRATIONS')); modalType: undefined,
ignoreFocus: false,
}));
dispatch(openModal({ modalType: 'CLOSED_REGISTRATIONS' }));
}, },
}); });

@ -114,14 +114,19 @@ class ListTimeline extends PureComponent {
}; };
handleEditClick = () => { handleEditClick = () => {
this.props.dispatch(openModal('LIST_EDITOR', { listId: this.props.params.id })); this.props.dispatch(openModal({
modalType: 'LIST_EDITOR',
modalProps: { listId: this.props.params.id },
}));
}; };
handleDeleteClick = () => { handleDeleteClick = () => {
const { dispatch, columnId, intl } = this.props; const { dispatch, columnId, intl } = this.props;
const { id } = this.props.params; const { id } = this.props.params;
dispatch(openModal('CONFIRM', { dispatch(openModal({
modalType: 'CONFIRM',
modalProps: {
message: intl.formatMessage(messages.deleteMessage), message: intl.formatMessage(messages.deleteMessage),
confirm: intl.formatMessage(messages.deleteConfirm), confirm: intl.formatMessage(messages.deleteConfirm),
onConfirm: () => { onConfirm: () => {
@ -133,6 +138,7 @@ class ListTimeline extends PureComponent {
this.context.router.history.push('/lists'); this.context.router.history.push('/lists');
} }
}, },
},
})); }));
}; };

@ -61,10 +61,13 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
}, },
onClear () { onClear () {
dispatch(openModal('CONFIRM', { dispatch(openModal({
modalType: 'CONFIRM',
modalProps: {
message: intl.formatMessage(messages.clearMessage), message: intl.formatMessage(messages.clearMessage),
confirm: intl.formatMessage(messages.clearConfirm), confirm: intl.formatMessage(messages.clearConfirm),
onConfirm: () => dispatch(clearNotifications()), onConfirm: () => dispatch(clearNotifications()),
},
})); }));
}, },

@ -76,19 +76,25 @@ class Footer extends ImmutablePureComponent {
if (signedIn) { if (signedIn) {
if (askReplyConfirmation) { if (askReplyConfirmation) {
dispatch(openModal('CONFIRM', { dispatch(openModal({
modalType: 'CONFIRM',
modalProps: {
message: intl.formatMessage(messages.replyMessage), message: intl.formatMessage(messages.replyMessage),
confirm: intl.formatMessage(messages.replyConfirm), confirm: intl.formatMessage(messages.replyConfirm),
onConfirm: this._performReply, onConfirm: this._performReply,
},
})); }));
} else { } else {
this._performReply(); this._performReply();
} }
} else { } else {
dispatch(openModal('INTERACTION', { dispatch(openModal({
modalType: 'INTERACTION',
modalProps: {
type: 'reply', type: 'reply',
accountId: status.getIn(['account', 'id']), accountId: status.getIn(['account', 'id']),
url: status.get('url'), url: status.get('url'),
},
})); }));
} }
}; };
@ -104,10 +110,13 @@ class Footer extends ImmutablePureComponent {
dispatch(favourite(status)); dispatch(favourite(status));
} }
} else { } else {
dispatch(openModal('INTERACTION', { dispatch(openModal({
modalType: 'INTERACTION',
modalProps: {
type: 'favourite', type: 'favourite',
accountId: status.getIn(['account', 'id']), accountId: status.getIn(['account', 'id']),
url: status.get('url'), url: status.get('url'),
},
})); }));
} }
}; };
@ -130,10 +139,13 @@ class Footer extends ImmutablePureComponent {
dispatch(initBoostModal({ status, onReblog: this._performReblog })); dispatch(initBoostModal({ status, onReblog: this._performReblog }));
} }
} else { } else {
dispatch(openModal('INTERACTION', { dispatch(openModal({
modalType: 'INTERACTION',
modalProps: {
type: 'reblog', type: 'reblog',
accountId: status.getIn(['account', 'id']), accountId: status.getIn(['account', 'id']),
url: status.get('url'), url: status.get('url'),
},
})); }));
} }
}; };

@ -58,10 +58,13 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
dispatch((_, getState) => { dispatch((_, getState) => {
let state = getState(); let state = getState();
if (state.getIn(['compose', 'text']).trim().length !== 0) { if (state.getIn(['compose', 'text']).trim().length !== 0) {
dispatch(openModal('CONFIRM', { dispatch(openModal({
modalType: 'CONFIRM',
modalProps: {
message: intl.formatMessage(messages.replyMessage), message: intl.formatMessage(messages.replyMessage),
confirm: intl.formatMessage(messages.replyConfirm), confirm: intl.formatMessage(messages.replyConfirm),
onConfirm: () => dispatch(replyCompose(status, router)), onConfirm: () => dispatch(replyCompose(status, router)),
},
})); }));
} else { } else {
dispatch(replyCompose(status, router)); dispatch(replyCompose(status, router));
@ -102,9 +105,12 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
}, },
onEmbed (status) { onEmbed (status) {
dispatch(openModal('EMBED', { dispatch(openModal({
modalType: 'EMBED',
modalProps: {
url: status.get('url'), url: status.get('url'),
onError: error => dispatch(showAlertForError(error)), onError: error => dispatch(showAlertForError(error)),
},
})); }));
}, },
@ -112,10 +118,13 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
if (!deleteModal) { if (!deleteModal) {
dispatch(deleteStatus(status.get('id'), history, withRedraft)); dispatch(deleteStatus(status.get('id'), history, withRedraft));
} else { } else {
dispatch(openModal('CONFIRM', { dispatch(openModal({
modalType: 'CONFIRM',
modalProps: {
message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage), message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage),
confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm), confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm),
onConfirm: () => dispatch(deleteStatus(status.get('id'), history, withRedraft)), onConfirm: () => dispatch(deleteStatus(status.get('id'), history, withRedraft)),
},
})); }));
} }
}, },
@ -129,11 +138,17 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
}, },
onOpenMedia (media, index, lang) { onOpenMedia (media, index, lang) {
dispatch(openModal('MEDIA', { media, index, lang })); dispatch(openModal({
modalType: 'MEDIA',
modalProps: { media, index, lang },
}));
}, },
onOpenVideo (media, lang, options) { onOpenVideo (media, lang, options) {
dispatch(openModal('VIDEO', { media, lang, options })); dispatch(openModal({
modalType: 'VIDEO',
modalProps: { media, lang, options },
}));
}, },
onBlock (status) { onBlock (status) {

@ -289,14 +289,23 @@ class Status extends ImmutablePureComponent {
if ((e && e.shiftKey) || !favouriteModal) { if ((e && e.shiftKey) || !favouriteModal) {
this.handleModalFavourite(status); this.handleModalFavourite(status);
} else { } else {
dispatch(openModal('FAVOURITE', { status, onFavourite: this.handleModalFavourite })); dispatch(openModal({
modalType: 'FAVOURITE',
modalProps: {
status,
onFavourite: this.handleModalFavourite,
},
}));
} }
} }
} else { } else {
dispatch(openModal('INTERACTION', { dispatch(openModal({
modalType: 'INTERACTION',
modalProps: {
type: 'favourite', type: 'favourite',
accountId: status.getIn(['account', 'id']), accountId: status.getIn(['account', 'id']),
url: status.get('url'), url: status.get('url'),
},
})); }));
} }
}; };
@ -315,20 +324,26 @@ class Status extends ImmutablePureComponent {
if (signedIn) { if (signedIn) {
if (askReplyConfirmation) { if (askReplyConfirmation) {
dispatch(openModal('CONFIRM', { dispatch(openModal({
modalType: 'CONFIRM',
modalProps: {
message: intl.formatMessage(messages.replyMessage), message: intl.formatMessage(messages.replyMessage),
confirm: intl.formatMessage(messages.replyConfirm), confirm: intl.formatMessage(messages.replyConfirm),
onDoNotAsk: () => dispatch(changeLocalSetting(['confirm_before_clearing_draft'], false)), onDoNotAsk: () => dispatch(changeLocalSetting(['confirm_before_clearing_draft'], false)),
onConfirm: () => dispatch(replyCompose(status, this.context.router.history)), onConfirm: () => dispatch(replyCompose(status, this.context.router.history)),
},
})); }));
} else { } else {
dispatch(replyCompose(status, this.context.router.history)); dispatch(replyCompose(status, this.context.router.history));
} }
} else { } else {
dispatch(openModal('INTERACTION', { dispatch(openModal({
modalType: 'INTERACTION',
modalProps: {
type: 'reply', type: 'reply',
accountId: status.getIn(['account', 'id']), accountId: status.getIn(['account', 'id']),
url: status.get('url'), url: status.get('url'),
},
})); }));
} }
}; };
@ -356,10 +371,13 @@ class Status extends ImmutablePureComponent {
dispatch(initBoostModal({ status, onReblog: this.handleModalReblog })); dispatch(initBoostModal({ status, onReblog: this.handleModalReblog }));
} }
} else { } else {
dispatch(openModal('INTERACTION', { dispatch(openModal({
modalType: 'INTERACTION',
modalProps: {
type: 'reblog', type: 'reblog',
accountId: status.getIn(['account', 'id']), accountId: status.getIn(['account', 'id']),
url: status.get('url'), url: status.get('url'),
},
})); }));
} }
}; };
@ -378,10 +396,13 @@ class Status extends ImmutablePureComponent {
if (!deleteModal) { if (!deleteModal) {
dispatch(deleteStatus(status.get('id'), history, withRedraft)); dispatch(deleteStatus(status.get('id'), history, withRedraft));
} else { } else {
dispatch(openModal('CONFIRM', { dispatch(openModal({
modalType: 'CONFIRM',
modalProps: {
message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage), message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage),
confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm), confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm),
onConfirm: () => dispatch(deleteStatus(status.get('id'), history, withRedraft)), onConfirm: () => dispatch(deleteStatus(status.get('id'), history, withRedraft)),
},
})); }));
} }
}; };
@ -399,11 +420,17 @@ class Status extends ImmutablePureComponent {
}; };
handleOpenMedia = (media, index, lang) => { handleOpenMedia = (media, index, lang) => {
this.props.dispatch(openModal('MEDIA', { statusId: this.props.status.get('id'), media, index, lang })); this.props.dispatch(openModal({
modalType: 'MEDIA',
modalProps: { statusId: this.props.status.get('id'), media, index, lang },
}));
}; };
handleOpenVideo = (media, lang, options) => { handleOpenVideo = (media, lang, options) => {
this.props.dispatch(openModal('VIDEO', { statusId: this.props.status.get('id'), media, lang, options })); this.props.dispatch(openModal({
modalType: 'VIDEO',
modalProps: { statusId: this.props.status.get('id'), media, lang, options },
}));
}; };
handleHotkeyOpenMedia = e => { handleHotkeyOpenMedia = e => {
@ -470,7 +497,10 @@ class Status extends ImmutablePureComponent {
}; };
handleEmbed = (status) => { handleEmbed = (status) => {
this.props.dispatch(openModal('EMBED', { url: status.get('url') })); this.props.dispatch(openModal({
modalType: 'EMBED',
modalProps: { url: status.get('url') },
}));
}; };
handleHotkeyToggleSensitive = () => { handleHotkeyToggleSensitive = () => {

@ -34,7 +34,10 @@ const mapDispatchToProps = dispatch => {
}, },
onClose() { onClose() {
dispatch(closeModal()); dispatch(closeModal({
modalType: undefined,
ignoreFocus: false,
}));
}, },
}; };
}; };

@ -23,7 +23,10 @@ const mapStateToProps = (state, { statusId }) => ({
const mapDispatchToProps = dispatch => ({ const mapDispatchToProps = dispatch => ({
onClose() { onClose() {
dispatch(closeModal()); dispatch(closeModal({
modalType: undefined,
ignoreFocus: false,
}));
}, },
}); });

@ -23,11 +23,14 @@ const mapStateToProps = (state) => ({
const mapDispatchToProps = (dispatch, { intl }) => ({ const mapDispatchToProps = (dispatch, { intl }) => ({
onLogout () { onLogout () {
dispatch(openModal('CONFIRM', { dispatch(openModal({
modalType: 'CONFIRM',
modalProps: {
message: intl.formatMessage(messages.logoutMessage), message: intl.formatMessage(messages.logoutMessage),
confirm: intl.formatMessage(messages.logoutConfirm), confirm: intl.formatMessage(messages.logoutConfirm),
closeWhenConfirm: false, closeWhenConfirm: false,
onConfirm: () => logOut(), onConfirm: () => logOut(),
},
})); }));
}, },
}); });

@ -27,7 +27,7 @@ const mapStateToProps = (state) => ({
const mapDispatchToProps = (dispatch) => ({ const mapDispatchToProps = (dispatch) => ({
openClosedRegistrationsModal() { openClosedRegistrationsModal() {
dispatch(openModal('CLOSED_REGISTRATIONS')); dispatch(openModal({ modalType: 'CLOSED_REGISTRATIONS' }));
}, },
}); });

@ -19,11 +19,14 @@ const messages = defineMessages({
const mapDispatchToProps = (dispatch, { intl }) => ({ const mapDispatchToProps = (dispatch, { intl }) => ({
onLogout () { onLogout () {
dispatch(openModal('CONFIRM', { dispatch(openModal({
modalType: 'CONFIRM',
modalProps: {
message: intl.formatMessage(messages.logoutMessage), message: intl.formatMessage(messages.logoutMessage),
confirm: intl.formatMessage(messages.logoutConfirm), confirm: intl.formatMessage(messages.logoutConfirm),
closeWhenConfirm: false, closeWhenConfirm: false,
onConfirm: () => logOut(), onConfirm: () => logOut(),
},
})); }));
}, },
}); });

@ -40,7 +40,7 @@ import VideoModal from './video_modal';
const MODAL_COMPONENTS = { export const MODAL_COMPONENTS = {
'MEDIA': () => Promise.resolve({ default: MediaModal }), 'MEDIA': () => Promise.resolve({ default: MediaModal }),
'ONBOARDING': OnboardingModal, 'ONBOARDING': OnboardingModal,
'VIDEO': () => Promise.resolve({ default: VideoModal }), 'VIDEO': () => Promise.resolve({ default: VideoModal }),

@ -34,7 +34,10 @@ const mapDispatchToProps = dispatch => {
}, },
onClose() { onClose() {
dispatch(closeModal()); dispatch(closeModal({
modalType: undefined,
ignoreFocus: false,
}));
}, },
onToggleNotifications() { onToggleNotifications() {

@ -10,7 +10,7 @@ const SignInBanner = () => {
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const openClosedRegistrationsModal = useCallback( const openClosedRegistrationsModal = useCallback(
() => dispatch(openModal('CLOSED_REGISTRATIONS')), () => dispatch(openModal({ modalType: 'CLOSED_REGISTRATIONS' })),
[dispatch], [dispatch],
); );

@ -12,7 +12,10 @@ const mapDispatchToProps = dispatch => ({
openSettings (e) { openSettings (e) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
dispatch(openModal('SETTINGS', {})); dispatch(openModal({
modalType: 'SETTINGS',
modalProps: {},
}));
}, },
}); });

@ -14,14 +14,22 @@ const mapDispatchToProps = dispatch => ({
onClose (confirmationMessage, ignoreFocus = false) { onClose (confirmationMessage, ignoreFocus = false) {
if (confirmationMessage) { if (confirmationMessage) {
dispatch( dispatch(
openModal('CONFIRM', { openModal({
modalType: 'CONFIRM',
modalProps: {
message: confirmationMessage.message, message: confirmationMessage.message,
confirm: confirmationMessage.confirm, confirm: confirmationMessage.confirm,
onConfirm: () => dispatch(closeModal(undefined, { ignoreFocus })), onConfirm: () => dispatch(closeModal({
}), modalType: undefined,
ignoreFocus: { ignoreFocus },
})),
} }),
); );
} else { } else {
dispatch(closeModal(undefined, { ignoreFocus })); dispatch(closeModal({
modalType: undefined,
ignoreFocus: { ignoreFocus },
}));
} }
}, },
}); });

@ -26,7 +26,7 @@ import local_settings from './local_settings';
import markers from './markers'; import markers from './markers';
import media_attachments from './media_attachments'; import media_attachments from './media_attachments';
import meta from './meta'; import meta from './meta';
import modal from './modal'; import { modalReducer } from './modal';
import mutes from './mutes'; import mutes from './mutes';
import notifications from './notifications'; import notifications from './notifications';
import picture_in_picture from './picture_in_picture'; import picture_in_picture from './picture_in_picture';
@ -52,7 +52,7 @@ const reducers = {
meta, meta,
alerts, alerts,
loadingBar: loadingBarReducer, loadingBar: loadingBarReducer,
modal, modal: modalReducer,
user_lists, user_lists,
domain_lists, domain_lists,
status_lists, status_lists,

@ -1,40 +0,0 @@
import { Stack as ImmutableStack, Map as ImmutableMap } from 'immutable';
import { COMPOSE_UPLOAD_CHANGE_SUCCESS } from 'flavours/glitch/actions/compose';
import { MODAL_OPEN, MODAL_CLOSE } from 'flavours/glitch/actions/modal';
import { TIMELINE_DELETE } from 'flavours/glitch/actions/timelines';
const initialState = ImmutableMap({
ignoreFocus: false,
stack: ImmutableStack(),
});
const popModal = (state, { modalType, ignoreFocus }) => {
if (modalType === undefined || modalType === state.getIn(['stack', 0, 'modalType'])) {
return state.set('ignoreFocus', !!ignoreFocus).update('stack', stack => stack.shift());
} else {
return state;
}
};
const pushModal = (state, modalType, modalProps) => {
return state.withMutations(map => {
map.set('ignoreFocus', false);
map.update('stack', stack => stack.unshift(ImmutableMap({ modalType, modalProps })));
});
};
export default function modal(state = initialState, action) {
switch(action.type) {
case MODAL_OPEN:
return pushModal(state, action.modalType, action.modalProps);
case MODAL_CLOSE:
return popModal(state, action);
case COMPOSE_UPLOAD_CHANGE_SUCCESS:
return popModal(state, { modalType: 'FOCAL_POINT', ignoreFocus: false });
case TIMELINE_DELETE:
return state.update('stack', stack => stack.filterNot((modal) => modal.get('modalProps').statusId === action.id));
default:
return state;
}
}

@ -0,0 +1,94 @@
import { Record as ImmutableRecord, Stack } from 'immutable';
import type { PayloadAction } from '@reduxjs/toolkit';
import { COMPOSE_UPLOAD_CHANGE_SUCCESS } from '../actions/compose';
import type { ModalType } from '../actions/modal';
import { openModal, closeModal } from '../actions/modal';
import { TIMELINE_DELETE } from '../actions/timelines';
type ModalProps = Record<string, unknown>;
interface Modal {
modalType: ModalType;
modalProps: ModalProps;
}
const Modal = ImmutableRecord<Modal>({
modalType: 'ACTIONS',
modalProps: ImmutableRecord({})(),
});
interface ModalState {
ignoreFocus: boolean;
stack: Stack<ImmutableRecord<Modal>>;
}
const initialState = ImmutableRecord<ModalState>({
ignoreFocus: false,
stack: Stack(),
})();
type State = typeof initialState;
interface PopModalOption {
modalType: ModalType | undefined;
ignoreFocus: boolean;
}
const popModal = (
state: State,
{ modalType, ignoreFocus }: PopModalOption
): State => {
if (
modalType === undefined ||
modalType === state.get('stack').get(0)?.get('modalType')
) {
return state
.set('ignoreFocus', !!ignoreFocus)
.update('stack', (stack) => stack.shift());
} else {
return state;
}
};
const pushModal = (
state: State,
modalType: ModalType,
modalProps: ModalProps
): State => {
return state.withMutations((record) => {
record.set('ignoreFocus', false);
record.update('stack', (stack) =>
stack.unshift(Modal({ modalType, modalProps }))
);
});
};
export function modalReducer(
state: State = initialState,
action: PayloadAction<{
modalType: ModalType;
ignoreFocus: boolean;
modalProps: Record<string, unknown>;
}>
) {
switch (action.type) {
case openModal.type:
return pushModal(
state,
action.payload.modalType,
action.payload.modalProps
);
case closeModal.type:
return popModal(state, action.payload);
case COMPOSE_UPLOAD_CHANGE_SUCCESS:
return popModal(state, { modalType: 'FOCAL_POINT', ignoreFocus: false });
case TIMELINE_DELETE:
return state.update('stack', (stack) =>
stack.filterNot(
// @ts-expect-error TIMELINE_DELETE action is not typed yet.
(modal) => modal.get('modalProps').statusId === action.id
)
);
default:
return state;
}
}
Loading…
Cancel
Save