refetch user on save

ohcnetwork · Aug 15, 2024 · cc51d0e · cc51d0e
1 parent e2b826a
commit cc51d0e
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 13 deletions.
diff --git a/src/Common/hooks/useAuthUser.ts b/src/Common/hooks/useAuthUser.ts
@@ -9,6 +9,7 @@ type AuthContextType = {
   user: UserModel | undefined;
   signIn: (creds: LoginCredentials) => Promise<SignInReturnType>;
   signOut: () => Promise<void>;
+  refetchUser: () => Promise<RequestResult<UserModel>>;
 };
 
 export const AuthUserContext = createContext<AuthContextType | null>(null);

diff --git a/src/Components/Users/ProfilePicUploadModal.tsx b/src/Components/Users/ProfilePicUploadModal.tsx
@@ -24,9 +24,16 @@ interface Props {
   onClose: () => void;
   onSave?: () => void;
   onDelete?: () => void;
+  onRefetch?: () => void;
 }
 
-const ProfilePicUploadModal = ({ open, onClose, onSave, onDelete }: Props) => {
+const ProfilePicUploadModal = ({
+  open,
+  onClose,
+  onSave,
+  onDelete,
+  onRefetch,
+}: Props) => {
   const user = useAuthUser();
   const [isUploading, setIsUploading] = useState<boolean>(false);
   const [selectedFile, setSelectedFile] = useState<File>();
@@ -93,6 +100,7 @@ const ProfilePicUploadModal = ({ open, onClose, onSave, onDelete }: Props) => {
       onSave?.();
       closeModal();
       setUploadPercent(0);
+      onRefetch?.();
     }
   }, [uploadPercent]);
 
@@ -304,7 +312,7 @@ const ProfilePicUploadModal = ({ open, onClose, onSave, onDelete }: Props) => {
               )}
             </div>
             {/* buttons for mobile screens */}
-            <div className="m-4 flex flex-col justify-evenly sm:hidden ">
+            <div className="m-4 flex flex-col justify-evenly sm:hidden">
               <div>
                 {!previewImage ? (
                   <ButtonV2
@@ -370,15 +378,15 @@ const ProfilePicUploadModal = ({ open, onClose, onSave, onDelete }: Props) => {
               </div>
             </div>
             {/* buttons for laptop screens */}
-            <div className={`${isLaptopScreen ? " " : " hidden "}`}>
+            <div className={`${isLaptopScreen ? " " : "hidden"}`}>
               <div className="m-4 flex lg:hidden">
                 <ButtonV2 onClick={handleSwitchCamera}>
                   <CareIcon icon="l-camera-change" className="text-lg" />
                   {`${t("switch")} ${t("camera")}`}
                 </ButtonV2>
               </div>
 
-              <div className="flex justify-end  gap-2 p-4">
+              <div className="flex justify-end gap-2 p-4">
                 <div>
                   {!previewImage ? (
                     <>

diff --git a/src/Components/Users/UserProfile.tsx b/src/Components/Users/UserProfile.tsx
@@ -113,10 +113,9 @@ const editFormReducer = (state: State, action: Action) => {
 
 export default function UserProfile() {
   const { t } = useTranslation();
-  const { signOut } = useAuthContext();
+  const { signOut, refetchUser } = useAuthContext();
   const [states, dispatch] = useReducer(editFormReducer, initialState);
   const [editProfilePic, setEditProfilePic] = useState(false);
-  const [imageKey, setImageKey] = useState(Date.now());
   const [updateStatus, setUpdateStatus] = useState({
     isChecking: false,
     isUpdateAvailable: false,
@@ -459,13 +458,10 @@ export default function UserProfile() {
     <div>
       <ProfilePicUploadModal
         open={editProfilePic}
-        onSave={() =>
-          userData?.read_profile_picture_url
-            ? setImageKey(Date.now())
-            : refetchUserData()
-        }
+        onSave={() => refetchUser()}
         onClose={() => setEditProfilePic(false)}
         onDelete={() => refetchUserData()}
+        onRefetch={() => refetchUserData()}
       />
       <div className="p-10 lg:p-16">
         <div className="lg:grid lg:grid-cols-3 lg:gap-6">
@@ -486,7 +482,7 @@ export default function UserProfile() {
                     className="size-24 rounded-lg object-cover"
                     src={
                       userData?.read_profile_picture_url
-                        ? `${userData?.read_profile_picture_url}?imgKey=${imageKey}`
+                        ? `${userData?.read_profile_picture_url}?imgKey=${Date.now()}`
                         : "/images/empty_avatar.jpg"
                     }
                     alt=""

diff --git a/src/Providers/AuthUserProvider.tsx b/src/Providers/AuthUserProvider.tsx
@@ -87,7 +87,14 @@ export default function AuthUserProvider({ children, unauthorized }: Props) {
   }
 
   return (
-    <AuthUserContext.Provider value={{ signIn, signOut, user }}>
+    <AuthUserContext.Provider
+      value={{
+        signIn,
+        signOut,
+        user,
+        refetchUser: refetch,
+      }}
+    >
       {!res.ok || !user ? unauthorized : children}
     </AuthUserContext.Provider>
   );