nicolium: Migrate reports to hooks

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

packages/nicolium/src/actions/reports.ts

@@ -1,45 +0,0 @@
-import { getClient } from '@/api';
-import { useModalsStore } from '@/stores/modals';
-
-import type { NormalizedStatus as Status } from '@/normalizers/status';
-import type { Account } from 'pl-api';
-
-enum ReportableEntities {
-  ACCOUNT = 'ACCOUNT',
-  STATUS = 'STATUS',
-}
-
-type ReportedEntity = {
-  status?: Pick<Status, 'id'>;
-  statusId?: string;
-};
-
-const initReport = (
-  entityType: ReportableEntities,
-  account: Pick<Account, 'id'>,
-  entities?: ReportedEntity,
-) => {
-  const { status, statusId } = entities ?? {};
-
-  useModalsStore.getState().actions.openModal('REPORT', {
-    accountId: account.id,
-    entityType,
-    statusIds: [status?.id, statusId].filter((id): id is string => !!id),
-  });
-};
-
-const submitReport = (
-  accountId: string,
-  statusIds: string[],
-  ruleIds?: string[],
-  comment?: string,
-  forward?: boolean,
-) =>
-  getClient().accounts.reportAccount(accountId, {
-    status_ids: statusIds,
-    rule_ids: ruleIds,
-    comment: comment,
-    forward: forward,
-  });
-
-export { ReportableEntities, initReport, submitReport };

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

@@ -5,7 +5,6 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { redactStatus } from '@/actions/admin';
 import { useDeleteStatusModal, useToggleStatusSensitivityModal } from '@/actions/moderation';
