Fix Bugs in User and Facility Avatar Upload and Deletion Workflow

src/components/Common/AvatarEditModal.tsx

@@ -22,7 +22,7 @@ interface Props {
   open: boolean;
   imageUrl?: string;
   handleUpload: (file: File, onError: () => void) => Promise<void>;
-  handleDelete: (onError: () => void) => Promise<void>;
+  handleDelete: (onSuccess: () => void, onError: () => void) => Promise<void>;
   onClose?: () => void;
   hint?: React.ReactNode;
 }
@@ -139,9 +139,14 @@ const AvatarEditModal = ({
 
   const deleteAvatar = async () => {
     setIsProcessing(true);
-    await handleDelete(() => {
-      setIsProcessing(false);
-    });
+    await handleDelete(
+      () => {
+        setIsProcessing(false);
+        setPreview(undefined);
+        setPreviewImage(null);
+      },
+      () => setIsProcessing(false),
+    );
   };
 
   const dragProps = useDragAndDrop();

src/components/Users/UserAvatar.tsx

@@ -27,7 +27,7 @@ export default function UserAvatar({ username }: { username: string }) {
   const authUser = useAuthUser();
   const queryClient = useQueryClient();
 
-  const { mutate: mutateAvatarDelete } = useMutation({
+  const { mutateAsync: mutateAvatarDelete } = useMutation({
     mutationFn: mutate(routes.deleteProfilePicture, {
       pathParams: { username },
     }),
@@ -82,13 +82,18 @@ export default function UserAvatar({ username }: { username: string }) {
     );
   };
 
-  const handleAvatarDelete = async (onError: () => void) => {
+  const handleAvatarDelete = async (
+    onSuccess: () => void,
+    onError: () => void,
+  ) => {
     try {
-      mutateAvatarDelete();
+      await mutateAvatarDelete();
+      onSuccess();
     } catch {
       onError();
     }
   };
+
   return (
     <>
       <AvatarEditModal