refactor: add typescript support to project

src/routes/setting/APIConfig.tsx

@@ -86,10 +86,10 @@ export default function APIConfig() {
               Are you sure to update API secret? Previous secret will be invalided
             </div>
             <div className="btns">
-              <Button onClick={hideAll} className="cancel small">
+              <Button onClick={() => hideAll()} className="cancel small">
                 Cancel
               </Button>
-              <Button disabled={isLoading} className="small danger" onClick={updateSecret}>
+              <Button disabled={isLoading} className="small danger" onClick={() => updateSecret()}>
                 Yes
               </Button>
             </div>

src/routes/setting/LogoutConfirmModal.tsx

@@ -1,12 +1,12 @@
-// import React from "react";
-import { useEffect, useState } from "react";
+import { ChangeEvent, FC, useEffect, useState } from "react";
 import styled from "styled-components";
-// import { useNavigate } from "react-router-dom";
-
+import toast from "react-hot-toast";
+import Modal from "../../common/component/Modal";
 import StyledModal from "../../common/component/styled/Modal";
 import Button from "../../common/component/styled/Button";
 import Checkbox from "../../common/component/styled/Checkbox";
 import useLogout from "../../common/hook/useLogout";
+
 const StyledConfirm = styled(StyledModal)`
   .clear {
     font-weight: normal;
@@ -26,21 +26,25 @@ const StyledConfirm = styled(StyledModal)`
     }
   }
 `;
-import Modal from "../../common/component/Modal";
-import toast from "react-hot-toast";
-export default function LogoutConfirmModal({ closeModal }) {
+
+interface Props {
+  closeModal: () => void;
+}
+
+const LogoutConfirmModal: FC<Props> = ({ closeModal }) => {
   const [clearLocal, setClearLocal] = useState(false);
   const { logout, exited, exiting, clearLocalData } = useLogout();
   const handleLogout = () => {
     logout();
   };
-  const handleCheck = (evt) => {
+
+  const handleCheck = (evt: ChangeEvent<HTMLInputElement>) => {
     setClearLocal(evt.target.checked);
   };
+
   useEffect(() => {
     if (exited) {
       if (clearLocal) {
-        console.log("clear all store");
         clearLocalData();
       }
       toast.success("Logout Successfully");
@@ -50,6 +54,7 @@ export default function LogoutConfirmModal({ closeModal }) {
       // location.reload();
     }
   }, [exited, clearLocal]);
+
   return (
     <Modal id="modal-modal">
       <StyledConfirm
@@ -59,7 +64,7 @@ export default function LogoutConfirmModal({ closeModal }) {
           <>
             <Button onClick={closeModal}>Cancel</Button>
             <Button onClick={handleLogout} className="danger">
-              {exiting ? "Logging out" : `Log Out`}
+              {exiting ? "Logging out" : "Log Out"}
             </Button>
           </>
         }
@@ -74,4 +79,6 @@ export default function LogoutConfirmModal({ closeModal }) {
       </StyledConfirm>
     </Modal>
   );
-}
+};
+
+export default LogoutConfirmModal;

src/routes/setting/ProfileBasicEditModal.tsx

@@ -1,5 +1,4 @@
-// import React from "react";
-import { useEffect, useState } from "react";
+import { ChangeEvent, FC, useEffect, useState } from "react";
 import styled from "styled-components";
 import toast from "react-hot-toast";
 import Input from "../../common/component/styled/Input";
@@ -24,18 +23,27 @@ const StyledEdit = styled(StyledModal)`
   }
 `;
 
-export default function ProfileBasicEditModal({
+interface Props {
+  label?: string;
+  valueKey?: string;
+  value?: string;
+  title?: string;
+  intro?: string;
+  closeModal: () => void;
+}
+
+const ProfileBasicEditModal: FC<Props> = ({
   label = "Username",
   valueKey = "name",
   value = "",
   title = "Change your username",
   intro = "Enter a new username and your existing password.",
   closeModal
-}) {
+}) => {
   const [input, setInput] = useState(value);
   // const dispatch = useDispatch();
   const [update, { isLoading, isSuccess }] = useUpdateInfoMutation();
-  const handleChange = (evt) => {
+  const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {
     setInput(evt.target.value);
   };
   const handleUpdate = () => {
@@ -69,4 +77,6 @@ export default function ProfileBasicEditModal({
       </StyledEdit>
     </Modal>
   );
-}
+};
+
+export default ProfileBasicEditModal;

src/routes/setting/UpdatePasswordModal.tsx

@@ -27,9 +27,15 @@ interface Props {
   closeModal: () => void;
 }
 
+interface BaseForm {
+  current: string;
+  newPassword: string;
+  confirmPassword: string;
+}
+
 const ProfileBasicEditModal: FC<Props> = ({ closeModal }) => {
   const { data } = useGetCredentialsQuery();
-  const [input, setInput] = useState({
+  const [input, setInput] = useState<BaseForm>({
     current: "",
     newPassword: "",
     confirmPassword: ""
@@ -37,7 +43,7 @@ const ProfileBasicEditModal: FC<Props> = ({ closeModal }) => {
   // const dispatch = useDispatch();
   const [updatePassword, { isLoading, isSuccess }] = useUpdatePasswordMutation();
   const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {
-    const { type } = evt.target.dataset;
+    const { type } = evt.target.dataset as { type: keyof BaseForm };
     setInput((prev) => {
       return { ...prev, [type]: evt.target.value };
     });

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

@@ -1,15 +1,25 @@
-import { ChangeEvent, useState } from "react";
-import Select from "../../../../common/component/styled/Select";
+import { ChangeEvent, FC, useState } from "react";
+import Select, { Option } from "../../../../common/component/styled/Select";
 import Button from "../../../../common/component/styled/Button";
 import Input from "../../../../common/component/styled/Input";
 import Toggle from "../../../../common/component/styled/Toggle";
 import options from "./items.json";
 import Styled from "./styled";
-// import IconPlus from "../../../../assets/icons/plus.circle.svg";
 import IconMinus from "../../../../assets/icons/minus.circle.svg";
 
-export default function IssuerList({ issuers = [], onChange }) {
-  const [select, setSelect] = useState({});
+interface Issuer {
+  domain: string;
+  enable: boolean;
+  favicon: string;
+}
+
+interface Props {
+  issuers: Issuer[];
+  onChange: (issuers: Issuer[]) => void;
+}
+
+const IssuerList: FC<Props> = ({ issuers = [], onChange }) => {
+  const [select, setSelect] = useState<Partial<Option> | null>(null);
   const [newDomain, setNewDomain] = useState("");
 
   const handleNewDomain = (evt: ChangeEvent<HTMLInputElement>) => {
@@ -87,7 +97,9 @@ export default function IssuerList({ issuers = [], onChange }) {
             <Button
               disabled={disableBtn}
               onClick={() => {
-                const { icon, value } = options.find((option) => option.value === select.value);
+                const found = options.find((option) => option.value === select?.value);
+                if (!found) return;
+                const { icon, value } = found;
                 onChange(
                   issuers.concat({
                     enable: true,
@@ -95,7 +107,7 @@ export default function IssuerList({ issuers = [], onChange }) {
                     domain: value || newDomain
                   })
                 );
-                setSelect({});
+                setSelect(null);
                 setNewDomain("");
               }}
             >
@@ -107,4 +119,6 @@ export default function IssuerList({ issuers = [], onChange }) {
       {/* <IconPlus className="add" /> */}
     </Styled>
   );
-}
+};
+
+export default IssuerList;

src/routes/setting/config/Tooltip.tsx

@@ -1,8 +1,9 @@
 import Tippy from "@tippyjs/react";
 import { roundArrow } from "tippy.js";
 import "tippy.js/dist/svg-arrow.css";
-// import React from 'react'
 import styled from "styled-components";
+import IconQuestion from "../../../assets/icons/question.svg";
+
 const StyledContent = styled.div`
   padding: 8px 12px;
   background: #101828;
