Fix avatar upload stuck state and update header after changing avatar

src/Utils/request/uploadFile.ts

@@ -3,49 +3,60 @@ import { Dispatch, SetStateAction } from "react";
 import * as Notification from "@/Utils/Notifications";
 import { handleUploadPercentage } from "@/Utils/request/utils";
 
-const uploadFile = (
+const uploadFile = async (
   url: string,
   file: File | FormData,
   reqMethod: string,
   headers: object,
   onLoad: (xhr: XMLHttpRequest) => void,
   setUploadPercent: Dispatch<SetStateAction<number>> | null,
   onError: () => void,
-) => {
-  const xhr = new XMLHttpRequest();
-  xhr.open(reqMethod, url);
+): Promise<void> => {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open(reqMethod, url);
 
-  Object.entries(headers).forEach(([key, value]) => {
-    xhr.setRequestHeader(key, value);
-  });
+    Object.entries(headers).forEach(([key, value]) => {
+      xhr.setRequestHeader(key, value);
+    });
 
-  xhr.onload = () => {
-    onLoad(xhr);
-    if (400 <= xhr.status && xhr.status <= 499) {
-      const error = JSON.parse(xhr.responseText);
-      if (typeof error === "object" && !Array.isArray(error)) {
-        Object.values(error).forEach((msg) => {
-          Notification.Error({ msg: msg || "Something went wrong!" });
-        });
+    xhr.onload = () => {
+      onLoad(xhr);
+      if (400 <= xhr.status && xhr.status <= 499) {
+        let error;
+        try {
+          error = JSON.parse(xhr.responseText);
+        } catch {
+          error = xhr.responseText;
+        }
+        if (typeof error === "object" && !Array.isArray(error)) {
+          Object.values(error).forEach((msg) => {
+            Notification.Error({ msg: msg || "Something went wrong!" });
+          });
+        } else {
+          Notification.Error({ msg: error || "Something went wrong!" });
+        }
+        reject(new Error("Client error"));
       } else {
-        Notification.Error({ msg: error || "Something went wrong!" });
+        resolve();
       }
+    };
+
+    if (setUploadPercent != null) {
+      xhr.upload.onprogress = (event: ProgressEvent) => {
+        handleUploadPercentage(event, setUploadPercent);
+      };
     }
-  };
 
-  if (setUploadPercent != null) {
-    xhr.upload.onprogress = (event: ProgressEvent) => {
-      handleUploadPercentage(event, setUploadPercent);
+    xhr.onerror = () => {
+      Notification.Error({
+        msg: "Network Failure. Please check your internet connectivity.",
+      });
+      onError();
+      reject(new Error("Network error"));
     };
-  }
 
-  xhr.onerror = () => {
-    Notification.Error({
-      msg: "Network Failure. Please check your internet connectivity.",
-    });
-    onError();
-  };
-  xhr.send(file);
+    xhr.send(file);
+  });
 };
-
 export default uploadFile;

src/components/Common/AvatarEditModal.tsx

@@ -114,20 +114,25 @@ const AvatarEditModal = ({
   };
 
   const uploadAvatar = async () => {
-    if (!selectedFile) {
-      closeModal();
-      return;
-    }
+    try {
+      if (!selectedFile) {
+        closeModal();
+        return;
+      }
 
-    setIsProcessing(true);
-    setIsCaptureImgBeingUploaded(true);
-    await handleUpload(selectedFile, () => {
-      setSelectedFile(undefined);
-      setPreview(undefined);
-      setPreviewImage(null);
+      setIsProcessing(true);
+      setIsCaptureImgBeingUploaded(true);
+      await handleUpload(selectedFile, () => {
+        setSelectedFile(undefined);
+        setPreview(undefined);
+        setPreviewImage(null);
+        setIsCaptureImgBeingUploaded(false);
+        setIsProcessing(false);
+      });
+    } finally {
       setIsCaptureImgBeingUploaded(false);
       setIsProcessing(false);
-    });
+    }
   };
 
   const deleteAvatar = async () => {

src/components/Users/UserAvatar.tsx

@@ -19,20 +19,25 @@ import uploadFile from "@/Utils/request/uploadFile";
 import useTanStackQueryInstead from "@/Utils/request/useQuery";
 import { formatDisplayName, sleep } from "@/Utils/utils";
 
-export default function UserAvatar({ username }: { username: string }) {
+export default function UserAvatar({
+  username,
+  refetchUserData,
+}: {
+  username: string;
+  refetchUserData?: () => void;
+}) {
   const { t } = useTranslation();
   const [editAvatar, setEditAvatar] = useState(false);
   const authUser = useAuthUser();
 
-  const {
-    data: userData,
-    loading: isLoading,
-    refetch: refetchUserData,
-  } = useTanStackQueryInstead(routes.getUserDetails, {
-    pathParams: {
-      username: username,
+  const { data: userData, loading: isLoading } = useTanStackQueryInstead(
+    routes.getUserDetails,
+    {
+      pathParams: {
+        username: username,
+      },
     },
-  });
+  );
 
   if (isLoading || !userData) {
     return <Loading />;
@@ -43,7 +48,7 @@ export default function UserAvatar({ username }: { username: string }) {
     formData.append("profile_picture", file);
     const url = `${careConfig.apiUrl}/api/v1/users/${userData.username}/profile_picture/`;
 
-    uploadFile(
+    await uploadFile(
       url,
       formData,
       "POST",
@@ -54,7 +59,7 @@ export default function UserAvatar({ username }: { username: string }) {
       async (xhr: XMLHttpRequest) => {
         if (xhr.status === 200) {
           await sleep(1000);
-          refetchUserData();
+          refetchUserData?.();
           Notification.Success({ msg: t("avatar_updated_success") });
           setEditAvatar(false);
         }
@@ -72,7 +77,7 @@ export default function UserAvatar({ username }: { username: string }) {
     });
     if (res?.ok) {
       Notification.Success({ msg: "Profile picture deleted" });
-      await refetchUserData();
+      refetchUserData?.();
       setEditAvatar(false);
     } else {
       onError();