pl-fe: Remove mutes reducer

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

packages/pl-fe/src/actions/mutes.ts

@@ -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,
-};

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<IMenuButton> = ({
   };
 
   const handleMuteClick: React.EventHandler<React.MouseEvent> = (e) => {
-    dispatch(initMuteModal(status.account));
+    openModal('MUTE', { accountId: status.account.id });
   };
 
   const handleBlockClick: React.EventHandler<React.MouseEvent> = (e) => {

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<IHeader> = ({ account }) => {
     if (account.relationship?.muting) {
       dispatch(unmuteAccount(account.id));
     } else {
-      dispatch(initMuteModal(account));
+      openModal('MUTE', { accountId: account.id });
     }
   };
 

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<IEventHeader> = ({ status }) => {
   };
 
   const handleMuteClick = () => {
-    dispatch(initMuteModal(account));
+    openModal('MUTE', { accountId: account.id });
   };
 
   const handleBlockClick = () => {

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<BaseModalProps> = ({ onClose }) => {
+interface MuteModalProps {
+  accountId: string;
+}
+
+const MuteModal: React.FC<MuteModalProps & BaseModalProps> = ({ 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 [notifications, setNotifications] = useState(true);
-  const duration = useAppSelector((state) => state.mutes.new.duration);
+  const [duration, setDuration] = useState(0);
+  const [isSubmitting, setIsSubmitting] = useState(false);
   const mutesDuration = useFeatures().mutesDuration;
 
   if (!account) return null;
 
   const handleClick = () => {
-    onClose('MUTE');
+    setIsSubmitting(true);
-    dispatch(muteAccount(account.id, notifications, duration));
+    dispatch(muteAccount(account.id, notifications, duration))?.then(() => {
+      setIsSubmitting(false);
+      onClose('MUTE');
+    });
   };
 
   const handleCancel = () => {
@@ -37,14 +42,14 @@ const MuteModal: React.FC<BaseModalProps> = ({ 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 (
     <Modal
@@ -58,6 +63,7 @@ const MuteModal: React.FC<BaseModalProps> = ({ onClose }) => {
       onClose={handleCancel}
       confirmationAction={handleClick}
       confirmationText={<FormattedMessage id='confirmations.mute.confirm' defaultMessage='Mute' />}
+      confirmationDisabled={isSubmitting}
       cancelText={<FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' />}
       cancelAction={handleCancel}
     >
@@ -112,4 +118,4 @@ const MuteModal: React.FC<BaseModalProps> = ({ onClose }) => {
   );
 };
 
-export { MuteModal as default };
+export { MuteModal as default, type MuteModalProps };

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,

packages/pl-fe/src/reducers/mutes.test.ts

@@ -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,
-      },
-    });
-  });
-
-});

packages/pl-fe/src/reducers/mutes.ts

@@ -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<typeof ReducerRecord>;
-
-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 };

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]