Merge pull request #611 from idurar/feat/add-lang-select-in-login-page

🚀 Add ChanLaguage in Login page
idurar · Oct 29, 2023 · a5402b9 · a5402b9
2 parents a44ec0b + ccadd43
commit a5402b9
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 44 deletions.
diff --git a/frontend/src/app/HeaderContent/index.jsx b/frontend/src/app/HeaderContent/index.jsx
@@ -1,15 +1,12 @@
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Link } from 'react-router-dom';
-import { Avatar, Dropdown, Select } from 'antd';
-
-import { languages } from '@/utils';
+import { Avatar, Dropdown } from 'antd';
 
 // import Notifications from '@/components/Notification';
 
 import { AppstoreOutlined, SettingOutlined, LogoutOutlined } from '@ant-design/icons';
 
-import { selectLangCode } from '@/redux/translate/selectors';
 import { checkImage } from '@/request';
 
 import { selectCurrentAdmin } from '@/redux/auth/selectors';
@@ -19,12 +16,13 @@ import history from '@/utils/history';
 import { BASE_URL } from '@/config/serverApiConfig';
 
 import useLanguage from '@/lang/useLanguage';
+import ChangeLanguage from '@/components/ChangeLanguage';
 
 export default function HeaderContent() {
   const currentAdmin = useSelector(selectCurrentAdmin);
 
   const dispatch = useDispatch();
-  const langCode = useSelector(selectLangCode);
+
   const translate = useLanguage();
 
   const srcImgProfile = checkImage(BASE_URL + currentAdmin?.photo)
@@ -117,35 +115,7 @@ export default function HeaderContent() {
         }}
       />
 
-      <Select
-        showSearch
-        placeholder={translate('select language')}
-        defaultValue={langCode}
-        style={{ marginTop: '15px', width: '120px', float: 'right' }}
-        optionFilterProp="children"
-        filterOption={(input, option) => (option?.label ?? '').includes(input)}
-        filterSort={(optionA, optionB) =>
-          (optionA?.label ?? '').toLowerCase().startsWith((optionB?.label ?? '').toLowerCase())
-        }
-        onSelect={(value) => {
-          dispatch(translateAction.translate(value));
-        }}
-      >
-        {languages.map((language) => (
-          <Select.Option
-            key={language.value}
-            value={language.value}
-            label={language.label.toLowerCase()}
-          >
-            <div className="demo-option-label-item">
-              <span role="img" aria-label={language.label}>
-                {language.icon}
-              </span>
-              {language.label}
-            </div>
-          </Select.Option>
-        ))}
-      </Select>
+      <ChangeLanguage />
     </div>
   );
 }
diff --git a/frontend/src/components/ChangeLanguage/index.jsx b/frontend/src/components/ChangeLanguage/index.jsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { languages } from '@/utils';
+import { selectLangCode } from '@/redux/translate/selectors';
+
+// import Notifications from '@/components/Notification';
+
+import { translateAction } from '@/redux/translate/actions';
+
+import useLanguage from '@/lang/useLanguage';
+
+import { Select } from 'antd';
+
+const ChangeLanguage = () => {
+  const translate = useLanguage();
+  const dispatch = useDispatch();
+
+  const langCode = useSelector(selectLangCode);
+
+  return (
+    <Select
+      showSearch
+      placeholder={translate('select language')}
+      defaultValue={langCode}
+      style={{ marginTop: '15px', width: '120px', float: 'right' }}
+      optionFilterProp="children"
+      filterOption={(input, option) => (option?.label ?? '').includes(input)}
+      filterSort={(optionA, optionB) =>
+        (optionA?.label ?? '').toLowerCase().startsWith((optionB?.label ?? '').toLowerCase())
+      }
+      onSelect={(value) => {
+        dispatch(translateAction.translate(value));
+      }}
+    >
+      {languages.map((language) => (
+        <Select.Option
+          key={language.value}
+          value={language.value}
+          label={language.label.toLowerCase()}
+        >
+          <div className="demo-option-label-item">
+            <span role="img" aria-label={language.label}>
+              {language.icon}
+            </span>
+            {language.label}
+          </div>
+        </Select.Option>
+      ))}
+    </Select>
+  );
+};
+
+export default ChangeLanguage;
diff --git a/frontend/src/pages/Login.jsx b/frontend/src/pages/Login.jsx
@@ -1,15 +1,18 @@
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
+// import Notifications from '@/components/Notification';
+
+import useLanguage from '@/lang/useLanguage';
+
 import { Form, Button, Layout, Col, Divider, Typography } from 'antd';
 
 import { login } from '@/redux/auth/actions';
 import { selectAuth } from '@/redux/auth/selectors';
 import LoginForm from '@/forms/LoginForm';
 import AuthLayout from '@/layout/AuthLayout';
 import SideContent from '@/components/SideContent';
-
-import useLanguage from '@/lang/useLanguage';
+import ChangeLanguage from '@/components/ChangeLanguage';
 
 import logo from '@/style/images/logo.png';
 
@@ -29,7 +32,14 @@ const LoginPage = () => {
       <AuthLayout sideContent={<SideContent />}>
         <Content
           style={{
-            padding: '200px 30px 30px',
+            padding: '10px 20px',
+          }}
+        >
+          <ChangeLanguage />
+        </Content>
+        <Content
+          style={{
+            padding: '140px 30px 30px',
             maxWidth: '440px',
             margin: '0 auto',
           }}

diff --git a/frontend/src/redux/translate/actions.js b/frontend/src/redux/translate/actions.js
@@ -33,7 +33,7 @@ export const translateAction = {
       result: data,
       langCode: value,
       isLoading: false,
-      isSuccess: true,
+      isSuccess: false,
     };
     window.localStorage.setItem('translate', JSON.stringify(LANG_STATE));
     if (data) {

diff --git a/frontend/src/redux/translate/reducer.js b/frontend/src/redux/translate/reducer.js
@@ -1,13 +1,9 @@
 import * as actionTypes from './types';
-import lang from '@/lang/en_us';
+import en_us from '@/lang/en_us';
 import storePersist from '../storePersist';
 
-const INITIAL_LANG_STATE = {
-  ...lang,
-};
-
 const LANG_INITIAL_STATE = {
-  result: INITIAL_LANG_STATE,
+  result: en_us,
   langCode: 'en_us',
   isLoading: false,
   isSuccess: false,