From 00f1d2b739b03b2daefa8b46b56edefc14125b1c Mon Sep 17 00:00:00 2001
From: Weiko <corentin@twenty.com>
Date: Thu, 24 Aug 2023 16:34:46 +0200
Subject: [PATCH] Fix color scheme update (#1298)

* Fix color scheme update

* remove as

* fix
---
 .../modules/ui/theme/hooks/useColorScheme.ts  | 28 +++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/front/src/modules/ui/theme/hooks/useColorScheme.ts b/front/src/modules/ui/theme/hooks/useColorScheme.ts
index e23d359ed..0fc523fdc 100644
--- a/front/src/modules/ui/theme/hooks/useColorScheme.ts
+++ b/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(() => {
-    if (!currentUser?.settings?.colorScheme) {
-      // Use system color scheme if user is not logged in or has no settings
-      return ColorScheme.System;
-    }
-
-    return currentUser.settings.colorScheme;
-  }, [currentUser?.settings?.colorScheme]);
+  const colorScheme = !currentUser?.settings?.colorScheme
+    ? ColorScheme.System
+    : 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 {