nicolium: migrate moderation modals

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/nicolium/src/actions/admin.ts

@@ -1,10 +1,8 @@
-import { importEntities } from '@/actions/importer';
 import { getClient } from '@/api';
 import { queryClient } from '@/queries/client';
 import { queryKeys } from '@/queries/keys';
 import { useComposeStore } from '@/stores/compose';
 import { useModalsStore } from '@/stores/modals';
-import { useTimelinesStore } from '@/stores/timelines';
 import { filterBadges, getTagDiff } from '@/utils/badges';
 
 import type { AppDispatch, RootState } from '@/store';
@@ -24,22 +22,6 @@ const deactivateUser =
 const deleteUser = (accountId: string) => (dispatch: AppDispatch, getState: () => RootState) =>
   getClient(getState).admin.accounts.deleteAccount(accountId);
 
-const deleteStatus = (statusId: string) => (dispatch: AppDispatch, getState: () => RootState) =>
-  getClient(getState)
-    .admin.statuses.deleteStatus(statusId)
-    .then(() => {
-      useTimelinesStore.getState().actions.deleteStatus(statusId);
-      return { statusId };
-    });
-
-const toggleStatusSensitivity =
-  (statusId: string, sensitive: boolean) => (dispatch: AppDispatch, getState: () => RootState) =>
-    getClient(getState)
-      .admin.statuses.updateStatus(statusId, { sensitive: !sensitive })
-      .then((status) => {
-        importEntities({ statuses: [status] });
-      });
-
 const tagUser =
   (accountId: string, tags: string[]) => (dispatch: AppDispatch, getState: () => RootState) =>
     getClient(getState).admin.accounts.tagUser(accountId, tags);
@@ -116,8 +98,6 @@ export {
   ADMIN_CONFIG_UPDATE_SUCCESS,
   deactivateUser,
   deleteUser,
-  deleteStatus,
-  toggleStatusSensitivity,
   setBadges,
   setRole,
   redactStatus,

packages/nicolium/src/actions/moderation.tsx

@@ -1,14 +1,19 @@
+import { useQueryClient } from '@tanstack/react-query';
 import React from 'react';
-import { defineMessages, FormattedMessage, type IntlShape } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl, type IntlShape } from 'react-intl';
 
-import { deactivateUser, deleteUser, deleteStatus, toggleStatusSensitivity } from '@/actions/admin';
+import { deactivateUser, deleteUser } from '@/actions/admin';
 import OutlineBox from '@/components/outline-box';
 import Text from '@/components/ui/text';
 import AccountContainer from '@/containers/account-container';
 import { selectAccount } from '@/queries/accounts/selectors';
+import {
+  useAdminDeleteStatusMutation,
+  useAdminUpdateStatusMutation,
+} from '@/queries/admin/use-statuses';
 import { queryClient } from '@/queries/client';
 import { queryKeys } from '@/queries/keys';
-import { useModalsStore } from '@/stores/modals';
+import { useModalsActions, useModalsStore } from '@/stores/modals';
 import toast from '@/toast';
 
 import type { AppDispatch } from '@/store';
@@ -180,14 +185,18 @@ const deleteUserModal =
     });
   };
 
