refactor: add typescript support to project

src/routes/setting/APIConfig.tsx

@@ -1,6 +1,15 @@
 import { useEffect } from "react";
 import styled from "styled-components";
+import Tippy from "@tippyjs/react";
+import toast from "react-hot-toast";
 import { hideAll } from "tippy.js";
+import Input from "../../common/component/styled/Input";
+import Button from "../../common/component/styled/Button";
+import {
+  useGetThirdPartySecretQuery,
+  useUpdateThirdPartySecretMutation
+} from "../../app/services/server";
+
 const StyledConfirm = styled.div`
   padding: 12px;
   border-radius: 10px;
@@ -48,19 +57,12 @@ const Styled = styled.div`
     line-height: 1.5;
   }
 `;
-import Input from "../../common/component/styled/Input";
-import Button from "../../common/component/styled/Button";
-import {
-  useGetThirdPartySecretQuery,
-  useUpdateThirdPartySecretMutation
-} from "../../app/services/server";
-import Tippy from "@tippyjs/react";
-import toast from "react-hot-toast";
+
 export default function APIConfig() {
   const { data } = useGetThirdPartySecretQuery();
   const [updateSecret, { data: updatedSecret, isSuccess, isLoading }] =
     useUpdateThirdPartySecretMutation();
-  console.log("secret", data);
+
   useEffect(() => {
     if (isSuccess) {
       hideAll();

src/routes/setting/MyAccount.tsx

@@ -1,11 +1,12 @@
-import { useEffect, useState } from "react";
+import { useEffect, useState, MouseEvent } from "react";
 import styled from "styled-components";
-import { useSelector } from "react-redux";
 import toast from "react-hot-toast";
 import { useUpdateAvatarMutation } from "../../app/services/contact";
 import AvatarUploader from "../../common/component/AvatarUploader";
 import ProfileBasicEditModal from "./ProfileBasicEditModal";
 import UpdatePasswordModal from "./UpdatePasswordModal";
+import { useAppSelector } from "../../app/store";
+
 const StyledWrapper = styled.div`
   display: flex;
   flex-direction: column;
@@ -109,28 +110,34 @@ const EditModalInfo = {
     intro: "Enter a new email."
   }
 };
