refactor: add typescript support to project

src/routes/404/index.tsx

@@ -1,4 +1,3 @@
-// import React from 'react';
 import StyledWrapper from "./styled";
 
 export default function NotFoundPage() {

src/routes/404/styled.tsx

@@ -1,4 +1,5 @@
 import styled from "styled-components";
+
 const StyledWrapper = styled.div`
   display: flex;
 `;

src/routes/invite/index.tsx

@@ -1,17 +1,17 @@
-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';
+import { useState, useEffect, ChangeEvent, FormEvent } from "react";
+import { Navigate } from "react-router-dom";
+import toast from "react-hot-toast";
+import StyledWrapper from "./styled";
+import BASE_URL from "../../app/config";
+import { useRegisterMutation } from "../../app/services/contact";
+import { useCheckInviteTokenValidMutation } from "../../app/services/auth";
+import { useAppSelector } from "../../app/store";
 
 export default function InvitePage() {
-  const { token: loginToken } = useSelector((store) => store.authData);
-  const [secondPwd, setSecondPwd] = useState('');
+  const { token: loginToken } = useAppSelector((store) => store.authData);
+  const [secondPwd, setSecondPwd] = useState("");
   const [samePwd, setSamePwd] = useState(true);
-  const [token, setToken] = useState<string | null>('');
+  const [token, setToken] = useState<string | null>("");
   const [valid, setValid] = useState(false);
   // const [sp] = useSearchParams();
   // const navigateTo = useNavigate();
@@ -22,7 +22,7 @@ export default function InvitePage() {
   useEffect(() => {
     // console.log(search);
     const query = new URLSearchParams(location.search);
-    setToken(query.get('token'));
+    setToken(query.get("token"));
   }, []);
 
   useEffect(() => {
@@ -40,15 +40,15 @@ export default function InvitePage() {
     }
   }, [checkSuccess, isValid]);
 
-  const [input, setInput] = useState({ name: '', email: '', password: '' });
+  const [input, setInput] = useState({ name: "", email: "", password: "" });
 
   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,
@@ -79,53 +79,53 @@ export default function InvitePage() {
 
   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>