-import { initReport, ReportableEntities } from '@/actions/reports';
 import { changeSetting } from '@/actions/settings';
 import {
   deleteStatus,
@@ -884,7 +883,7 @@ const MenuButton: React.FC<IMenuButton> = ({
     };
 
     const handleReport: React.EventHandler<React.MouseEvent> = () => {
-      initReport(ReportableEntities.STATUS, status.account, { status });
+      openModal('REPORT', { accountId: status.account.id, statusIds: [status.id] });
     };
 
     const handleConversationMuteClick: React.EventHandler<React.MouseEvent> = () => {

packages/nicolium/src/features/account/components/account-menu.tsx

@@ -2,7 +2,6 @@ import { GOTOSOCIAL, MASTODON } from 'pl-api';
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { initReport, ReportableEntities } from '@/actions/reports';
 import DropdownMenu, { type Menu } from '@/components/dropdown-menu';
 import IconButton from '@/components/ui/icon-button';
 import { useClient } from '@/hooks/use-client';
@@ -113,14 +112,13 @@ const AccountMenu: React.FC<IAccountMenu> = ({ account }) => {
   const { mutate: unpinAccount } = useUnpinAccountMutation(account?.id!);
   const { mutate: removeFromFollowers } = useRemoveAccountFromFollowersMutation(account?.id!);
   const { mutate: updateAccountNote } = useUpdateAccountNoteMutation(account?.id!);
+  const { mutate: blockDomain } = useBlockDomainMutation();
+  const { mutate: unblockDomain } = useUnblockDomainMutation();
   const { openModal } = useModalsActions();
   const settings = useSettings();
 
   const { software } = features.version;
 
-  const { mutate: blockDomain } = useBlockDomainMutation();
-  const { mutate: unblockDomain } = useUnblockDomainMutation();
-
   const onBlock = () => {
     if (account.relationship?.blocking) {
       unblockAccount();
@@ -209,7 +207,7 @@ const AccountMenu: React.FC<IAccountMenu> = ({ account }) => {
   };
 
   const onReport = () => {
-    initReport(ReportableEntities.ACCOUNT, account);
+    openModal('REPORT', { accountId: account.id });
   };
 
   const onMute = () => {

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

@@ -3,7 +3,6 @@ import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { useDeleteStatusModal, useToggleStatusSensitivityModal } from '@/actions/moderation';
-import { initReport, ReportableEntities } from '@/actions/reports';
 import { deleteStatus } from '@/actions/statuses';
 import VerificationBadge from '@/components/accounts/verification-badge';
 import DropdownMenu, { type Menu as MenuType } from '@/components/dropdown-menu';
@@ -237,7 +236,7 @@ const EventHeader: React.FC<IEventHeader> = ({ status }) => {
   };
 
   const handleReport = () => {
-    initReport(ReportableEntities.STATUS, account, { status });
+    openModal('REPORT', { accountId: account.id, statusIds: [status.id] });
   };
 
   const handleToggleStatusSensitivity = () => {

packages/nicolium/src/modals/block-mute-modal.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { initReport, ReportableEntities } from '@/actions/reports';
 import FormGroup from '@/components/ui/form-group';
 import Modal from '@/components/ui/modal';
 import Text from '@/components/ui/text';
@@ -15,6 +14,7 @@ import {
   useMuteAccountMutation,
   useUpdateAccountNoteMutation,
 } from '@/queries/accounts/use-relationship';
+import { useModalsActions } from '@/stores/modals';
 import toast from '@/toast';
 
 import type { BaseModalProps } from '@/features/ui/components/modal-root';
@@ -46,6 +46,7 @@ const BlockMuteModal: React.FC<BlockMuteModalProps & BaseModalProps> = ({
   const [note, setNote] = useState<string | undefined>(undefined);
   const { notes, blocksDuration, mutesDuration } = useFeatures();
   const canSetDuration = action === 'MUTE' ? mutesDuration : blocksDuration;
+  const { openModal } = useModalsActions();
 
   const currentNote = account?.relationship?.note;
 
@@ -79,7 +80,7 @@ const BlockMuteModal: React.FC<BlockMuteModalProps & BaseModalProps> = ({
 
   const handleBlockAndReport = () => {
     handleClick(() => {
-      initReport(ReportableEntities.STATUS, account, { statusId });
+      openModal('REPORT', { accountId: account.id, statusIds: statusId ? [statusId] : undefined });
     });
   };
 

packages/nicolium/src/modals/report-modal/index.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
-import { submitReport, ReportableEntities } from '@/actions/reports';
 import AttachmentThumbs from '@/components/media/attachment-thumbs';
 import StatusContent from '@/components/statuses/status-content';
 import Modal from '@/components/ui/modal';
@@ -10,6 +9,7 @@ import Text from '@/components/ui/text';
 import AccountContainer from '@/containers/account-container';
 import { useAccount } from '@/queries/accounts/use-account';
 import { useBlockAccountMutation } from '@/queries/accounts/use-relationship';
+import { useReportAccountMutation } from '@/queries/accounts/use-report';
 import { useMinimalStatus } from '@/queries/statuses/use-status';
 import { useAccountTimeline } from '@/queries/timelines/use-timelines';
 import { useInstance } from '@/stores/instance';
@@ -58,19 +58,18 @@ const SelectedStatus = ({ statusId }: { statusId: string }) => {
 
 interface ReportModalProps {
   accountId: string;
-  entityType: ReportableEntities;
-  statusIds: Array<string>;
+  statusIds?: Array<string>;
 }
 
 const ReportModal: React.FC<BaseModalProps & ReportModalProps> = ({
   onClose,
   accountId,
-  entityType,
-  statusIds,
+  statusIds = [],
 }) => {
   const { data: account } = useAccount(accountId || undefined);
 
   const { mutate: blockAccount } = useBlockAccountMutation(accountId);
+  const { mutate: reportAccount } = useReportAccountMutation(accountId);
 
   const [block, setBlock] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -82,22 +81,30 @@ const ReportModal: React.FC<BaseModalProps & ReportModalProps> = ({
 
   const shouldRequireRule = rules.length > 0;
 
-  const isReportingAccount = entityType === ReportableEntities.ACCOUNT;
-  const isReportingStatus = entityType === ReportableEntities.STATUS;
+  const isReportingAccount = statusIds.length === 0;
 
   const [currentStep, setCurrentStep] = useState<Steps>(Steps.ONE);
 
   const handleSubmit = () => {
     setIsSubmitting(true);
 
-    submitReport(accountId, selectedStatusIds, [...ruleIds], comment, forward)
-      .then(() => {
-        setIsSubmitting(false);
-        setCurrentStep(Steps.THREE);
-      })
-      .catch(() => {
-        setIsSubmitting(false);
-      });
+    reportAccount(
+      {
+        status_ids: selectedStatusIds,
+        comment,
+        forward,
+        rule_ids: ruleIds,
+      },
+      {
+        onSuccess: () => {
+          setIsSubmitting(false);
+          setCurrentStep(Steps.THREE);
+        },
+        onError: () => {
+          setIsSubmitting(false);
+        },
+      },
+    );
 
     if (block && account) {
       blockAccount(undefined);
@@ -174,7 +181,7 @@ const ReportModal: React.FC<BaseModalProps & ReportModalProps> = ({
   };
 
   const renderSelectedEntity = () => {
-    if (entityType === ReportableEntities.STATUS) return renderSelectedStatuses();
+    if (!isReportingAccount) return renderSelectedStatuses();
     return null;
   };
 
@@ -191,19 +198,8 @@ const ReportModal: React.FC<BaseModalProps & ReportModalProps> = ({
       return false;
     }
 
-    return (
-      isSubmitting ||
-      (shouldRequireRule && ruleIds.length === 0) ||
-      (isReportingStatus && selectedStatusIds.length === 0)
-    );
-  }, [
-    currentStep,
-    isSubmitting,
-    shouldRequireRule,
-    ruleIds.length,
-    selectedStatusIds.length,
-    isReportingStatus,
-  ]);
+    return isSubmitting || (shouldRequireRule && ruleIds.length === 0);
+  }, [currentStep, isSubmitting, shouldRequireRule, ruleIds.length, selectedStatusIds.length]);
 
   const calculateProgress = useCallback(() => {
     switch (currentStep) {

packages/nicolium/src/queries/accounts/use-report.ts

@@ -0,0 +1,15 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { useClient } from '@/hooks/use-client';
+
+import type { ReportAccountParams } from 'pl-api';
+
+const useReportAccountMutation = (accountId: string) => {
+  const client = useClient();
+
+  return useMutation({
+    mutationFn: (params: ReportAccountParams) => client.accounts.reportAccount(accountId, params),
+  });
+};
+
+export { useReportAccountMutation };