diff --git a/ui/src/chat/ChatMessage/ChatMessageOptions.tsx b/ui/src/chat/ChatMessage/ChatMessageOptions.tsx index eefd0bc671..13fdab8ed2 100644 --- a/ui/src/chat/ChatMessage/ChatMessageOptions.tsx +++ b/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} /> ); diff --git a/ui/src/diary/DiaryNoteOptionsDropdown.tsx b/ui/src/diary/DiaryNoteOptionsDropdown.tsx index 4b5b38ba92..1cec93086f 100644 --- a/ui/src/diary/DiaryNoteOptionsDropdown.tsx +++ b/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" /> diff --git a/ui/src/diary/useDiaryActions.ts b/ui/src/diary/useDiaryActions.ts index 0183e74deb..3f4088e3e7 100644 --- a/ui/src/diary/useDiaryActions.ts +++ b/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, diff --git a/ui/src/heap/HeapBlock.tsx b/ui/src/heap/HeapBlock.tsx index 69d80c252e..5cfcb8234f 100644 --- a/ui/src/heap/HeapBlock.tsx +++ b/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?" diff --git a/ui/src/heap/HeapRow.tsx b/ui/src/heap/HeapRow.tsx index f2ba600c2d..9a838117b1 100644 --- a/ui/src/heap/HeapRow.tsx +++ b/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?" diff --git a/ui/src/heap/useCurioActions.ts b/ui/src/heap/useCurioActions.ts index 4b2aa090fc..d00a6971fe 100644 --- a/ui/src/heap/useCurioActions.ts +++ b/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('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, diff --git a/ui/src/replies/ReplyMessageOptions.tsx b/ui/src/replies/ReplyMessageOptions.tsx index 8a8d5f8167..607e779468 100644 --- a/ui/src/replies/ReplyMessageOptions.tsx +++ b/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} /> );