✨ Add Ant lang ConfigProvider

eltonsoftware · Oct 27, 2023 · de1fe83 · de1fe83
1 parent 94ba528
commit de1fe83
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 11 deletions.
diff --git a/frontend/src/app/index.jsx b/frontend/src/app/index.jsx
@@ -1,14 +1,18 @@
-
+import { useState, useEffect } from 'react';
 import Router from '@/router';
+import enUS from 'antd/es/locale/en_US';
+import zhCN from 'antd/es/locale/zh_CN';
+import frFR from 'antd/es/locale/fr_FR';
 
 import useNetwork from '@/hooks/useNetwork';
 
-import { Layout, notification } from 'antd';
+import { Layout, ConfigProvider } from 'antd';
 
 import Navigation from '@/app/Navigation';
 
 import { useSelector, useDispatch } from 'react-redux';
 import { selectAuth } from '@/redux/auth/selectors';
+import { selectLangCode } from '@/redux/lang/selectors';
 
 import HeaderContent from '@/app/HeaderContent';
 // import { useNetworkState } from "react-use";
@@ -26,23 +30,41 @@ function App() {
   //     description: "Cannot connect to the server, Check your internet network",
   //   });
   // }
-  const dispatch = useDispatch();
 
+  const { isLoggedIn } = useSelector(selectAuth);
+  const langCode = useSelector(selectLangCode);
 
+  const [locale, setLocal] = useState(enUS);
 
+  useEffect(() => {
+    if (langCode === 'fr_FR') {
+      setLocal(frFR);
+    } else {
+      setLocal(enUS);
+    }
 
-  const { isLoggedIn } = useSelector(selectAuth);
+    return () => {
+      return false;
+    };
+  }, [langCode]);
 
-  if (!isLoggedIn) return <Router />;
+  if (!isLoggedIn)
+    return (
+      <ConfigProvider direction="ltr" locale={locale}>
+        <Router />
+      </ConfigProvider>
+    );
   else {
     return (
-      <Layout style={{ minHeight: '100vh' }}>
-        <Navigation />
+      <ConfigProvider direction="ltr" locale={locale}>
         <Layout style={{ minHeight: '100vh' }}>
-          <HeaderContent />
-          <Router isLoggedIn={true} />
+          <Navigation />
+          <Layout style={{ minHeight: '100vh' }}>
+            <HeaderContent />
+            <Router isLoggedIn={true} />
+          </Layout>
         </Layout>
-      </Layout>
+      </ConfigProvider>
     );
   }
 }

diff --git a/frontend/src/redux/lang/actions.js b/frontend/src/redux/lang/actions.js
@@ -21,6 +21,7 @@ export const langAction = {
       dispatch({
         type: actionTypes.REQUEST_SUCCESS,
         payload: data,
+        langCode: 'fr_FR',
       });
       window.localStorage.setItem('lang', JSON.stringify(data));
     } else {

diff --git a/frontend/src/redux/lang/reducer.js b/frontend/src/redux/lang/reducer.js
@@ -7,7 +7,7 @@ const INITIAL_LANG_STATE = {
 
 const INITIAL_STATE = {
   result: INITIAL_LANG_STATE,
-  langCode: 'en_us',
+  langCode: 'en_US',
   isLoading: false,
   isSuccess: false,
 };