reloading user profile on update

src/renderer/src/pages/user/user-content.tsx

@@ -17,9 +17,13 @@ const MAX_MINUTES_TO_SHOW_IN_PLAYTIME = 120;
 
 export interface ProfileContentProps {
   userProfile: UserProfile;
+  updateUserProfile: () => void;
 }
 
-export function UserContent({ userProfile }: ProfileContentProps) {
+export function UserContent({
+  userProfile,
+  updateUserProfile,
+}: ProfileContentProps) {
   const { t, i18n } = useTranslation("user_profile");
 
   const { userDetails, profileBackground, signOut, updateUser } =
@@ -67,6 +71,11 @@ export function UserContent({ userProfile }: ProfileContentProps) {
     navigate("/");
   };
 
+  const handleUpdateUserProfile = async () => {
+    updateUser();
+    updateUserProfile();
+  };
+
   const isMe = userDetails?.id == userProfile.id;
 
   const profileContentBoxBackground = useMemo(() => {
@@ -80,7 +89,7 @@ export function UserContent({ userProfile }: ProfileContentProps) {
       <UserEditProfileModal
         visible={showEditProfileModal}
         onClose={() => setShowEditProfileModal(false)}
-        updateUser={updateUser}
+        updateUser={handleUpdateUserProfile}
         userProfile={userProfile}
       />
 

src/renderer/src/pages/user/user.tsx

@@ -1,5 +1,5 @@
 import { UserProfile } from "@types";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import { setHeaderTitle } from "@renderer/features";
 import { useAppDispatch } from "@renderer/hooks";
@@ -15,7 +15,7 @@ export const User = () => {
 
   const dispatch = useAppDispatch();
 
-  useEffect(() => {
+  const getUserProfile = useCallback(() => {
     window.electron.getUser(userId!).then((userProfile) => {
       if (userProfile) {
         dispatch(setHeaderTitle(userProfile.displayName));
@@ -24,11 +24,22 @@ export const User = () => {
     });
   }, [dispatch, userId]);
 
+  useEffect(() => {
+    getUserProfile();
+  }, [getUserProfile]);
+
+  const handleUpdateProfile = () => {
+    getUserProfile();
+  };
+
   return (
     <SkeletonTheme baseColor={vars.color.background} highlightColor="#444">
       <div className={styles.wrapper}>
         {userProfile ? (
-          <UserContent userProfile={userProfile} />
+          <UserContent
+            userProfile={userProfile}
+            updateUserProfile={handleUpdateProfile}
+          />
         ) : (
           <UserSkeleton />
         )}