feat: enlarge the size of the next button for uploading files and add locale...

feat: enlarge the size of the next button for uploading files and add locale config to global.ts (#195)

feat: enlarge the size of the next button for uploading files
feat: add locale config to global.ts

web/src/global.ts

+import '@/locales/config';

web/src/hooks/loginHooks.ts

+import { useCallback } from 'react';
+import { useDispatch } from 'umi';
+
+export interface ILoginRequestBody {
+  email: string;
+  password: string;
+}
+
+export interface IRegisterRequestBody extends ILoginRequestBody {
+  nickname: string;
+}
+
+export const useLogin = () => {
+  const dispatch = useDispatch();
+
+  const login = useCallback(
+    (requestBody: ILoginRequestBody) => {
+      // TODO: Type needs to be improved
+      return dispatch<any>({
+        type: 'loginModel/login',
+        payload: requestBody,
+      });
+    },
+    [dispatch],
+  );
+
+  return login;
+};
+
+export const useRegister = () => {
+  const dispatch = useDispatch();
+
+  const register = useCallback(
+    (requestBody: IRegisterRequestBody) => {
+      return dispatch<any>({
+        type: 'loginModel/register',
+        payload: requestBody,
+      });
+    },
+    [dispatch],
+  );
+
+  return register;
+};

web/src/locales/config.ts

@@ -5,20 +5,20 @@ import translation_en from './en.json';
 import translation_zh from './zh.json';
 
 const resources = {
-    en: {
-        translation: translation_en,
-    },
-    zh: {
-        translation: translation_zh,
-    },
+  en: {
+    translation: translation_en,
+  },
+  zh: {
+    translation: translation_zh,
+  },
 };
 
 i18n.use(initReactI18next).init({
-    resources,
-    lng: 'zh',
-    interpolation: {
-        escapeValue: false,
-    },
+  resources,
+  lng: 'en',
+  interpolation: {
+    escapeValue: false,
+  },
 });
 
 export default i18n;

web/src/locales/en.json

 {
-    "header": {
-        "register": "Register",
-        "signin": "Sign In",
-        "home": "Home",
-        "setting": "用户设置",
-        "logout": "登出"
-    },
-    "footer": {
-        "detail": "All rights reserved @ React"
-    },
-    "layout": {
-        "file": "file",
-        "knowledge": "knowledge",
-        "chat": "chat"
-    },
-    "setting": {
-        "btn": "en"
-    }
-}
+  "login": { "login": "Sign in" },
+  "header": {
+    "register": "Register",
+    "signin": "Sign in",
+    "home": "Home",
+    "setting": "用户设置",
+    "logout": "登出"
+  },
+  "footer": {
+    "detail": "All rights reserved @ React"
+  },
+  "layout": {
+    "file": "file",
+    "knowledge": "knowledge",
+    "chat": "chat"
+  },
+  "setting": {
+    "btn": "en"
+  }
\ No newline at end of file
+}

web/src/locales/zh.json

 {
-    "header": {
-        "register": "注册",
-        "signin": "登陆",
-        "home": "首页",
-        "setting": "user setting",
-        "logout": "logout"
-    },
-    "footer": {
-        "detail": "版权所有 @ React"
-    },
-    "layout": {
-        "file": "文件",
-        "knowledge": "知识库",
-        "chat": "聊天"
-    },
-    "setting": {
-        "btn": "中文"
-    }
-}
+  "login": { "login": "登录" },
+  "header": {
+    "register": "注册",
+    "signin": "登陆",
+    "home": "首页",
+    "setting": "user setting",
+    "logout": "logout"
+  },
+  "footer": {
+    "detail": "版权所有 @ React"
+  },
+  "layout": {
+    "file": "文件",
+    "knowledge": "知识库",
+    "chat": "聊天"
+  },
+  "setting": {
+    "btn": "中文"
+  }
\ No newline at end of file
+}

