fix: Login with @tanstack/react-query #1306 (#1691)

### What problem does this PR solve?

fix: Login with @tanstack/react-query #1306

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

web/src/hooks/login-hooks.ts

@@ -1,5 +1,10 @@
-import { useCallback } from 'react';
-import { useDispatch } from 'umi';
+import { Authorization } from '@/constants/authorization';
+import userService from '@/services/user-service';
+import authorizationUtil from '@/utils/authorizationUtil';
+import { useMutation } from '@tanstack/react-query';
+import { message } from 'antd';
+import { useTranslation } from 'react-i18next';
+import { history } from 'umi';
 
 export interface ILoginRequestBody {
   email: string;
@@ -11,34 +16,82 @@ export interface IRegisterRequestBody extends ILoginRequestBody {
 }
 
 export const useLogin = () => {
-  const dispatch = useDispatch();
+  const { t } = useTranslation();
 
-  const login = useCallback(
-    (requestBody: ILoginRequestBody) => {
-      // TODO: Type needs to be improved
-      return dispatch<any>({
-        type: 'loginModel/login',
-        payload: requestBody,
-      });
+  const {
+    data,
+    isPending: loading,
+    mutateAsync,
+  } = useMutation({
+    mutationKey: ['login'],
+    mutationFn: async (params: { email: string; password: string }) => {
+      const { data: res = {}, response } = await userService.login(params);
+      if (res.retcode === 0) {
+        const { data } = res;
+        message.success(t('message.logged'));
+        const authorization = response.headers.get(Authorization);
+        const token = data.access_token;
+        const userInfo = {
+          avatar: data.avatar,
+          name: data.nickname,
+          email: data.email,
+        };
+        authorizationUtil.setItems({
+          Authorization: authorization,
+          userInfo: JSON.stringify(userInfo),
+          Token: token,
+        });
+      }
+      return res.retcode;
     },
-    [dispatch],
-  );
+  });
 
-  return login;
+  return { data, loading, login: mutateAsync };
 };
 
 export const useRegister = () => {
-  const dispatch = useDispatch();
+  const { t } = useTranslation();
 
-  const register = useCallback(
-    (requestBody: IRegisterRequestBody) => {
-      return dispatch<any>({
-        type: 'loginModel/register',
-        payload: requestBody,
-      });
+  const {
+    data,
+    isPending: loading,
+    mutateAsync,
+  } = useMutation({
+    mutationKey: ['register'],
+    mutationFn: async (params: {
+      email: string;
+      password: string;
+      nickname: string;
+    }) => {
+      const { data = {} } = await userService.register(params);
+      if (data.retcode === 0) {
+        message.success(t('message.registered'));
+      }
+      return data.retcode;
     },
-    [dispatch],
-  );
+  });
 
-  return register;
+  return { data, loading, register: mutateAsync };
+};
+
+export const useLogout = () => {
+  const { t } = useTranslation();
+  const {
+    data,
+    isPending: loading,
+    mutateAsync,
+  } = useMutation({
+    mutationKey: ['logout'],
+    mutationFn: async () => {
+      const { data = {} } = await userService.logout();
+      if (data.retcode === 0) {
+        message.success(t('message.logout'));
+        authorizationUtil.removeAll();
+        history.push('/login');
+      }
+      return data.retcode;
+    },
+  });
+
+  return { data, loading, logout: mutateAsync };
 };

web/src/hooks/user-setting-hooks.ts

@@ -1,9 +1,8 @@
 import { ITenantInfo } from '@/interfaces/database/knowledge';
 import { ISystemStatus, IUserInfo } from '@/interfaces/database/userSetting';
 import userService from '@/services/user-service';
-import authorizationUtil from '@/utils/authorizationUtil';
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { history, useDispatch, useSelector } from 'umi';
+import { useDispatch, useSelector } from 'umi';
 
 export const useFetchUserInfo = () => {
   const dispatch = useDispatch();
@@ -67,20 +66,6 @@ export const useSelectParserList = (): Array<{
   return parserList;
 };
 
-export const useLogout = () => {
-  const dispatch = useDispatch(); // TODO: clear redux state
-
-  const logout = useCallback(async () => {
-    const retcode = await dispatch<any>({ type: 'loginModel/logout' });
-    if (retcode === 0) {
-      authorizationUtil.removeAll();
-      history.push('/login');
-    }
-  }, [dispatch]);
-
-  return logout;
-};
-
 export const useSaveSetting = () => {
   const dispatch = useDispatch();