feat: updated theme logic to follow the system setting

dastrong-codiga · dastrong-codiga · commit 57a8216bb526 · 2022-09-08T19:15:46.000-07:00
diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
@@ -1,5 +1,5 @@
 import { ApolloProvider } from '@apollo/client';
-import { ChakraProvider } from '@chakra-ui/react';
+import { ChakraProvider, ColorModeScript } from '@chakra-ui/react';
 import { theme } from '@codiga/components';
 import { MemoryRouter as Router, Routes, Route } from 'react-router-dom';
 
@@ -26,12 +26,11 @@ import Filters from './components/Filters/Filters';
 import { UserProvider } from './components/UserContext';
 import { ThemeProvider } from './components/ThemeContext';
 import { FiltersProvider } from './components/FiltersContext';
-import ViewSnippet from './pages/ViewSnippet';
-import ViewCookbookSnippets from './pages/ViewCookbookSnippets';
 
 export default function App() {
   return (
     <ApolloProvider client={client}>
+      <ColorModeScript initialColorMode="system" />
       <ChakraProvider theme={theme}>
         <UserProvider>
           <ThemeProvider>
diff --git a/src/renderer/components/ThemeContext/ThemeContext.tsx b/src/renderer/components/ThemeContext/ThemeContext.tsx
@@ -1,22 +1,7 @@
 import { useContext, createContext, ReactNode, useEffect } from 'react';
-import { useMutation, useQuery } from '@apollo/client';
 import { useColorMode } from '@chakra-ui/react';
-import { useToast } from '@codiga/components';
-
-import { useUser } from '../UserContext';
-import { User } from '../../types/userTypes';
-import { GET_USER_PREFERENCES } from '../../graphql/queries';
-import {
-  RemoveUserPreferenceData,
-  RemoveUserPreferenceVariables,
-  REMOVE_USER_PREFERENCE,
-  UpdateUserPreferenceData,
-  UpdateUserPreferenceVariables,
-  UPDATE_USER_PREFERENCE,
-} from '../../graphql/mutations';
 import useLocalStorage from '../../hooks/useLocalStorage';
 import { CODIGA_THEME } from '../../lib/config';
-import { UserPreferenceKey } from '../../lib/constants';
 
 enum Theme {
   THEME_DARK = 'theme-dark',
@@ -29,16 +14,13 @@ type ThemeType = Theme.THEME_DARK | Theme.THEME_LIGHT;
 type CacheStorageThemeType = (theme: ThemeType) => void;
 
 type ThemeContextType = {
-  changeToDarkTheme: () => Promise<void>;
-  changeToLightTheme: () => Promise<void>;
+  changeToDarkTheme: () => void;
+  changeToLightTheme: () => void;
 };
 
 const ThemeContext = createContext({} as ThemeContextType);
 
 export const ThemeProvider = ({ children }: { children: ReactNode }) => {
-  const toast = useToast();
-  const { id: userId } = useUser();
-
   // CHAKRA'S THEME
   const { setColorMode } = useColorMode();
   // USER'S LOCAL THEME PREFERENCE
@@ -47,25 +29,6 @@ export const ThemeProvider = ({ children }: { children: ReactNode }) => {
     Theme.THEME_LIGHT
   ) as [ThemeType, CacheStorageThemeType, () => string];
 
-  /**
-   * If the user is logged in, we check if they have a saved theme preference.
-   * If they do, we'll update Chakra and the local version
-   */
-  useQuery<{ user: Partial<User> }>(GET_USER_PREFERENCES, {
-    skip: !!userId,
-    onCompleted: (respData) => {
-      if (respData?.user?.preferences) {
-        const savedTheme = respData.user.preferences
-          .map((preference) => preference.key)
-          .includes(UserPreferenceKey.Theme)
-          ? Theme.THEME_DARK
-          : Theme.THEME_LIGHT;
-        cacheStorageTheme(savedTheme);
-        setColorMode(savedTheme === Theme.THEME_DARK ? 'dark' : 'light');
-      }
-    },
-  });
-
   /**
    * Because a user can access the app while not authenticated,
    * we need to update the theme based on locally stored settings
@@ -76,57 +39,14 @@ export const ThemeProvider = ({ children }: { children: ReactNode }) => {
     setColorMode(storedTheme === Theme.THEME_DARK ? 'dark' : 'light');
   }, [cacheStorageTheme, hydrateValue, setColorMode]);
 
-  // used to set a DARK theme
-  const [removeUserPreference] = useMutation<
-    RemoveUserPreferenceData,
-    RemoveUserPreferenceVariables
-  >(REMOVE_USER_PREFERENCE);
-
-  // used to set a LIGHT theme
-  const [updateUserPreference] = useMutation<
-    UpdateUserPreferenceData,
-    UpdateUserPreferenceVariables
-  >(UPDATE_USER_PREFERENCE);
-
-  const changeToDarkTheme = async () => {
+  const changeToDarkTheme = () => {
     cacheStorageTheme(Theme.THEME_DARK);
     setColorMode('dark');
-    if (!userId) return;
-    try {
-      await updateUserPreference({
-        variables: {
-          key: UserPreferenceKey.Theme,
-          value: Theme.THEME_DARK,
-        },
-        refetchQueries: [{ query: GET_USER_PREFERENCES }],
-      });
-    } catch (err) {
-      toast({
-        status: 'error',
-        description:
-          'An error occurred while updating your theme. Please try again.',
-      });
-    }
   };
 
-  const changeToLightTheme = async () => {
+  const changeToLightTheme = () => {
     cacheStorageTheme(Theme.THEME_LIGHT);
     setColorMode('light');
-    if (!userId) return;
-    try {
-      await removeUserPreference({
-        variables: {
-          key: UserPreferenceKey.Theme,
-        },
-        refetchQueries: [{ query: GET_USER_PREFERENCES }],
-      });
-    } catch (err) {
-      toast({
-        status: 'error',
-        description:
-          'An error occurred while updating your theme. Please try again.',
-      });
-    }
   };
 
   const themeContext = {