web/src/pages/add-knowledge/components/knowledge-dataset/knowledge-upload-file/index.less

 .uploadWrapper {
   display: flex;
   flex-direction: column;
-  padding: 32px;
+  padding: 64px 32px 32px;
   height: 100%;
   .backToList {
+    display: none;
     padding-bottom: 60px;
   }
   .footer {
-    text-align: right;
+    text-align: center;
     padding-top: 16px;
     .nextButton {
-      background-color: @purple;
+      // background-color: @purple;
+      font-weight: 700;
+      font-size: 24px;
+      display: inline-flex;
+      align-items: center;
+      padding: 26px 40px;
+      justify-content: center;
+      width: 10%;
     }
   }
   .uploadContent {

web/src/pages/add-knowledge/components/knowledge-dataset/knowledge-upload-file/index.tsx

@@ -287,9 +287,10 @@ const KnowledgeUploadFile = () => {
         <section className={styles.footer}>
           <Button
             type="primary"
-            // className={styles.nextButton}
+            className={styles.nextButton}
             onClick={handleNextClick}
             disabled={!enabled}
+            size="large"
           >
             Next
           </Button>

web/src/pages/login/index.tsx

+import { useOneNamespaceEffectsLoading } from '@/hooks/storeHooks';
 import { rsaPsw } from '@/utils';
 import { Button, Checkbox, Form, Input } from 'antd';
 import { useEffect, useState } from 'react';
-import { Icon, useDispatch, useNavigate, useSelector } from 'umi';
+import { useTranslation } from 'react-i18next';
+import { Icon, useNavigate } from 'umi';
 import RightPanel from './right-panel';
 
+import { useLogin, useRegister } from '@/hooks/loginHooks';
 import styles from './index.less';
 
 const Login = () => {
   const [title, setTitle] = useState('login');
-  let navigate = useNavigate();
-  const dispatch = useDispatch();
-  const effectsLoading: any = useSelector<any>( // TODO: Type needs to be improved
-    (state) => state.loading.effects,
-  );
+  const navigate = useNavigate();
+  const login = useLogin();
+  const register = useRegister();
+  const { t } = useTranslation();
 
   // TODO: When the server address request is not accessible, the value of dva-loading always remains true.
 
-  const signLoading =
-    effectsLoading['loginModel/login'] || effectsLoading['loginModel/register'];
+  const signLoading = useOneNamespaceEffectsLoading('loginModel', [
+    'login',
+    'register',
+  ]);
 
   const changeTitle = () => {
     setTitle((title) => (title === 'login' ? 'register' : 'login'));
   };
   const [form] = Form.useForm();
-  const [checkNick, setCheckNick] = useState(false);
 
   useEffect(() => {
     form.validateFields(['nickname']);
-  }, [checkNick, form]);
+  }, [form]);
 
   const onCheck = async () => {
     try {
       const params = await form.validateFields();
 
-      var rsaPassWord = rsaPsw(params.password);
+      const rsaPassWord = rsaPsw(params.password) as string;
+
       if (title === 'login') {
-        const retcode = await dispatch<any>({
-          type: 'loginModel/login',
-          payload: {
-            email: params.email,
-            password: rsaPassWord,
-          },
+        const retcode = await login({
+          email: params.email,
+          password: rsaPassWord,
         });
         if (retcode === 0) {
           navigate('/knowledge');
         }
       } else {
-        // TODO: Type needs to be improved
-        const retcode = await dispatch<any>({
-          type: 'loginModel/register',
-          payload: {
-            nickname: params.nickname,
-            email: params.email,
-            password: rsaPassWord,
-          },
+        const retcode = await register({
+          nickname: params.nickname,
+          email: params.email,
+          password: rsaPassWord,
         });
         if (retcode === 0) {
           setTitle('login');
@@ -72,12 +69,15 @@ const Login = () => {
     window.location.href =
       'https://github.com/login/oauth/authorize?scope=user:email&client_id=302129228f0d96055bee';
   };
+
   return (
     <div className={styles.loginPage}>
       <div className={styles.loginLeft}>
         <div className={styles.leftContainer}>
           <div className={styles.loginTitle}>
-            <div>{title === 'login' ? 'Sign in' : 'Create an account'}</div>
+            <div>
+              {title === 'login' ? t('login.login') : 'Create an account'}
+            </div>
             <span>
               {title === 'login'
                 ? 'We’re so excited to see you again!'