Language selector now works for changing the direction automatically

Author: githubsaturn

src/App.tsx

@@ -7,6 +7,7 @@ import thunk from 'redux-thunk'
 import Login from './containers/Login'
 import PageRoot from './containers/PageRoot'
 import DarkModeContext from './contexts/DarkModeContext'
+import LanguageContext from './contexts/LanguageContext'
 import reducers from './redux/reducers'
 import './styles/style.css'
 import CrashReporter from './utils/CrashReporter'
@@ -36,12 +37,11 @@ function App() {
     const [isDarkMode, setIsDarkMode] = useState(
         StorageHelper.getDarkModeFromLocalStorage()
     )
-
-    const currentLanguageOption = getCurrentLanguageOption()
+    const [currentLang, setCurrentLang] = useState(getCurrentLanguageOption())
 
     return (
         <ConfigProvider
-            direction={currentLanguageOption.rtl ? 'rtl' : 'ltr'}
+            direction={currentLang.rtl ? 'rtl' : 'ltr'}
             theme={{
                 algorithm: isDarkMode ? darkAlgorithm : defaultAlgorithm,
                 token: {
@@ -52,21 +52,29 @@ function App() {
                         'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'`,
                 },
             }}
-            locale={currentLanguageOption.antdLocale}
+            locale={currentLang.antdLocale}
         >
-            <DarkModeContext.Provider
+            <LanguageContext.Provider
                 value={{
-                    isDarkMode,
-                    setIsDarkMode: (value) => {
-                        setIsDarkMode(value)
-                        StorageHelper.setDarkModeInLocalStorage(value)
+                    setCurrentLanguageOptionContext: (value) => {
+                        setCurrentLang(value)
                     },
                 }}
             >
-                <Provider store={store}>
-                    <MainComponent />
-                </Provider>
-            </DarkModeContext.Provider>
+                <DarkModeContext.Provider
+                    value={{
+                        isDarkMode,
+                        setIsDarkMode: (value) => {
+                            setIsDarkMode(value)
+                            StorageHelper.setDarkModeInLocalStorage(value)
+                        },
+                    }}
+                >
+                    <Provider store={store}>
+                        <MainComponent />
+                    </Provider>
+                </DarkModeContext.Provider>
+            </LanguageContext.Provider>
         </ConfigProvider>
     )
 }

src/containers/global/LanguageSelector.tsx

@@ -1,6 +1,7 @@
 import { Select } from 'antd'
-import { useEffect, useState } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import { useDispatch } from 'react-redux'
+import LanguageContext from '../../contexts/LanguageContext'
 import { emitRootKeyChanged } from '../../redux/actions/GlobalActions'
 import {
     getCurrentLanguageOption,
@@ -16,10 +17,14 @@ const LanguageSelector: React.FC<LanguageSelectorProps> = ({ forceReload }) => {
     const [currentLanguage, setCurrentLanguage] = useState(
         getCurrentLanguageOption().value
     )
+
+    const { setCurrentLanguageOptionContext } = useContext(LanguageContext)
+
     const dispatch = useDispatch()
 
     const handleChange = (value: string) => {
-        setCurrentLanguageOption(value)
+        const langOption = setCurrentLanguageOption(value)
+        setCurrentLanguageOptionContext(langOption)
         setCurrentLanguage(value)
         dispatch(emitRootKeyChanged())
         if (forceReload) {

src/contexts/LanguageContext.ts

@@ -0,0 +1,8 @@
+import { createContext } from 'react'
+import { LanguageOption } from '../utils/Language'
+
+const LanguageContext = createContext({
+    setCurrentLanguageOptionContext: (value: LanguageOption) => {},
+})
+
+export default LanguageContext

src/utils/Language.ts

@@ -129,9 +129,13 @@ export function getCurrentLanguageOption() {
     return currentLanguageOption
 }
 
-export function setCurrentLanguageOption(languageAcronym: string) {
+export function setCurrentLanguageOption(
+    languageAcronym: string
+): LanguageOption {
     currentLanguageOption = findLanguageOption(languageAcronym)
     StorageHelper.setLanguageInLocalStorage(currentLanguageOption.value)
+
+    return currentLanguageOption
 }
 
 setCurrentLanguageOption(savedLanguageInBrowser)