@@ -15,7 +16,7 @@ const StyledContent = styled.div`
     color: #55c7ec;
   }
 `;
-import IconQuestion from "../../../assets/icons/question.svg";
+
 export default function Tooltip({ link = "#" }) {
   return (
     <Tippy

src/routes/setting/index.tsx

@@ -9,24 +9,23 @@ let from: string | null = null;
 export default function Setting() {
   const [searchParams] = useSearchParams();
   const navs = useNavs();
-  const flatenNavs = navs
-    .map(({ items }) => {
-      return items;
-    })
-    .flat();
+  const flattenNaves = navs.map(({ items }) => items).flat();
   const navKey = searchParams.get("nav");
   from = from ?? (searchParams.get("f") || "/");
   const [logoutConfirm, setLogoutConfirm] = useState(false);
-  const navgateTo = useNavigate();
+  const navigateTo = useNavigate();
   const close = () => {
     // dispatch(toggleSetting());
-    navgateTo(from);
+    // todo: check usage
+    navigateTo(from!);
     from = null;
   };
-  const toggleLogoutConfrim = () => {
+
+  const toggleLogoutConfirm = () => {
     setLogoutConfirm((prev) => !prev);
   };
-  const currNav = flatenNavs.find((n) => n.name == navKey) || flatenNavs[0];
+
+  const currNav = flattenNaves.find((n) => n.name == navKey) || flattenNaves[0];
 
   return (
     <>
@@ -35,11 +34,11 @@ export default function Setting() {
         closeModal={close}
         title="Settings"
         navs={navs}
-        dangers={[{ title: "Log Out", handler: toggleLogoutConfrim }]}
+        dangers={[{ title: "Log Out", handler: toggleLogoutConfirm }]}
       >
         {currNav.component}
       </StyledSettingContainer>
-      {logoutConfirm && <LogoutConfirmModal closeModal={toggleLogoutConfrim} />}
+      {logoutConfirm && <LogoutConfirmModal closeModal={toggleLogoutConfirm} />}
     </>
   );
 }