refactor: add typescript support to project

src/routes/index.tsx

@@ -2,11 +2,11 @@ import { Suspense, useEffect, lazy } from "react";
 import { Route, Routes, HashRouter } from "react-router-dom";
 import { Provider, useSelector } from "react-redux";
 import toast from "react-hot-toast";
-// import Welcome from './Welcome'
 import NotFoundPage from "./404";
+// import Welcome from './Welcome'
 // const HomePage = lazy(() => import("./home"));
-const RegBasePage = lazy(() => import("./reg"));
 // const ChatPage = lazy(() => import("./chat"));
+const RegBasePage = lazy(() => import("./reg"));
 const RegWithUsernamePage = lazy(() => import("./reg/RegWithUsername"));
 const SendMagicLinkPage = lazy(() => import("./sendMagicLink"));
 const RegPage = lazy(() => import("./reg/Register"));
@@ -25,19 +25,16 @@ import Meta from "../common/component/Meta";
 import HomePage from "./home";
 import ChatPage from "./chat";
 import Loading from "../common/component/Loading";
-
 import store from "../app/store";
 
 const PageRoutes = () => {
-  const {
-    ui: { online },
-    fileMessages
-  } = useSelector((store) => {
+  const { ui: { online }, fileMessages } = useSelector((store) => {
     return { ui: store.ui, fileMessages: store.fileMessage };
   });
+
   // 掉线检测
   useEffect(() => {
-    let toastId = 0;
+    let toastId = '0';
     if (!online) {
       toast.error("Network Offline!", { duration: Infinity });
     } else {
@@ -179,6 +176,7 @@ const PageRoutes = () => {
     </HashRouter>
   );
 };
+
 // const local_key = "AUTH_DATA";
 export default function ReduxRoutes() {
   // const [authData, setAuthData] = useState(

src/routes/invite/index.tsx

@@ -1,33 +1,36 @@
-import { useState, useEffect } from "react";
-import StyledWrapper from "./styled";
-import { Navigate } from "react-router-dom";
-import toast from "react-hot-toast";
-import BASE_URL from "../../app/config";
-import { useRegisterMutation } from "../../app/services/contact";
-import { useCheckInviteTokenValidMutation } from "../../app/services/auth";
-import { useSelector } from "react-redux";
+import { useState, useEffect, ChangeEvent, FormEvent } from 'react';
+import { Navigate } from 'react-router-dom';
+import toast from 'react-hot-toast';
+import { useSelector } from 'react-redux';
+import StyledWrapper from './styled';
+import BASE_URL from '../../app/config';
+import { useRegisterMutation } from '../../app/services/contact';
+import { useCheckInviteTokenValidMutation } from '../../app/services/auth';
 
 export default function InvitePage() {
   const { token: loginToken } = useSelector((store) => store.authData);
-  const [secondPwd, setSecondPwd] = useState("");
+  const [secondPwd, setSecondPwd] = useState('');
   const [samePwd, setSamePwd] = useState(true);
-  const [token, setToken] = useState("");
+  const [token, setToken] = useState<string | null>('');
   const [valid, setValid] = useState(false);
   // const [sp] = useSearchParams();
   // const navigateTo = useNavigate();
   const [register, { data, isLoading, isSuccess, isError, error }] = useRegisterMutation();
   const [checkToken, { data: isValid, isLoading: checkLoading, isSuccess: checkSuccess }] =
     useCheckInviteTokenValidMutation();
+
   useEffect(() => {
     // console.log(search);
     const query = new URLSearchParams(location.search);
-    setToken(query.get("token"));
+    setToken(query.get('token'));
   }, []);
+
   useEffect(() => {
     if (token) {
       checkToken(token);
     }
   }, [token]);
+
   useEffect(() => {
     if (checkSuccess) {
       console.log({ isValid });
@@ -37,26 +40,23 @@ export default function InvitePage() {
     }
   }, [checkSuccess, isValid]);
 
-  const [input, setInput] = useState({
-    name: "",
-    email: "",
-    password: ""
-  });
+  const [input, setInput] = useState({ name: '', email: '', password: '' });
 
-  const handleReg = (evt) => {
+  const handleReg = (evt: FormEvent<HTMLFormElement>) => {
     evt.preventDefault();
     if (!samePwd) {
-      toast.error("two passwords not same");
+      toast.error('two passwords not same');
       return;
     }
-    console.log("wtf", input);
+    console.log('wtf', input);
     register({
       ...input,
       magic_token: token,
       gender: 1
     });
   };
-  const handleInput = (evt) => {
+
+  const handleInput = (evt: ChangeEvent<HTMLInputElement>) => {
     const { type } = evt.target.dataset;
     const { value } = evt.target;
     console.log(type, value);
@@ -65,63 +65,67 @@ export default function InvitePage() {
       return { ...prev };
     });
   };
-  const handleSecondPwdInput = (evt) => {
+
+  const handleSecondPwdInput = (evt: ChangeEvent<HTMLInputElement>) => {
     const { value } = evt.target;
     setSecondPwd(value);
   };
+
   const handlePwdCheck = () => {
     if (secondPwd) {
       setSamePwd(secondPwd == input.password);
     }
   };
+
   useEffect(() => {
     if (!samePwd) {
-      toast.error("two passwords not same");
+      toast.error('two passwords not same');
     }
   }, [samePwd]);
 
   useEffect(() => {
     if (isSuccess && data) {
       // 去登录
-      toast.success("register success, login please");
+      toast.success('register success, login please');
       setTimeout(() => {
         location.href = `/#/login`;
         // navigateTo("/login",);
       }, 500);
     } else if (isError) {
-      console.log("register failed", error);
+      console.log('register failed', error);
       switch (error.status) {
         case 400:
-          toast.error("Register Failed: please check inputs");
+          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"
+            email_conflict: 'email conflict',
+            name_conflict: 'name conflict'
           };
           toast.error(`Register Failed: ${tips[error.data?.reason]}`);
           break;
         }
         default:
-          toast.error("Register Failed");
+          toast.error('Register Failed');
           break;
       }
     }
   }, [data, isSuccess, isError, error]);
 
   const { email, password, name } = input;
-  if (loginToken) return <Navigate replace to="/" />;
-  if (!token) return "token not found";
-  if (checkLoading) return "checking token valid";
-  if (!valid) return "invite token expires or invalid";
+  if (loginToken) return <Navigate replace to="/"/>;
+  if (!token) return 'token not found';
+  if (checkLoading) return 'checking token valid';
+  if (!valid) return 'invite token expires or invalid';
+
   return (
     <StyledWrapper>
       <div className="form animate__animated animate__fadeInDown animate__faster">
         <div className="tips">
-          <img src={`${BASE_URL}/resource/organization/logo`} alt="logo" className="logo" />
+          <img src={`${BASE_URL}/resource/organization/logo`} alt="logo" className="logo"/>
           <h2 className="title">Sign Up to Rustchat</h2>
           <span className="desc">Please enter your details.</span>
         </div>

src/routes/reg/RegWithUsername.tsx

@@ -1,15 +1,14 @@
 /* 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 { useState, useEffect, ChangeEvent, FormEvent } 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, useCheckInviteTokenValidMutation } from "../../app/services/auth";
-import toast from "react-hot-toast";
 import ExpiredTip from "./ExpiredTip";
 
 export default function RegWithUsername() {
@@ -20,6 +19,7 @@ export default function RegWithUsername() {
   // const navigateTo = useNavigate();
   const dispatch = useDispatch();
   const [username, setUsername] = useState("");
+
   useEffect(() => {
     if (token) {
       checkTokenInvalid(token);
@@ -27,16 +27,16 @@ export default function RegWithUsername() {
   }, [token]);
 
   useEffect(() => {
-    console.log("errr", error);
+    console.log("error", error);
     switch (error?.status) {
       case 401:
         toast.error("Invalided Token");
         break;
-
       default:
         break;
     }
   }, [error]);
+
   useEffect(() => {
     if (isSuccess && data) {
       // 更新本地认证信息
@@ -47,7 +47,7 @@ export default function RegWithUsername() {
     }
   }, [isSuccess, data]);
 
-  const handleLogin = (evt) => {
+  const handleLogin = (evt: FormEvent<HTMLFormElement>) => {
     evt.preventDefault();
     login({
       token,
@@ -57,13 +57,15 @@ export default function RegWithUsername() {
     // sendMagicLink(email);
   };
 
-  const handleInput = (evt) => {
+  const handleInput = (evt: ChangeEvent<HTMLInputElement>) => {
     const { value } = evt.target;
     setUsername(value);
   };
+
   if (!token) return "no token";
   if (checkingToken) return "checking Magic Link...";
   if (!isTokenValid) return <ExpiredTip />;
+
   return (
     <>
       <div className="tips">