fix(web): sync avatar changes immediately after profile update (#5903)

Signed-off-by: Chyna <68607983+chyna-gvng@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

web/src/components/UpdateAccountDialog.tsx

@@ -7,6 +7,7 @@ import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
+import { useAuth } from "@/contexts/AuthContext";
 import { useInstance } from "@/contexts/InstanceContext";
 import { convertFileToBase64 } from "@/helpers/utils";
 import useCurrentUser from "@/hooks/useCurrentUser";
@@ -32,6 +33,7 @@ interface State {
 function UpdateAccountDialog({ open, onOpenChange, onSuccess }: Props) {
   const t = useTranslate();
   const currentUser = useCurrentUser();
+  const { setCurrentUser } = useAuth();
   const { generalSetting: instanceGeneralSetting } = useInstance();
   const { mutateAsync: updateUser } = useUpdateUser();
   const [state, setState] = useState<State>({
@@ -128,7 +130,7 @@ function UpdateAccountDialog({ open, onOpenChange, onSuccess }: Props) {
       if (!isEqual(currentUser?.description, state.description)) {
         updateMask.push("description");
       }
-      await updateUser({
+      const updatedUser = await updateUser({
         user: {
           name: currentUser?.name,
           username: state.username,
@@ -139,6 +141,7 @@ function UpdateAccountDialog({ open, onOpenChange, onSuccess }: Props) {
         },
         updateMask,
       });
+      setCurrentUser(updatedUser);
       toast.success(t("message.update-succeed"));
       onSuccess?.();
       onOpenChange(false);

web/src/contexts/AuthContext.tsx

@@ -19,6 +19,7 @@ interface AuthContextValue extends AuthState {
   initialize: () => Promise<void>;
   logout: () => Promise<void>;
   refetchSettings: () => Promise<void>;
+  setCurrentUser: (user: User | undefined) => void;
 }
 
 const AuthContext = createContext<AuthContextValue | null>(null);
@@ -154,6 +155,24 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     });
   }, [fetchUserSettings]);
 
+  // Sync the updated user to AuthContext and React Query cache after profile changes
+  const setCurrentUser = useCallback(
+    (user: User | undefined) => {
+      const previousUser = queryClient.getQueryData<User>(userKeys.currentUser());
+      setState((prev) => ({ ...prev, currentUser: user }));
+      if (user) {
+        queryClient.setQueryData(userKeys.currentUser(), user);
+        queryClient.setQueryData(userKeys.detail(user.name), user);
+      } else {
+        queryClient.removeQueries({ queryKey: userKeys.currentUser(), exact: true });
+        if (previousUser?.name) {
+          queryClient.removeQueries({ queryKey: userKeys.detail(previousUser.name), exact: true });
+        }
+      }
+    },
+    [queryClient],
+  );
+
   // Memoize context value to prevent unnecessary re-renders of consumers
   const value = useMemo(
     () => ({
@@ -161,8 +180,9 @@ export function AuthProvider({ children }: { children: ReactNode }) {
       initialize,
       logout,
       refetchSettings,
+      setCurrentUser,
     }),
-    [state, initialize, logout, refetchSettings],
+    [state, initialize, logout, refetchSettings, setCurrentUser],
   );
 
   return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;