refactor: add typescript support to project

src/routes/reg/Register.tsx

@@ -0,0 +1,86 @@
+import { useState, useEffect, FormEvent, ChangeEvent } from "react";
+import { useNavigate } from "react-router-dom";
+import Input from "../../common/component/styled/Input";
+import Button from "../../common/component/styled/Button";
+import { useSendRegMagicLinkMutation } from "../../app/services/auth";
+import EmailNextTip from "./EmailNextStepTip";
+
+export default function Reg() {
+  const [sendRegMagicLink, { isLoading, data, isSuccess }] = useSendRegMagicLinkMutation();
+  const navigateTo = useNavigate();
+  const [magicToken, setMagicToken] = useState("");
+  const [input, setInput] = useState({
+    email: "",
+    password: "",
+    confirmPassword: ""
+  });
+
+  useEffect(() => {
+    const query = new URLSearchParams(location.search);
+    // const githubCode = query.get("gcode");
+    const token = query.get("magic_token");
+    if (token) {
+      setMagicToken(token);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (isSuccess && data) {
+      const { new_magic_token, mail_is_sent } = data;
+      if (!mail_is_sent && new_magic_token) {
+        // 直接进入set_name流程
+        navigateTo(`?magic_token=${new_magic_token}#/register/set_name`);
+      }
+    }
+  }, [isSuccess, data]);
+
+  const handleReg = (evt: FormEvent<HTMLFormElement>) => {
+    evt.preventDefault();
+    const { email, password } = input;
+    sendRegMagicLink({
+      magic_token: magicToken,
+      email,
+      password
+    });
+    // sendMagicLink(email);
+  };
+
+  const handleInput = (evt: ChangeEvent<HTMLInputElement>) => {
+    const { type } = evt.target.dataset;
+    const { value } = evt.target;
+    // console.log(type, value);
+    setInput((prev) => {
+      prev[type] = value;
+      return { ...prev };
+    });
+  };
+
+  const { email, password } = input;
+  if (data?.mail_is_sent) return <EmailNextTip />;
+  return (
+    <form onSubmit={handleReg}>
+      <Input
+        className="large"
+        name="email"
+        value={email}
+        required
+        placeholder="Enter your email"
+        data-type="email"
+        onChange={handleInput}
+      />
+      <Input
+        className="large"
+        type="password"
+        value={password}
+        name="password"
+        required
+        data-type="password"
+        onChange={handleInput}
+        placeholder="Enter your password"
+      />
+      <Button type="submit" disabled={isLoading}>
+        {isLoading ? "Signing Up" : `Sign Up`}
+      </Button>
+    </form>
+  );
+}