refactor: login api with redux update

src/app/services/auth.js

@@ -1,7 +1,7 @@
 import { createApi } from "@reduxjs/toolkit/query/react";
 import { nanoid } from "@reduxjs/toolkit";
 import baseQuery from "./base.query";
-import { updateToken, resetAuthData } from "../slices/auth.data";
+import { setAuthData, updateToken, resetAuthData } from "../slices/auth.data";
 import BASE_URL, { KEY_DEVICE_KEY } from "../config";
 const getDeviceId = () => {
   let d = localStorage.getItem(KEY_DEVICE_KEY);
@@ -33,6 +33,17 @@ export const authApi = createApi({
             : `${BASE_URL}/resource/avatar?uid=${data.user.uid}&t=${avatar_updated_at}`;
         return data;
       },
+      async onQueryStarted(params, { dispatch, queryFulfilled }) {
+        try {
+          const { data } = await queryFulfilled;
+          if (data) {
+            console.log("login resp", data);
+            dispatch(setAuthData(data));
+          }
+        } catch {
+          console.log("login error");
+        }
+      },
     }),
     // 更新token
     renew: builder.mutation({
@@ -50,7 +61,7 @@ export const authApi = createApi({
           dispatch(updateToken(data));
         } catch {
           dispatch(resetAuthData());
-          console.log("remove channel error");
+          console.log("renew token error");
         }
       },
     }),

src/routes/invite/index.js

@@ -96,19 +96,22 @@ export default function InvitePage() {
     } else if (isError) {
       console.log("register failed", error);
       switch (error.status) {
+        case 400:
+          toast.error("Register Failed: please check inputs");
+          break;
         case 412:
-          toast.error("register failed: invalid token or expired");
+          toast.error("Register Failed: invalid token or expired");
           break;
         case 409: {
           const tips = {
             email_conflict: "email conflict",
             name_conflict: "name conflict",
           };
-          toast.error(`register failed: ${tips[error.data?.reason]}`);
+          toast.error(`Register Failed: ${tips[error.data?.reason]}`);
           break;
         }
         default:
-          toast.error("register failed");
+          toast.error("Register Failed");
           break;
       }
     }

src/routes/login/index.js

@@ -1,7 +1,5 @@
 /* eslint-disable no-undef */
 import { useState, useEffect } from "react";
-import { useDispatch } from "react-redux";
-import { useNavigate } from "react-router-dom";
 import toast from "react-hot-toast";
 import BASE_URL from "../../app/config";
 // import web3 from "web3";
@@ -17,21 +15,18 @@ import {
   useGetLoginConfigQuery,
   useGetSMTPStatusQuery,
 } from "../../app/services/server";
-import { setAuthData } from "../../app/slices/auth.data";
 import useGoogleAuthConfig from "../../common/hook/useGoogleAuthConfig";
 import GithubLoginButton from "./GithubLoginButton";
 import useGithubAuthConfig from "../../common/hook/useGithubAuthConfig";
 export default function LoginPage() {
   const { data: enableSMTP } = useGetSMTPStatusQuery();
-  const [login, { data, isSuccess, isLoading, error }] = useLoginMutation();
+  const [login, { isSuccess, isLoading, error }] = useLoginMutation();
   const { clientId } = useGoogleAuthConfig();
   const { config: githubAuthConfig } = useGithubAuthConfig();
   const {
     data: loginConfig,
     isSuccess: loginConfigSuccess,
   } = useGetLoginConfigQuery(undefined, { pollingInterval: 10000 });
-  const navigateTo = useNavigate();
-  const dispatch = useDispatch();
   const [input, setInput] = useState({
     email: "",
     password: "",
@@ -105,14 +100,11 @@ export default function LoginPage() {
     }
   }, [error]);
   useEffect(() => {
-    if (isSuccess && data) {
+    if (isSuccess) {
-      // 更新本地认证信息
-      console.log("login data", data);
       toast.success("Login Successfully");
-      dispatch(setAuthData(data));
+      // navigateTo("/");
-      navigateTo("/");
     }
-  }, [isSuccess, data]);
+  }, [isSuccess]);
 
   const handleLogin = (evt) => {
     evt.preventDefault();
@@ -136,12 +128,19 @@ export default function LoginPage() {
   if (!loginConfigSuccess) return null;
   const {
     magic_link,
+    github: enableGithubLogin,
     google: enableGoogleLogin,
     metamask: enableMetamaskLogin,
-    oidc,
+    oidc = [],
   } = loginConfig;
   const enableMagicLink = enableSMTP && magic_link;
   const googleLogin = enableGoogleLogin && clientId;
+  const hasDivider =
+    enableMagicLink ||
+    googleLogin ||
+    enableMetamaskLogin ||
+    oidc.length > 0 ||
+    enableGithubLogin;
   return (
     <StyledWrapper>
       <div className="form">
@@ -178,13 +177,10 @@ export default function LoginPage() {
             {isLoading ? "Signing" : `Sign in`}
           </Button>
         </form>
-        {(enableMagicLink ||
+        {hasDivider && <hr className="or" />}
-          googleLogin ||
-          enableMetamaskLogin ||
-          oidc.length > 0) && <hr className="or" />}
         {enableMagicLink && <MagicLinkLogin />}
         {googleLogin && <GoogleLoginButton login={login} clientId={clientId} />}
-        <GithubLoginButton config={githubAuthConfig} />
+        {enableGithubLogin && <GithubLoginButton config={githubAuthConfig} />}
         {enableMetamaskLogin && <MetamaskLoginButton login={login} />}
         {oidc.length > 0 && <SolidLoginButton issuers={oidc} />}
       </div>