+
 export default function MyAccount() {
   const [passwordModal, setPasswordModal] = useState(false);
   const [editModal, setEditModal] = useState(null);
   const [uploadAvatar, { isSuccess: uploadSuccess }] = useUpdateAvatarMutation();
-  const loginUser = useSelector((store) => {
+  const loginUser = useAppSelector((store) => {
     return store.contacts.byId[store.authData.uid];
   });
+
   useEffect(() => {
     if (uploadSuccess) {
       toast.success("update avatar successfully!");
     }
   }, [uploadSuccess]);
-  const handleBasicEdit = (evt) => {
+
+  const handleBasicEdit = (evt: MouseEvent<HTMLButtonElement>) => {
     const { edit } = evt.target.dataset;
     setEditModal(edit);
   };
+
   const closeBasicEditModal = () => {
     setEditModal(null);
   };
+
   const togglePasswordModal = () => {
     setPasswordModal((prev) => !prev);
   };
+
   if (!loginUser) return null;
   const { uid, avatar, name, email } = loginUser;
   return (

src/routes/setting/Notifications.tsx

@@ -1,12 +1,13 @@
-// import React from "react";
 import styled from "styled-components";
 import useNotification from "../../common/hook/useNotification";
 import StyledToggle from "../../common/component/styled/Toggle";
 import Label from "../../common/component/styled/Label";
+
 const StyledWrapper = styled.div`
   display: flex;
   flex-direction: column;
 `;
+
 export default function Notifications() {
   const { status, enableNotification } = useNotification();
   const handleEnableNotify = () => {
@@ -14,6 +15,7 @@ export default function Notifications() {
       enableNotification();
     }
   };
+
   return (
     <StyledWrapper>
       <Label>Notification Setting:</Label>

src/routes/setting/Overview.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import styled from "styled-components";
-import { useSelector } from "react-redux";
+import toast from "react-hot-toast";
 import {
   useGetServerQuery,
   useUpdateServerMutation,
@@ -13,8 +13,8 @@ import Input from "../../common/component/styled/Input";
 import Label from "../../common/component/styled/Label";
 import Textarea from "../../common/component/styled/Textarea";
 import SaveTip from "../../common/component/SaveTip";
-import toast from "react-hot-toast";
 import StyledRadio from "../../common/component/styled/Radio";
+import { useAppSelector } from "../../app/store";
 
 const StyledWrapper = styled.div`
   position: relative;
@@ -55,7 +55,7 @@ const StyledWrapper = styled.div`
         background: #ecfeff;
         border: 1px solid #ecfeff;
         box-sizing: border-box;
-        box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
+        box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
         border-radius: 8px;
       }
     }
@@ -97,8 +97,9 @@ const StyledWrapper = styled.div`
     }
   }
 `;
+
 export default function Overview() {
-  const loginUser = useSelector((store) => {
+  const loginUser = useAppSelector((store) => {
     return store.contacts.byId[store.authData.uid];
   });
   const [changed, setChanged] = useState(false);

src/routes/setting/ProfileBasicEditModal.tsx

@@ -1,10 +1,13 @@
 // import React from "react";
 import { useEffect, useState } from "react";
 import styled from "styled-components";
+import toast from "react-hot-toast";
 import Input from "../../common/component/styled/Input";
 import { useUpdateInfoMutation } from "../../app/services/contact";
 import StyledModal from "../../common/component/styled/Modal";
 import Button from "../../common/component/styled/Button";
+import Modal from "../../common/component/Modal";
+
 const StyledEdit = styled(StyledModal)`
   .input {
     margin: 48px 0;
@@ -20,8 +23,7 @@ const StyledEdit = styled(StyledModal)`
     }
   }
 `;
-import Modal from "../../common/component/Modal";
-import toast from "react-hot-toast";
+
 export default function ProfileBasicEditModal({
   label = "Username",
   valueKey = "name",

src/routes/setting/UpdatePasswordModal.tsx

@@ -1,10 +1,12 @@
-// import React from "react";
-import { useEffect, useState } from "react";
+import { ChangeEvent, useEffect, useState, FC } from "react";
 import styled from "styled-components";
+import toast from "react-hot-toast";
 import Input from "../../common/component/styled/Input";
 import { useUpdatePasswordMutation, useGetCredentialsQuery } from "../../app/services/auth";
 import StyledModal from "../../common/component/styled/Modal";
 import Button from "../../common/component/styled/Button";
+import Modal from "../../common/component/Modal";
+
 const StyledEdit = styled(StyledModal)`
   .input {
     margin: 16px 0;
@@ -20,9 +22,12 @@ const StyledEdit = styled(StyledModal)`
     }
   }
 `;
-import Modal from "../../common/component/Modal";
-import toast from "react-hot-toast";
-export default function ProfileBasicEditModal({ closeModal }) {
+
+interface Props {
+  closeModal: () => void;
+}
+
+const ProfileBasicEditModal: FC<Props> = ({ closeModal }) => {
   const { data } = useGetCredentialsQuery();
   const [input, setInput] = useState({
     current: "",
@@ -31,7 +36,7 @@ export default function ProfileBasicEditModal({ closeModal }) {
   });
   // const dispatch = useDispatch();
   const [updatePassword, { isLoading, isSuccess }] = useUpdatePasswordMutation();
-  const handleChange = (evt) => {
+  const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {
     const { type } = evt.target.dataset;
     setInput((prev) => {
       return { ...prev, [type]: evt.target.value };
@@ -116,4 +121,6 @@ export default function ProfileBasicEditModal({ closeModal }) {
       </StyledEdit>
     </Modal>
   );
-}
+};
+
+export default ProfileBasicEditModal;

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;

src/routes/setting/index.tsx

@@ -1,10 +1,11 @@
 import { useState } from "react";
-// import { useDispatch } from "react-redux";
 import { useNavigate, useSearchParams } from "react-router-dom";
 import StyledSettingContainer from "../../common/component/StyledSettingContainer";
 import useNavs from "./navs";
 import LogoutConfirmModal from "./LogoutConfirmModal";
-let from = null;
+
+let from: string | null = null;
+
 export default function Setting() {
   const [searchParams] = useSearchParams();
   const navs = useNavs();
@@ -26,6 +27,7 @@ export default function Setting() {
     setLogoutConfirm((prev) => !prev);
   };
   const currNav = flatenNavs.find((n) => n.name == navKey) || flatenNavs[0];
+
   return (
     <>
       <StyledSettingContainer

src/routes/setting/navs.tsx

@@ -1,14 +1,14 @@
-import { useSelector } from "react-redux";
 import MyAccount from "./MyAccount";
 import Overview from "./Overview";
 import Logins from "./config/Logins";
 import ConfigFirebase from "./config/Firebase";
 import ConfigSMTP from "./config/SMTP";
-// import Notifications from "./Notifications";
 import APIConfig from "./APIConfig";
 import ManageMembers from "../../common/component/ManageMembers";
 import FAQ from "../../common/component/FAQ";
 import ConfigAgora from "./config/Agora";
+import { useAppSelector } from "../../app/store";
+
 const navs = [
   {
     title: "General",
@@ -93,18 +93,18 @@ const navs = [
     ]
   }
 ];
+
 const useNavs = () => {
-  const loginUser = useSelector((store) => {
+  const loginUser = useAppSelector((store) => {
     return store.contacts.byId[store.authData.uid];
   });
-  const Navs = navs.filter((nav) => {
+  return navs.filter((nav) => {
     if (loginUser?.is_admin) {
       return true;
     } else {
       return !nav.admin;
     }
   });
-  return Navs;
 };
 
 export default useNavs;