hackweek: use isLoading from useMutations for loading indicator in delete modal

ui/src/chat/ChatMessage/ChatMessageOptions.tsx

@@ -1,10 +1,10 @@
-import cn from 'classnames';
 import React, {
   useCallback,
   useEffect,
   useLayoutEffect,
   useRef,
   useMemo,
+  useState,
 } from 'react';
 import { useLocation, useNavigate, useParams } from 'react-router';
 import { useSearchParams } from 'react-router-dom';
@@ -25,7 +25,6 @@ import CheckIcon from '@/components/icons/CheckIcon';
 import EmojiPicker from '@/components/EmojiPicker';
 import ConfirmationModal from '@/components/ConfirmationModal';
 import ActionMenu, { Action } from '@/components/ActionMenu';
-import useRequestState from '@/logic/useRequestState';
 import { useIsMobile } from '@/logic/useMedia';
 import useGroupPrivacy from '@/logic/useGroupPrivacy';
 import { captureGroupsAnalyticsEvent } from '@/logic/analytics';
@@ -39,8 +38,7 @@ import {
 import { emptyPost, Post } from '@/types/channel';
 import VisibleIcon from '@/components/icons/VisibleIcon';
 import HiddenIcon from '@/components/icons/HiddenIcon';
-import { inlineSummary, inlineToString } from '@/logic/tiptap';
-import { Inline } from '@/types/content';
+import { inlineSummary } from '@/logic/tiptap';
 
 function ChatMessageOptions(props: {
   open: boolean;
@@ -76,11 +74,8 @@ function ChatMessageOptions(props: {
     seal.id,
     'delete'
   );
-  const {
-    isPending: isDeletePending,
-    setPending: setDeletePending,
-    setReady,
-  } = useRequestState();
+  // TODO: replace this with isLoading from useMutation for deleting a DM later
+  const [isDeletePending, setIsDeletePending] = useState(false);
   const { chShip, chName } = useParams();
   const [, setSearchParams] = useSearchParams();
   const { load: loadEmoji } = useEmoji();
@@ -94,7 +89,8 @@ function ChatMessageOptions(props: {
   const canWrite = canWriteChannel(perms, vessel, group?.bloc);
   const navigate = useNavigate();
   const location = useLocation();
-  const { mutate: deleteChatMessage } = useDeletePostMutation();
+  const { mutate: deleteChatMessage, isLoading: isDeleteLoading } =
+    useDeletePostMutation();
   const { mutate: addFeelToChat } = useAddPostReactMutation();
   const isDMorMultiDM = useIsDmOrMultiDm(whom);
   const {
@@ -118,7 +114,7 @@ function ChatMessageOptions(props: {
       onOpenChange(false);
     }
 
-    setDeletePending();
+    setIsDeletePending(true);
 
     try {
       if (isDMorMultiDM) {
@@ -132,7 +128,7 @@ function ChatMessageOptions(props: {
     } catch (e) {
       console.log('Failed to delete message', e);
     }
-    setReady();
+    setIsDeletePending(false);
   };
 
   const onCopy = useCallback(() => {
@@ -461,7 +457,7 @@ function ChatMessageOptions(props: {
         open={deleteOpen}
         setOpen={setDeleteOpen}
         confirmText="Delete"
-        loading={isDeletePending}
+        loading={isDeletePending || isDeleteLoading}
       />
     </>
   );

ui/src/diary/DiaryNoteOptionsDropdown.tsx

@@ -44,6 +44,7 @@ export default function DiaryNoteOptionsDropdown({
     didCopy,
     onCopy,
     delNote,
+    isDeleteLoading,
     setIsOpen,
     addToArrangedNotes,
     removeFromArrangedNotes,
@@ -132,6 +133,7 @@ export default function DiaryNoteOptionsDropdown({
         onConfirm={delNote}
         open={deleteOpen}
         setOpen={setDeleteOpen}
+        loading={isDeleteLoading}
         confirmText="Delete"
       />
     </>

ui/src/diary/useDiaryActions.ts

@@ -17,7 +17,8 @@ export default function useDiaryActions({ flag, time }: useDiaryActionsParams) {
   const [isOpen, setIsOpen] = useState(false);
   const arrangedNotes = useArrangedPosts(`diary/${flag}`);
   const navigate = useNavigate();
-  const { mutate: deleteNote } = useDeletePostMutation();
+  const { mutate: deleteNote, isLoading: isDeleteLoading } =
+    useDeletePostMutation();
   const { mutate: arrangedNotesMutation } = useArrangedPostsMutation();
   const nest = `diary/${flag}`;
   const { doCopy, didCopy } = useCopy(
@@ -93,6 +94,7 @@ export default function useDiaryActions({ flag, time }: useDiaryActionsParams) {
     setIsOpen,
     onCopy,
     delNote,
+    isDeleteLoading,
     addToArrangedNotes,
     removeFromArrangedNotes,
     moveUpInArrangedNotes,

ui/src/heap/HeapBlock.tsx

@@ -64,7 +64,7 @@ function TopBar({
     menuOpen,
     setMenuOpen,
     onDelete,
-    deleteStatus,
+    isDeleteLoading,
     onEdit,
     onCopy,
     navigateToCurio,
@@ -183,8 +183,7 @@ function TopBar({
         setOpen={setDeleteOpen}
         onConfirm={onDelete}
         closeOnClickOutside={true}
-        loading={deleteStatus === 'loading'}
-        succeeded={deleteStatus === 'success'}
+        loading={isDeleteLoading}
         confirmText="Delete"
         title="Delete Gallery Item"
         message="Are you sure you want to delete this gallery item?"

ui/src/heap/HeapRow.tsx

@@ -63,7 +63,7 @@ function Actions({
     menuOpen,
     setMenuOpen,
     onDelete,
-    deleteStatus,
+    isDeleteLoading,
     onEdit,
     onCopy,
     navigateToCurio,
@@ -171,7 +171,7 @@ function Actions({
         open={deleteOpen}
         setOpen={setDeleteOpen}
         onConfirm={onDelete}
-        loading={deleteStatus === 'loading'}
+        loading={isDeleteLoading}
         confirmText="Delete"
         title="Delete Gallery Item"
         message="Are you sure you want to delete this gallery item?"

ui/src/heap/useCurioActions.ts

@@ -31,23 +31,17 @@ export default function useCurioActions({
   const { isHidden, show, hide } = usePostToggler(time);
 
   const [menuOpen, setMenuOpen] = useState(false);
-  const [deleteStatus, setDeleteStatus] = useState<Status>('idle');
 
   const delMutation = useDeletePostMutation();
 
   const onDelete = useCallback(async () => {
     setMenuOpen(false);
-    setDeleteStatus('loading');
     delMutation.mutate(
       { nest, time: decToUd(time) },
       {
         onSuccess: () => {
-          setDeleteStatus('success');
           navigate(`/groups/${flag}/channels/heap/${chFlag}`);
         },
-        onError: () => {
-          setDeleteStatus('error');
-        },
       }
     );
   }, [chFlag, time, delMutation, flag, navigate, nest]);
@@ -83,7 +77,7 @@ export default function useCurioActions({
     menuOpen,
     setMenuOpen,
     onDelete,
-    deleteStatus,
+    isDeleteLoading: delMutation.isLoading,
     onEdit,
     onCopy,
     navigateToCurio,

ui/src/replies/ReplyMessageOptions.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useLocation, useNavigate, useParams } from 'react-router';
 import { useSearchParams } from 'react-router-dom';
 import { decToUd } from '@urbit/api';
@@ -65,11 +65,7 @@ export default function ReplyMessageOptions(props: {
     seal.id,
     'delete'
   );
-  const {
-    isPending: isDeletePending,
-    setPending: setDeletePending,
-    setReady,
-  } = useRequestState();
+  // TODO: add delete mutation for parent DMs
   const { chShip, chName } = useParams();
   const isParent = threadParentId === seal.id;
   const [, setSearchParams] = useSearchParams();
@@ -83,12 +79,20 @@ export default function ReplyMessageOptions(props: {
   const canWrite = canWriteChannel(perms, vessel, group?.bloc);
   const navigate = useNavigate();
   const location = useLocation();
-  const { mutate: deleteReply } = useDeleteReplyMutation();
-  const { mutate: deleteChatMessage } = useDeletePostMutation();
-  const { mutate: deleteDMReply } = useDeleteDMReplyMutation();
+  const { mutate: deleteReply, isLoading: isDeleteReplyLoading } =
+    useDeleteReplyMutation();
+  const { mutate: deleteChatMessage, isLoading: isDeleteChatMessageLoading } =
+    useDeletePostMutation();
+  const { mutate: deleteDMReply, isLoading: isDeleteDMReplyLoading } =
+    useDeleteDMReplyMutation();
   const { mutate: addFeelToChat } = useAddPostReactMutation();
   const { mutate: addFeelToReply } = useAddReplyReactMutation();
   const { mutate: addDMReplyFeel } = useAddDMReplyReactMutation();
+  const deleteLoading =
+    isDeleteReplyLoading ||
+    isDeleteChatMessageLoading ||
+    isDeleteDMReplyLoading;
+
   const {
     show: showPost,
     hide: hidePost,
@@ -109,8 +113,6 @@ export default function ReplyMessageOptions(props: {
       onOpenChange(false);
     }
 
-    setDeletePending();
-
     try {
       if (isDMorMultiDM) {
         deleteDMReply({
@@ -134,7 +136,6 @@ export default function ReplyMessageOptions(props: {
     } catch (e) {
       console.log('Failed to delete message', e);
     }
-    setReady();
   };
 
   const onCopy = useCallback(() => {
@@ -402,7 +403,7 @@ export default function ReplyMessageOptions(props: {
         open={deleteOpen}
         setOpen={setDeleteOpen}
         confirmText="Delete"
-        loading={isDeletePending}
+        loading={deleteLoading}
       />
     </>
   );