-const toggleStatusSensitivityModal =
-  (intl: IntlShape, statusId: string, sensitive: boolean, afterConfirm = () => {}) =>
-  (dispatch: AppDispatch) => {
+const useToggleStatusSensitivityModal = (statusId: string, afterConfirm = () => {}) => {
+  const intl = useIntl();
+  const { mutate: updateStatus } = useAdminUpdateStatusMutation(statusId);
+  const { openModal } = useModalsActions();
+  const queryClient = useQueryClient();
+
+  return (sensitive: boolean) => {
     const status = queryClient.getQueryData(queryKeys.statuses.show(statusId));
     const statusAccount = status ? selectAccount(status.account_id) : undefined;
     const acct = statusAccount?.acct;
 
-    useModalsStore.getState().actions.openModal('CONFIRM', {
+    openModal('CONFIRM', {
       heading: intl.formatMessage(
         !sensitive ? messages.markStatusSensitiveHeading : messages.markStatusNotSensitiveHeading,
       ),
@@ -199,43 +208,55 @@ const toggleStatusSensitivityModal =
         !sensitive ? messages.markStatusSensitiveConfirm : messages.markStatusNotSensitiveConfirm,
       ),
       onConfirm: () => {
-        dispatch(toggleStatusSensitivity(statusId, sensitive))
-          .then(() => {
-            const message = intl.formatMessage(
-              !sensitive ? messages.statusMarkedSensitive : messages.statusMarkedNotSensitive,
-              { acct },
-            );
-            toast.success(message);
-          })
-          .catch(() => {});
-        afterConfirm();
+        updateStatus(
+          { sensitive: !sensitive },
+          {
+            onSuccess: () => {
+              const message = intl.formatMessage(
+                !sensitive ? messages.statusMarkedSensitive : messages.statusMarkedNotSensitive,
+                { acct },
+              );
+              toast.success(message);
+              afterConfirm();
+            },
+          },
+        );
       },
     });
   };
+};
 
-const deleteStatusModal =
-  (intl: IntlShape, statusId: string, afterConfirm = () => {}) =>
-  (dispatch: AppDispatch) => {
+const useDeleteStatusModal = (statusId: string, afterConfirm = () => {}) => {
+  const intl = useIntl();
+  const { mutate: deleteStatus } = useAdminDeleteStatusMutation(statusId);
+  const { openModal } = useModalsActions();
+  const queryClient = useQueryClient();
+
+  return () => {
     const status = queryClient.getQueryData(queryKeys.statuses.show(statusId));
     const statusAccount = status ? selectAccount(status.account_id) : undefined;
     const acct = statusAccount?.acct;
 
-    useModalsStore.getState().actions.openModal('CONFIRM', {
+    openModal('CONFIRM', {
       heading: intl.formatMessage(messages.deleteStatusHeading),
-      message: intl.formatMessage(messages.deleteStatusPrompt, {
-        acct: <strong className='break-words'>{acct}</strong>,
-      }),
+      message: intl.formatMessage(messages.deleteStatusPrompt, { acct }),
       confirm: intl.formatMessage(messages.deleteStatusConfirm),
       onConfirm: () => {
-        dispatch(deleteStatus(statusId))
-          .then(() => {
+        deleteStatus(undefined, {
+          onSuccess: () => {
             const message = intl.formatMessage(messages.statusDeleted, { acct });
             toast.success(message);
-          })
-          .catch(() => {});
-        afterConfirm();
+            afterConfirm();
+          },
+        });
       },
     });
   };
+};
 
-export { deactivateUserModal, deleteUserModal, toggleStatusSensitivityModal, deleteStatusModal };
+export {
+  deactivateUserModal,
+  deleteUserModal,
+  useToggleStatusSensitivityModal,
+  useDeleteStatusModal,
+};

packages/nicolium/src/components/statuses/status-action-bar.tsx

@@ -4,7 +4,7 @@ import React, { useCallback, useMemo } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { redactStatus } from '@/actions/admin';
-import { deleteStatusModal, toggleStatusSensitivityModal } from '@/actions/moderation';
+import { useDeleteStatusModal, useToggleStatusSensitivityModal } from '@/actions/moderation';
 import { initReport, ReportableEntities } from '@/actions/reports';
 import { changeSetting } from '@/actions/settings';
 import {
@@ -739,9 +739,11 @@ const MenuButton: React.FC<IMenuButton> = ({
   const { getOrCreateChatByAccountId } = useChats();
   const { mutate: bookmarkStatus } = useBookmarkStatus(status.id);
   const { mutate: unbookmarkStatus } = useUnbookmarkStatus(status.id);
-  const { mutate: pinStatus } = usePinStatus(status?.id);
-  const { mutate: unpinStatus } = useUnpinStatus(status?.id);
+  const { mutate: pinStatus } = usePinStatus(status.id);
+  const { mutate: unpinStatus } = useUnpinStatus(status.id);
   const { mutate: unblockAccount } = useUnblockAccountMutation(status.account_id);
+  const deleteStatusModal = useDeleteStatusModal(status.id);
+  const toggleStatusSensitivityModal = useToggleStatusSensitivityModal(status.id);
 
   const features = useFeatures();
   const instance = useInstance();
@@ -920,11 +922,11 @@ const MenuButton: React.FC<IMenuButton> = ({
     };
 
     const handleDeleteStatus: React.EventHandler<React.MouseEvent> = () => {
-      dispatch(deleteStatusModal(intl, status.id));
+      deleteStatusModal();
     };
 
     const handleToggleStatusSensitivity: React.EventHandler<React.MouseEvent> = () => {
-      dispatch(toggleStatusSensitivityModal(intl, status.id, status.sensitive));
+      toggleStatusSensitivityModal(status.sensitive);
     };
 
     const handleDeleteFromGroup: React.EventHandler<React.MouseEvent> = () => {

packages/nicolium/src/features/event/components/event-header.tsx

@@ -2,7 +2,7 @@ import { Link, useNavigate } from '@tanstack/react-router';
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { deleteStatusModal, toggleStatusSensitivityModal } from '@/actions/moderation';
+import { useDeleteStatusModal, useToggleStatusSensitivityModal } from '@/actions/moderation';
 import { initReport, ReportableEntities } from '@/actions/reports';
 import { deleteStatus } from '@/actions/statuses';
 import VerificationBadge from '@/components/accounts/verification-badge';
@@ -131,6 +131,8 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
   const { mutate: unbookmarkStatus } = useUnbookmarkStatus(status?.id!);
   const { mutate: pinStatus } = usePinStatus(status?.id!);
   const { mutate: unpinStatus } = useUnpinStatus(status?.id!);
+  const deleteStatusModal = useDeleteStatusModal(status?.id!);
+  const toggleStatusSensitivityModal = useToggleStatusSensitivityModal(status?.id!);
 
   if (!status || !status.event || !account) {
     return (
@@ -241,11 +243,11 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
   };
 
   const handleToggleStatusSensitivity = () => {
-    dispatch(toggleStatusSensitivityModal(intl, status.id, status.sensitive));
+    toggleStatusSensitivityModal(status.sensitive);
   };
 
   const handleDeleteStatus = () => {
-    dispatch(deleteStatusModal(intl, status.id));
+    deleteStatusModal();
   };
 
   const makeMenu = (): MenuType => {