Fix Bugs in User and Facility Avatar Upload and Deletion Workflow

src/components/Common/AvatarEditModal.tsx

@@ -26,8 +26,12 @@ interface Props {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   imageUrl?: string;
-  handleUpload: (file: File, onError: () => void) => Promise<void>;
-  handleDelete: (onError: () => void) => Promise<void>;
+  handleUpload: (
+    file: File,
+    onSuccess: () => void,
+    onError: () => void,
+  ) => Promise<void>;
+  handleDelete: (onSuccess: () => void, onError: () => void) => Promise<void>;
   hint?: React.ReactNode;
 }
 
@@ -128,24 +132,36 @@ const AvatarEditModal = ({
 
       setIsProcessing(true);
       setIsCaptureImgBeingUploaded(true);
-      await handleUpload(selectedFile, () => {
-        setSelectedFile(undefined);
-        setPreview(undefined);
-        setPreviewImage(null);
-        setIsCaptureImgBeingUploaded(false);
-        setIsProcessing(false);
-      });
+      await handleUpload(
+        selectedFile,
+        () => {
+          setPreview(undefined);
+        },
+        () => {
+          setPreview(undefined);
+          setPreviewImage(null);
+          setIsCaptureImgBeingUploaded(false);
+          setIsProcessing(false);
+        },
+      );
     } finally {
+      setPreview(undefined);
       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();

src/components/Facility/FacilityHome.tsx

@@ -142,24 +142,29 @@ export const FacilityHome = ({ facilityId }: Props) => {
     },
   });
 
-  const handleCoverImageUpload = async (file: File, onError: () => void) => {
+  const handleCoverImageUpload = async (
+    file: File,
+    onSuccess: () => void,
+    onError: () => void,
+  ) => {
     const formData = new FormData();
     formData.append("cover_image", file);
     const url = `${careConfig.apiUrl}/api/v1/facility/${facilityId}/cover_image/`;
 
-    uploadFile(
+    await uploadFile(
       url,
       formData,
       "POST",
       { Authorization: getAuthorizationHeader() },
       async (xhr: XMLHttpRequest) => {
         if (xhr.status === 200) {
+          setEditCoverImage(false);
           await sleep(1000);
           queryClient.invalidateQueries({
             queryKey: ["facility", facilityId],
           });
           toast.success(t("cover_image_updated"));
-          setEditCoverImage(false);
+          onSuccess();
         } else {
           onError();
         }
@@ -170,9 +175,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 },
     }),
@@ -52,7 +52,11 @@ export default function UserAvatar({ username }: { username: string }) {
     return <Loading />;
   }
 
-  const handleAvatarUpload = async (file: File, onError: () => void) => {
+  const handleAvatarUpload = async (
+    file: File,
+    onSuccess: () => void,
+    onError: () => void,
+  ) => {
     const formData = new FormData();
     formData.append("profile_picture", file);
     const url = `${careConfig.apiUrl}/api/v1/users/${userData.username}/profile_picture/`;
@@ -64,6 +68,7 @@ export default function UserAvatar({ username }: { username: string }) {
       { Authorization: getAuthorizationHeader() },
       async (xhr: XMLHttpRequest) => {
         if (xhr.status === 200) {
+          setEditAvatar(false);
           await sleep(1000);
           queryClient.invalidateQueries({
             queryKey: ["getUserDetails", username],
@@ -72,7 +77,6 @@ export default function UserAvatar({ username }: { username: string }) {
             queryClient.invalidateQueries({ queryKey: ["currentUser"] });
           }
           toast.success(t("avatar_updated_success"));
-          setEditAvatar(false);
         }
       },
       null,
@@ -82,13 +86,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