refactor: add typescript support to project

src/routes/setting/config/Agora.tsx

@@ -1,4 +1,3 @@
-// import { useState, useEffect } from "react";
 import StyledContainer from "./StyledContainer";
 import Input from "../../../common/component/styled/Input";
 import Textarea from "../../../common/component/styled/Textarea";
@@ -6,12 +5,14 @@ import Label from "../../../common/component/styled/Label";
 import Toggle from "../../../common/component/styled/Toggle";
 import SaveTip from "../../../common/component/SaveTip";
 import useConfig from "../../../common/hook/useConfig";
+
 export default function ConfigAgora() {
   const { changed, reset, values, setValues, toggleEnable, updateConfig } = useConfig("agora");
   const handleUpdate = () => {
     // const { token_url, description } = values;
     updateConfig(values);
   };
+
   const handleChange = (evt) => {
     const newValue = evt.target.value;
     const { type } = evt.target.dataset;
@@ -29,6 +30,7 @@ export default function ConfigAgora() {
     rtm_secret,
     enabled = false
   } = values ?? {};
+
   return (
     <StyledContainer>
       <div className="inputs">

src/routes/setting/config/IssuerList/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { ChangeEvent, useState } from "react";
 import Select from "../../../../common/component/styled/Select";
 import Button from "../../../../common/component/styled/Button";
 import Input from "../../../../common/component/styled/Input";
@@ -11,13 +11,16 @@ import IconMinus from "../../../../assets/icons/minus.circle.svg";
 export default function IssuerList({ issuers = [], onChange }) {
   const [select, setSelect] = useState({});
   const [newDomain, setNewDomain] = useState("");
-  const handleNewDomain = (evt) => {
+
+  const handleNewDomain = (evt: ChangeEvent<HTMLInputElement>) => {
     setNewDomain(evt.target.value);
   };
+
   const disableBtn =
     (!newDomain && !select?.value) ||
     !select?.title ||
     issuers.some((issuer) => issuer.domain === newDomain);
+
   return (
     <Styled>
       <ul className="issuers">

src/routes/setting/config/IssuerList/styled.tsx

@@ -1,4 +1,5 @@
 import styled from "styled-components";
+
 const Styled = styled.div`
   padding: 16px 0;
   width: 100%;

src/routes/setting/config/Logins.tsx

@@ -1,4 +1,3 @@
-// import { useState } from "react";
 import toast from "react-hot-toast";
 import StyledContainer from "./StyledContainer";
 import Toggle from "../../../common/component/styled/Toggle";
@@ -10,6 +9,7 @@ import Tooltip from "./Tooltip";
 import IssuerList from "./IssuerList";
 import useGoogleAuthConfig from "../../../common/hook/useGoogleAuthConfig";
 import useGithubAuthConfig from "../../../common/hook/useGithubAuthConfig";
+
 export default function Logins() {
   const {
     changed: clientIdChanged,

src/routes/setting/config/StyledContainer.tsx

@@ -1,4 +1,5 @@
 import styled from "styled-components";
+
 const StyledContainer = styled.div`
   position: relative;
   width: 512px;