refactor: magic link auth

src/routes/reg/RegWithUsername.js

@@ -1,25 +1,30 @@
 /* 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 { useParams } from "react-router-dom";
 import { setAuthData } from "../../app/slices/auth.data";
 
 import Input from "../../common/component/styled/Input";
 import Button from "../../common/component/styled/Button";
-import { useLoginMutation, useCheckInviteTokenValidMutation } from "../../app/services/auth";
+import { useLoginMutation, useCheckMagicTokenValidMutation } from "../../app/services/auth";
 import toast from "react-hot-toast";
 import ExpiredTip from "./ExpiredTip";
+import { useRegisterMutation } from "../../app/services/auth";
 
 export default function RegWithUsername() {
-  const { token } = useParams();
   const [checkTokenInvalid, { data: isTokenValid, isLoading: checkingToken }] =
-    useCheckInviteTokenValidMutation();
-  const [login, { isLoading, error, isSuccess, data }] = useLoginMutation();
+    useCheckMagicTokenValidMutation();
+  const [login, { isLoading: loginLoading, error, isSuccess: loginSuccess, data: loginData }] =
+    useLoginMutation();
+  const [register, { isLoading: regLoading, isSuccess: regSuccess, data: regData }] =
+    useRegisterMutation();
   // const navigateTo = useNavigate();
+  const { from = "reg" } = useParams();
   const dispatch = useDispatch();
   const [username, setUsername] = useState("");
+  const query = new URLSearchParams(location.search);
+  // const githubCode = query.get("gcode");
+  const token = query.get("magic_token");
   useEffect(() => {
     if (token) {
       checkTokenInvalid(token);
@@ -38,32 +43,42 @@ export default function RegWithUsername() {
     }
   }, [error]);
   useEffect(() => {
+    const isSuccess = loginSuccess || regSuccess;
+    const data = loginData || regData;
     if (isSuccess && data) {
       // 更新本地认证信息
-      console.log("login data", data);
       toast.success("Login Successfully");
       dispatch(setAuthData(data));
+      // tricky
       location.href = `/#/`;
     }
-  }, [isSuccess, data]);
+  }, [loginSuccess, regSuccess, loginData, regData]);
 
-  const handleLogin = (evt) => {
+  const handleAuth = (evt) => {
     evt.preventDefault();
-    login({
-      token,
-      username,
-      type: "magiclink"
-    });
-    // sendMagicLink(email);
+    if (from == "reg") {
+      register({
+        magic_token: token,
+        name: username
+      });
+    } else {
+      login({
+        magic_token: token,
+        extra_name: username,
+        type: "magiclink"
+      });
+    }
   };
 
   const handleInput = (evt) => {
     const { value } = evt.target;
     setUsername(value);
   };
-  if (!token) return "no token";
-  if (checkingToken) return "checking Magic Link...";
+  if (!token) return "No Token";
+  if (checkingToken) return "Checking Magic Link...";
   if (!isTokenValid) return <ExpiredTip />;
+  const isLoading = loginLoading || regLoading;
+  const isSuccess = loginSuccess || regSuccess;
   return (
     <>
       <div className="tips">
@@ -73,7 +88,7 @@ export default function RegWithUsername() {
           visible to others in spaces you joined.
         </span>
       </div>
-      <form onSubmit={handleLogin}>
+      <form onSubmit={handleAuth}>
         <Input
           className="large"
           name="username"