Fix color scheme update (#1298)

* Fix color scheme update

* remove as

* fix

front/src/modules/ui/theme/hooks/useColorScheme.ts

@@ -1,22 +1,17 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback } from 'react';
 import { useRecoilState } from 'recoil';
 
 import { currentUserState } from '@/auth/states/currentUserState';
 import { ColorScheme, useUpdateUserMutation } from '~/generated/graphql';
 
 export function useColorScheme() {
-  const [currentUser] = useRecoilState(currentUserState);
+  const [currentUser, setCurrentUser] = useRecoilState(currentUserState);
 
   const [updateUser] = useUpdateUserMutation();
 
-  const colorScheme = useMemo(() => {
+  const colorScheme = !currentUser?.settings?.colorScheme
-    if (!currentUser?.settings?.colorScheme) {
+    ? ColorScheme.System
-      // Use system color scheme if user is not logged in or has no settings
+    : currentUser.settings.colorScheme;
-      return ColorScheme.System;
-    }
-
-    return currentUser.settings.colorScheme;
-  }, [currentUser?.settings?.colorScheme]);
 
   const setColorScheme = useCallback(
     async (value: ColorScheme) => {
@@ -50,6 +45,17 @@ export function useColorScheme() {
                   },
                 }
               : undefined,
+          update: (_cache, { data }) => {
+            if (data?.updateUser && currentUser) {
+              setCurrentUser({
+                ...currentUser,
+                settings: {
+                  ...currentUser.settings,
+                  colorScheme: data?.updateUser.settings.colorScheme,
+                },
+              });
+            }
+          },
         });
 
         if (!result.data || result.errors) {
@@ -57,7 +63,7 @@ export function useColorScheme() {
         }
       } catch (err) {}
     },
-    [currentUser, updateUser],
+    [currentUser, updateUser, setCurrentUser],
   );
 
   return {