refactor: add typescript support to project

src/routes/sendMagicLink/SentTip.tsx

@@ -1,6 +1,12 @@
-// import React from "react";
 import Button from "../../common/component/styled/Button";
-export default function SentTip({ email, reset }) {
+import { FC, MouseEvent } from "react";
+
+interface Props {
+  email: string;
+  reset?: (e: MouseEvent<HTMLButtonElement>) => void;
+}
+
+const SentTip: FC<Props> = ({ email, reset }) => {
   return (
     <div className="tips">
       <h2 className="title">Check your email</h2>
@@ -12,4 +18,6 @@ export default function SentTip({ email, reset }) {
       </Button>
     </div>
   );
-}
+};
+
+export default SentTip;

src/routes/sendMagicLink/index.tsx

@@ -1,6 +1,4 @@
-/* eslint-disable no-undef */
-import { useState, useEffect } from "react";
-// import { useDispatch } from "react-redux";
+import { useState, useEffect, ChangeEvent, FormEvent } from "react";
 import { useNavigate } from "react-router-dom";
 import toast from "react-hot-toast";
 import BASE_URL from "../../app/config";
@@ -13,10 +11,9 @@ import SentTip from "./SentTip";
 export default function SendMagicLinkPage() {
   const [sent, setSent] = useState(false);
   const [sendMagicLink, { isSuccess, isLoading, error }] = useSendLoginMagicLinkMutation();
-
   const navigateTo = useNavigate();
-  // const dispatch = useDispatch();
   const [email, setEmail] = useState("");
+
   useEffect(() => {
     if (isSuccess) {
       toast.success("Send Email Successfully!");
@@ -48,20 +45,23 @@ export default function SendMagicLinkPage() {
   const handlePwdPath = () => {
     navigateTo("/login");
   };
-  const handleLogin = (evt) => {
+
+  const handleLogin = (evt: FormEvent<HTMLFormElement>) => {
     evt.preventDefault();
     sendMagicLink(email);
   };
 
-  const handleInput = (evt) => {
+  const handleInput = (evt: ChangeEvent<HTMLInputElement>) => {
     const { value } = evt.target;
     console.log(value);
     setEmail(value);
   };
+
   const handleReset = () => {
     setEmail("");
     setSent(false);
   };
+
   return (
     <StyledWrapper>
       <div className="form">