refactor: add typescript support to project

src/routes/reg/ExpiredTip.tsx

@@ -1,4 +1,3 @@
-// import React from "react";
 import styled from "styled-components";
 
 const Styled = styled.div`

src/routes/reg/RegWithUsername.tsx

@@ -1,17 +1,15 @@
-/* eslint-disable no-undef */
-import { useState, useEffect } from "react";
+import { useState, useEffect, FC, FormEvent, ChangeEvent } from "react";
 import { useDispatch } from "react-redux";
 import { useParams } from "react-router-dom";
+import toast from "react-hot-toast";
 import { setAuthData } from "../../app/slices/auth.data";
-
 import Input from "../../common/component/styled/Input";
 import Button from "../../common/component/styled/Button";
 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 RegWithUsername: FC = () => {
   const [checkTokenInvalid, { data: isTokenValid, isLoading: checkingToken }] =
     useCheckMagicTokenValidMutation();
   const [
@@ -28,7 +26,8 @@ export default function RegWithUsername() {
   const [username, setUsername] = useState("");
   const query = new URLSearchParams(location.search);
   // const githubCode = query.get("gcode");
-  const token = query.get("magic_token");
+  // todo: check if query param exists
+  const token = query.get("magic_token") as string;
   useEffect(() => {
     if (token) {
       checkTokenInvalid(token);
@@ -36,25 +35,29 @@ export default function RegWithUsername() {
   }, [token]);
 
   useEffect(() => {
-    switch (loginError?.status) {
-      case 401:
-        toast.error("Invalided Token");
-        break;
-
-      default:
-        break;
+    if (loginError && "status" in loginError) {
+      switch (loginError.status) {
+        case 401:
+          toast.error("Invalided Token");
+          break;
+        default:
+          break;
+      }
     }
   }, [loginError]);
-  useEffect(() => {
-    switch (regError?.status) {
-      case 409:
-        toast.error("Something Conflicted!");
-        break;
 
-      default:
-        break;
+  useEffect(() => {
+    if (regError && "status" in regError) {
+      switch (regError.status) {
+        case 409:
+          toast.error("Something Conflicted!");
+          break;
+        default:
+          break;
+      }
     }
   }, [regError]);
+
   useEffect(() => {
     const isSuccess = loginSuccess || regSuccess;
     const data = loginData || regData;
@@ -67,7 +70,7 @@ export default function RegWithUsername() {
     }
   }, [loginSuccess, regSuccess, loginData, regData]);
 
-  const handleAuth = (evt) => {
+  const handleAuth = (evt: FormEvent<HTMLFormElement>) => {
     evt.preventDefault();
     if (from == "reg") {
       register({
@@ -83,13 +86,12 @@ export default function RegWithUsername() {
     }
   };
 
-  const handleInput = (evt) => {
-    const { value } = evt.target;
-    setUsername(value);
+  const handleInput = (evt: ChangeEvent<HTMLInputElement>) => {
+    setUsername(evt.target.value);
   };
-  console.log("ffff", from);
-  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;
@@ -112,9 +114,12 @@ export default function RegWithUsername() {
           onChange={handleInput}
         />
         <Button type="submit" disabled={isLoading || !username || isSuccess}>
+          {/* todo typo */}
           {isLoading ? "Logining" : `Continue`}
         </Button>
       </form>
     </>
   );
-}
+};
+
+export default RegWithUsername;

src/routes/reg/Register.tsx

@@ -1,6 +1,5 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, ChangeEvent, FormEvent } from "react";
 import toast from "react-hot-toast";
-// import { useNavigate } from "react-router-dom";
 import BASE_URL, { KEY_LOCAL_MAGIC_TOKEN } from "../../app/config";
 import Input from "../../common/component/styled/Input";
 import Button from "../../common/component/styled/Button";
@@ -13,13 +12,19 @@ import useGoogleAuthConfig from "../../common/hook/useGoogleAuthConfig";
 import GoogleLoginButton from "../../common/component/GoogleLoginButton";
 import GithubLoginButton from "../../common/component/GithubLoginButton";
 
+interface AuthForm {
+  email: string;
+  password: string;
+  confirmPassword: string;
+}
+
 export default function Reg() {
   const [sendRegMagicLink, { isLoading: signingUp, data, isSuccess }] =
     useSendRegMagicLinkMutation();
   const [checkEmail, { isLoading: checkingEmail }] = useLazyCheckEmailQuery();
   // const navigateTo = useNavigate();
   const [magicToken, setMagicToken] = useState("");
-  const [input, setInput] = useState({
+  const [input, setInput] = useState<AuthForm>({
     email: "",
     password: "",
     confirmPassword: ""
@@ -47,7 +52,7 @@ export default function Reg() {
     }
   }, [isSuccess, data]);
 
-  const handleReg = async (evt) => {
+  const handleReg = async (evt: FormEvent<HTMLFormElement>) => {
     evt.preventDefault();
     const { email, password, confirmPassword } = input;
     if (password !== confirmPassword) {
@@ -55,7 +60,6 @@ export default function Reg() {
       return;
     }
     const { data: canReg } = await checkEmail(email);
-    console.log("can reg", canReg);
     if (canReg) {
       sendRegMagicLink({
         magic_token: magicToken,
@@ -67,21 +71,23 @@ export default function Reg() {
     }
     // sendMagicLink(email);
   };
+
   const handleCompare = () => {
     const { password, confirmPassword } = input;
     if (password !== confirmPassword) {
       toast.error("Not Same Password!");
     }
   };
-  const handleInput = (evt) => {
-    const { type } = evt.target.dataset;
+
+  const handleInput = (evt: ChangeEvent<HTMLInputElement>) => {
+    const { type } = evt.target.dataset as { type: keyof AuthForm };
     const { value } = evt.target;
-    // console.log(type, value);
     setInput((prev) => {
       prev[type] = value;
       return { ...prev };
     });
   };
+
   const { clientId } = useGoogleAuthConfig();
   const { config: githubAuthConfig } = useGithubAuthConfig();
   const { data: loginConfig, isSuccess: loginConfigSuccess } = useGetLoginConfigQuery();
@@ -94,10 +100,11 @@ export default function Reg() {
   const googleLogin = enableGoogleLogin && clientId;
   // magic token 没有并且没有开放注册
   if (whoCanSignUp !== "EveryOne" && !magicToken)
-    return `Sign up method is updated to Invitation Link Only`;
+    return <>Sign up method is updated to Invitation Link Only</>;
   const { email, password, confirmPassword } = input;
   if (data?.mail_is_sent) return <EmailNextTip />;
   const isLoading = signingUp || checkingEmail;
+
   return (
     <>
       <div className="tips">

src/routes/reg/index.tsx

@@ -2,8 +2,6 @@ import { Outlet } from "react-router-dom";
 import StyledWrapper from "./styled";
 
 export default function RegContainer() {
-  // const isRegHome = useMatch(`/register`);
-
   return (
     <StyledWrapper>
       <div className="form">