Fix Bugs in User and Facility Avatar Upload and Deletion Workflow

src/components/Common/AvatarEditModal.tsx

@@ -22,7 +22,7 @@
   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;
 }
@@ -134,14 +134,20 @@
     } finally {
       setIsCaptureImgBeingUploaded(false);
       setIsProcessing(false);
+      setSelectedFile(undefined);
     }
   };
 
   const deleteAvatar = async () => {
     setIsProcessing(true);
-    await handleDelete(() => {
-      setIsProcessing(false);
-    });
+    await handleDelete(
+      () => {
+        setIsProcessing(false);
+        setPreview(undefined);
+        setPreviewImage(null);
+      },
+      () => setIsProcessing(false),
+    );
   };
 
   const dragProps = useDragAndDrop();
@@ -189,11 +195,11 @@
         <div className="flex max-h-screen min-h-96 w-full flex-col overflow-auto">
           {!isCameraOpen ? (
             <>
-              {preview || imageUrl ? (
+              {imageUrl || preview ? (
                 <>
                   <div className="flex flex-1 items-center justify-center rounded-lg">
                     <img
-                      src={preview || imageUrl}
+                      src={imageUrl || preview}
                       alt="cover-photo"
                       className="h-full w-full object-cover"
                     />

src/components/Facility/FacilityHome.tsx

@@ -136,7 +136,7 @@ export const FacilityHome = ({ facilityId }: Props) => {
     formData.append("cover_image", file);
     const url = `${careConfig.apiUrl}/api/v1/facility/${facilityId}/cover_image/`;
 
-    uploadFile(
+    await uploadFile(
       url,
       formData,
       "POST",
@@ -159,9 +159,13 @@ export const FacilityHome = ({ facilityId }: Props) => {
       },
     );
   };
-  const handleCoverImageDelete = async (onError: () => void) => {
+  const handleCoverImageDelete = async (
+    onSuccess: () => void,
+    onError: () => void,
+  ) => {
     try {
       await deleteAvatar();
+      onSuccess();
     } catch {
       onError();
     }

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