feat: Save Selected Language in Local Storage (#1131)

Author: AvivAbachi

src/layout/ThemeContext.tsx

@@ -3,73 +3,91 @@ import { enUS, heIL } from '@mui/material/locale'
 import { LocalizationProvider } from '@mui/x-date-pickers'
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'
 import { enUS as dateEnUS, heIL as dateHeIL } from '@mui/x-date-pickers/locales'
-import { ConfigProvider, theme } from 'antd'
+import { ConfigProvider, ConfigProviderProps, theme as antdlgorithm } from 'antd'
+import antdEnUS from 'antd/es/locale/en_US'
 import antdHeIL from 'antd/es/locale/he_IL'
-import { FC, PropsWithChildren, createContext, useContext, useMemo } from 'react'
+import {
+  PropsWithChildren,
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+} from 'react'
 import { useTranslation } from 'react-i18next'
+import { useLocalStorage } from 'usehooks-ts'
 import dayjs from 'src/dayjs'
-import { useLocalStorage } from 'src/locale/useLocalStorage'
 
 export interface ThemeContextInterface {
   toggleTheme: () => void
   toggleLanguage: () => void
   isDarkTheme?: boolean
 }
 
-const ThemeContext = createContext({} as ThemeContextInterface)
+const ThemeContext = createContext<ThemeContextInterface>({} as ThemeContextInterface)
 
-const { defaultAlgorithm, darkAlgorithm } = theme
-
-export const ThemeProvider: FC<PropsWithChildren> = ({ children }) => {
-  const [isDarkTheme, setIsDarkTheme] = useLocalStorage<boolean>('isDarkTheme')
+export const ThemeProvider = ({ children }: PropsWithChildren) => {
+  const [isDarkTheme, setIsDarkTheme] = useLocalStorage<boolean>('isDarkTheme', false)
+  const [language, setLanguage] = useLocalStorage<string>('language', 'he')
   const { i18n } = useTranslation()
 
-  const toggleTheme = () => {
-    setIsDarkTheme((prevTheme: boolean) => !prevTheme)
-  }
+  const toggleTheme = useCallback(() => setIsDarkTheme((prev) => !prev), [setIsDarkTheme])
 
-  const toggleLanguage = () => {
-    const newLanguage = i18n.language === 'en' ? 'he' : 'en'
+  const toggleLanguage = useCallback(() => {
+    const newLanguage = language === 'en' ? 'he' : 'en'
+    setLanguage(newLanguage)
     i18n.changeLanguage(newLanguage)
-  }
+  }, [language, i18n, setLanguage])
+
+  const contextValue = useMemo(
+    () => ({
+      isDarkTheme,
+      toggleLanguage,
+      toggleTheme,
+    }),
+    [isDarkTheme, toggleLanguage, toggleTheme],
+  )
 
-  const contextValue = {
-    isDarkTheme,
-    toggleLanguage,
-    toggleTheme,
-  }
+  useEffect(() => {
+    const forceLang = language === 'en' ? 'en' : 'he'
+    if (i18n.language !== forceLang) i18n.changeLanguage(forceLang)
+    if (language !== forceLang) setLanguage(forceLang)
+  }, [language, i18n, setLanguage])
 
-  // Re-create the theme when the theme changes or the language changes
-  const theme = useMemo(() => {
-    const direction = i18n.language === 'he' ? 'rtl' : 'ltr'
+  const muiTheme = useMemo(() => {
+    const isEnglish = language === 'en'
+    const direction = isEnglish ? 'ltr' : 'rtl'
     document.documentElement.dir = direction
-    document.documentElement.lang = i18n.language
-    dayjs.locale(i18n.language)
+    document.documentElement.lang = language || 'he'
+    dayjs.locale(language)
     return createTheme(
       {
         direction,
-        palette: {
-          mode: isDarkTheme ? 'dark' : 'light',
-        },
+        palette: { mode: isDarkTheme ? 'dark' : 'light' },
       },
-      i18n.language === 'he' ? heIL : enUS,
-      i18n.language === 'he' ? dateHeIL : dateEnUS,
+      isEnglish ? enUS : heIL,
+      isEnglish ? dateEnUS : dateHeIL,
     )
-  }, [isDarkTheme, i18n.language])
+  }, [isDarkTheme, language])
+
+  const antdTheme = useMemo<ConfigProviderProps>(() => {
+    return {
+      direction: language === 'en' ? 'ltr' : 'rtl',
+      locale: language === 'en' ? antdEnUS : antdHeIL,
+      theme: {
+        algorithm: isDarkTheme ? antdlgorithm.darkAlgorithm : antdlgorithm.defaultAlgorithm,
+        token: {
+          colorBgBase: isDarkTheme ? '#1c1d1c' : '#ffffff',
+          colorTextBase: isDarkTheme ? '#ffffff' : '#000000',
+        },
+      },
+    }
+  }, [isDarkTheme, language])
 
   return (
-    <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={i18n.language}>
-      <ConfigProvider
-        direction={i18n.language === 'he' ? 'rtl' : 'ltr'}
-        locale={antdHeIL}
-        theme={{
-          algorithm: isDarkTheme ? darkAlgorithm : defaultAlgorithm,
-          token: {
-            colorBgBase: isDarkTheme ? '#1c1d1c' : '#ffffff',
-            colorTextBase: isDarkTheme ? '#ffffff' : '#000000',
-          },
-        }}>
-        <MuiThemeProvider theme={theme}>
+    <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale={language}>
+      <ConfigProvider {...antdTheme}>
+        <MuiThemeProvider theme={muiTheme}>
           <ScopedCssBaseline enableColorScheme>
             <ThemeContext.Provider value={contextValue}>{children}</ThemeContext.Provider>
           </ScopedCssBaseline>