diff --git a/packages/pl-fe/src/actions/mutes.ts b/packages/pl-fe/src/actions/mutes.ts deleted file mode 100644 index 559045beb..000000000 --- a/packages/pl-fe/src/actions/mutes.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { useModalsStore } from 'pl-fe/stores/modals'; - -import type { Account } from 'pl-fe/normalizers/account'; -import type { AppDispatch } from 'pl-fe/store'; - -const MUTES_INIT_MODAL = 'MUTES_INIT_MODAL'; -const MUTES_TOGGLE_HIDE_NOTIFICATIONS = 'MUTES_TOGGLE_HIDE_NOTIFICATIONS'; -const MUTES_CHANGE_DURATION = 'MUTES_CHANGE_DURATION'; - -const initMuteModal = (account: Account) => - (dispatch: AppDispatch) => { - dispatch({ - type: MUTES_INIT_MODAL, - account, - }); - - useModalsStore.getState().openModal('MUTE'); - }; - -const toggleHideNotifications = () => - (dispatch: AppDispatch) => { - dispatch({ type: MUTES_TOGGLE_HIDE_NOTIFICATIONS }); - }; - -const changeMuteDuration = (duration: number) => - (dispatch: AppDispatch) => { - dispatch({ - type: MUTES_CHANGE_DURATION, - duration, - }); - }; - -export { - MUTES_INIT_MODAL, - MUTES_TOGGLE_HIDE_NOTIFICATIONS, - MUTES_CHANGE_DURATION, - initMuteModal, - toggleHideNotifications, - changeMuteDuration, -}; diff --git a/packages/pl-fe/src/components/status-action-bar.tsx b/packages/pl-fe/src/components/status-action-bar.tsx index 3ab66e679..7e5eb9dea 100644 --- a/packages/pl-fe/src/components/status-action-bar.tsx +++ b/packages/pl-fe/src/components/status-action-bar.tsx @@ -9,7 +9,6 @@ import { directCompose, mentionCompose, quoteCompose, replyCompose } from 'pl-fe import { emojiReact, unEmojiReact } from 'pl-fe/actions/emoji-reacts'; import { toggleBookmark, toggleDislike, toggleFavourite, togglePin, toggleReblog } from 'pl-fe/actions/interactions'; import { deleteStatusModal, toggleStatusSensitivityModal } from 'pl-fe/actions/moderation'; -import { initMuteModal } from 'pl-fe/actions/mutes'; import { initReport, ReportableEntities } from 'pl-fe/actions/reports'; import { changeSetting } from 'pl-fe/actions/settings'; import { deleteStatus, editStatus, toggleMuteStatus, translateStatus, undoStatusTranslation } from 'pl-fe/actions/statuses'; @@ -681,7 +680,7 @@ const MenuButton: React.FC = ({ }; const handleMuteClick: React.EventHandler = (e) => { - dispatch(initMuteModal(status.account)); + openModal('MUTE', { accountId: status.account.id }); }; const handleBlockClick: React.EventHandler = (e) => { diff --git a/packages/pl-fe/src/features/account/components/header.tsx b/packages/pl-fe/src/features/account/components/header.tsx index 025503507..55cfce312 100644 --- a/packages/pl-fe/src/features/account/components/header.tsx +++ b/packages/pl-fe/src/features/account/components/header.tsx @@ -8,7 +8,6 @@ import * as v from 'valibot'; import { biteAccount, blockAccount, pinAccount, removeFromFollowers, unblockAccount, unmuteAccount, unpinAccount } from 'pl-fe/actions/accounts'; import { mentionCompose, directCompose } from 'pl-fe/actions/compose'; import { blockDomain, unblockDomain } from 'pl-fe/actions/domain-blocks'; -import { initMuteModal } from 'pl-fe/actions/mutes'; import { initReport, ReportableEntities } from 'pl-fe/actions/reports'; import { setSearchAccount } from 'pl-fe/actions/search'; import { useFollow } from 'pl-fe/api/hooks/accounts/use-follow'; @@ -196,7 +195,7 @@ const Header: React.FC = ({ account }) => { if (account.relationship?.muting) { dispatch(unmuteAccount(account.id)); } else { - dispatch(initMuteModal(account)); + openModal('MUTE', { accountId: account.id }); } }; diff --git a/packages/pl-fe/src/features/event/components/event-header.tsx b/packages/pl-fe/src/features/event/components/event-header.tsx index fefc5826a..be3284553 100644 --- a/packages/pl-fe/src/features/event/components/event-header.tsx +++ b/packages/pl-fe/src/features/event/components/event-header.tsx @@ -7,7 +7,6 @@ import { directCompose, mentionCompose, quoteCompose } from 'pl-fe/actions/compo import { fetchEventIcs } from 'pl-fe/actions/events'; import { toggleBookmark, togglePin, toggleReblog } from 'pl-fe/actions/interactions'; import { deleteStatusModal, toggleStatusSensitivityModal } from 'pl-fe/actions/moderation'; -import { initMuteModal } from 'pl-fe/actions/mutes'; import { initReport, ReportableEntities } from 'pl-fe/actions/reports'; import { deleteStatus } from 'pl-fe/actions/statuses'; import DropdownMenu, { type Menu as MenuType } from 'pl-fe/components/dropdown-menu'; @@ -167,7 +166,7 @@ const EventHeader: React.FC = ({ status }) => { }; const handleMuteClick = () => { - dispatch(initMuteModal(account)); + openModal('MUTE', { accountId: account.id }); }; const handleBlockClick = () => { diff --git a/packages/pl-fe/src/features/ui/components/modals/mute-modal.tsx b/packages/pl-fe/src/features/ui/components/modals/mute-modal.tsx index 35d29b4c6..6106a5161 100644 --- a/packages/pl-fe/src/features/ui/components/modals/mute-modal.tsx +++ b/packages/pl-fe/src/features/ui/components/modals/mute-modal.tsx @@ -1,8 +1,7 @@ -import React from 'react'; +import React, { useState } from 'react'; import { FormattedMessage } from 'react-intl'; import { muteAccount } from 'pl-fe/actions/accounts'; -import { toggleHideNotifications, changeMuteDuration } from 'pl-fe/actions/mutes'; import { useAccount } from 'pl-fe/api/hooks/accounts/use-account'; import HStack from 'pl-fe/components/ui/hstack'; import Modal from 'pl-fe/components/ui/modal'; @@ -11,25 +10,31 @@ import Text from 'pl-fe/components/ui/text'; import Toggle from 'pl-fe/components/ui/toggle'; import DurationSelector from 'pl-fe/features/compose/components/polls/duration-selector'; import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch'; -import { useAppSelector } from 'pl-fe/hooks/use-app-selector'; import { useFeatures } from 'pl-fe/hooks/use-features'; import type { BaseModalProps } from '../modal-root'; -const MuteModal: React.FC = ({ onClose }) => { +interface MuteModalProps { + accountId: string; +} + +const MuteModal: React.FC = ({ accountId, onClose }) => { const dispatch = useAppDispatch(); - const accountId = useAppSelector((state) => state.mutes.new.accountId); const { account } = useAccount(accountId || undefined); - const notifications = useAppSelector((state) => state.mutes.new.notifications); - const duration = useAppSelector((state) => state.mutes.new.duration); + const [notifications, setNotifications] = useState(true); + const [duration, setDuration] = useState(0); + const [isSubmitting, setIsSubmitting] = useState(false); const mutesDuration = useFeatures().mutesDuration; if (!account) return null; const handleClick = () => { - onClose('MUTE'); - dispatch(muteAccount(account.id, notifications, duration)); + setIsSubmitting(true); + dispatch(muteAccount(account.id, notifications, duration))?.then(() => { + setIsSubmitting(false); + onClose('MUTE'); + }); }; const handleCancel = () => { @@ -37,14 +42,14 @@ const MuteModal: React.FC = ({ onClose }) => { }; const toggleNotifications = () => { - dispatch(toggleHideNotifications()); + setNotifications(notifications => !notifications); }; const handleChangeMuteDuration = (expiresIn: number): void => { - dispatch(changeMuteDuration(expiresIn)); + setDuration(expiresIn); }; - const toggleAutoExpire = () => handleChangeMuteDuration(duration ? 0 : 2 * 60 * 60 * 24); + const toggleAutoExpire = () => setDuration(duration ? 0 : 2 * 60 * 60 * 24); return ( = ({ onClose }) => { onClose={handleCancel} confirmationAction={handleClick} confirmationText={} + confirmationDisabled={isSubmitting} cancelText={} cancelAction={handleCancel} > @@ -112,4 +118,4 @@ const MuteModal: React.FC = ({ onClose }) => { ); }; -export { MuteModal as default }; +export { MuteModal as default, type MuteModalProps }; diff --git a/packages/pl-fe/src/reducers/index.ts b/packages/pl-fe/src/reducers/index.ts index 98e6129e5..002b38567 100644 --- a/packages/pl-fe/src/reducers/index.ts +++ b/packages/pl-fe/src/reducers/index.ts @@ -26,7 +26,6 @@ import lists from './lists'; import locations from './locations'; import me from './me'; import meta from './meta'; -import mutes from './mutes'; import notifications from './notifications'; import onboarding from './onboarding'; import pending_statuses from './pending-statuses'; @@ -69,7 +68,6 @@ const reducers = { locations, me, meta, - mutes, notifications, onboarding, pending_statuses, diff --git a/packages/pl-fe/src/reducers/mutes.test.ts b/packages/pl-fe/src/reducers/mutes.test.ts deleted file mode 100644 index 3b54296bf..000000000 --- a/packages/pl-fe/src/reducers/mutes.test.ts +++ /dev/null @@ -1,67 +0,0 @@ -import { Record as ImmutableRecord } from 'immutable'; - -import { - MUTES_INIT_MODAL, - MUTES_TOGGLE_HIDE_NOTIFICATIONS, -} from 'pl-fe/actions/mutes'; - -import reducer from './mutes'; - -describe('mutes reducer', () => { - it('should return the initial state', () => { - expect(reducer(undefined, {} as any).toJS()).toEqual({ - new: { - isSubmitting: false, - accountId: null, - notifications: true, - duration: 0, - }, - }); - }); - - it('should handle MUTES_INIT_MODAL', () => { - const state = ImmutableRecord({ - new: ImmutableRecord({ - isSubmitting: false, - accountId: null, - notifications: true, - duration: 0, - })(), - })(); - const action = { - type: MUTES_INIT_MODAL, - account: { id: 'account1' }, - }; - expect(reducer(state, action).toJS()).toEqual({ - new: { - isSubmitting: false, - accountId: 'account1', - notifications: true, - duration: 0, - }, - }); - }); - - it('should handle MUTES_TOGGLE_HIDE_NOTIFICATIONS', () => { - const state = ImmutableRecord({ - new: ImmutableRecord({ - isSubmitting: false, - accountId: null, - notifications: true, - duration: 0, - })(), - })(); - const action = { - type: MUTES_TOGGLE_HIDE_NOTIFICATIONS, - }; - expect(reducer(state, action).toJS()).toEqual({ - new: { - isSubmitting: false, - accountId: null, - notifications: false, - duration: 0, - }, - }); - }); - -}); diff --git a/packages/pl-fe/src/reducers/mutes.ts b/packages/pl-fe/src/reducers/mutes.ts deleted file mode 100644 index 7e0e9e0f9..000000000 --- a/packages/pl-fe/src/reducers/mutes.ts +++ /dev/null @@ -1,41 +0,0 @@ -import { Record as ImmutableRecord } from 'immutable'; - -import { - MUTES_INIT_MODAL, - MUTES_TOGGLE_HIDE_NOTIFICATIONS, - MUTES_CHANGE_DURATION, -} from '../actions/mutes'; - -import type { AnyAction } from 'redux'; - -const NewMuteRecord = ImmutableRecord({ - isSubmitting: false, - accountId: null as string | null, - notifications: true, - duration: 0, -}); - -const ReducerRecord = ImmutableRecord({ - new: NewMuteRecord(), -}); - -type State = ReturnType; - -const mutes = (state: State = ReducerRecord(), action: AnyAction) => { - switch (action.type) { - case MUTES_INIT_MODAL: - return state.withMutations((state) => { - state.setIn(['new', 'isSubmitting'], false); - state.setIn(['new', 'accountId'], action.account.id); - state.setIn(['new', 'notifications'], true); - }); - case MUTES_TOGGLE_HIDE_NOTIFICATIONS: - return state.updateIn(['new', 'notifications'], (old) => !old); - case MUTES_CHANGE_DURATION: - return state.setIn(['new', 'duration'], action.duration); - default: - return state; - } -}; - -export { mutes as default }; diff --git a/packages/pl-fe/src/stores/modals.ts b/packages/pl-fe/src/stores/modals.ts index 29ec4caf8..bac8bc0cc 100644 --- a/packages/pl-fe/src/stores/modals.ts +++ b/packages/pl-fe/src/stores/modals.ts @@ -1,6 +1,8 @@ import { create } from 'zustand'; import { mutative } from 'zustand-mutative'; +import { MuteModalProps } from 'pl-fe/features/ui/components/modals/mute-modal'; + import type { ICryptoAddress } from 'pl-fe/features/crypto-donate/components/crypto-address'; import type { ModalType } from 'pl-fe/features/ui/components/modal-root'; import type { AccountModerationModalProps } from 'pl-fe/features/ui/components/modals/account-moderation-modal'; @@ -63,7 +65,7 @@ type OpenModalProps = | [type: 'MEDIA', props: MediaModalProps] | [type: 'MENTIONS', props: MentionsModalProps] | [type: 'MISSING_DESCRIPTION', props: MissingDescriptionModalProps] - | [type: 'MUTE'] + | [type: 'MUTE', props: MuteModalProps] | [type: 'REACTIONS', props: ReactionsModalProps] | [type: 'REBLOGS', props: ReblogsModalProps] | [type: 'REPLY_MENTIONS', props: ReplyMentionsModalProps]