From b83d687e1eeae95f5caf7ca97a8eea0bd1c1c6eb Mon Sep 17 00:00:00 2001
From: Tristan Yang <yanggc888@163.com>
Date: Sun, 31 Jul 2022 22:57:37 +0800
Subject: [PATCH] refactor: login

---
 src/routes/setting/LogoutConfirmModal.tsx |  1 -
 src/routes/setting/config/Agora.tsx       |  9 ++++++---
 src/routes/setting/config/Firebase.tsx    |  3 ++-
 src/routes/setting/config/Logins.tsx      | 20 ++++++++++++--------
 4 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/routes/setting/LogoutConfirmModal.tsx b/src/routes/setting/LogoutConfirmModal.tsx
index a6a3567e..4cb88c2d 100644
--- a/src/routes/setting/LogoutConfirmModal.tsx
+++ b/src/routes/setting/LogoutConfirmModal.tsx
@@ -68,7 +68,6 @@ const LogoutConfirmModal: FC<Props> = ({ closeModal }) => {
             </Button>
           </>
         }
-        // className="animate__animated animate__fadeInDown animate__faster"
       >
         <div className="clear">
           <label htmlFor="clear_cb" className="txt">
diff --git a/src/routes/setting/config/Agora.tsx b/src/routes/setting/config/Agora.tsx
index 20f610a8..683847fd 100644
--- a/src/routes/setting/config/Agora.tsx
+++ b/src/routes/setting/config/Agora.tsx
@@ -5,6 +5,8 @@ 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";
+import { ChangeEvent } from "react";
+import { AgoraConfig } from "../../../types/server";
 
 export default function ConfigAgora() {
   const { changed, reset, values, setValues, toggleEnable, updateConfig } = useConfig("agora");
@@ -13,10 +15,11 @@ export default function ConfigAgora() {
     updateConfig(values);
   };
 
-  const handleChange = (evt) => {
+  const handleChange = (evt: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     const newValue = evt.target.value;
-    const { type } = evt.target.dataset;
+    const { type = "" } = evt.target.dataset;
     setValues((prev) => {
+      if (!prev) return prev;
       return { ...prev, [type]: newValue };
     });
   };
@@ -29,7 +32,7 @@ export default function ConfigAgora() {
     rtm_key,
     rtm_secret,
     enabled = false
-  } = values ?? {};
+  } = values as AgoraConfig;
 
   return (
     <StyledContainer>
diff --git a/src/routes/setting/config/Firebase.tsx b/src/routes/setting/config/Firebase.tsx
index 0462b7ea..a9c3b460 100644
--- a/src/routes/setting/config/Firebase.tsx
+++ b/src/routes/setting/config/Firebase.tsx
@@ -16,8 +16,9 @@ export default function ConfigFirebase() {
   };
   const handleChange = (evt: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     const newValue = evt.target.value;
-    const { type } = evt.target.dataset;
+    const { type = "" } = evt.target.dataset;
     setValues((prev) => {
+      if (!prev) return prev;
       return { ...prev, [type]: newValue };
     });
   };
diff --git a/src/routes/setting/config/Logins.tsx b/src/routes/setting/config/Logins.tsx
index eaa8c475..1d35215d 100644
--- a/src/routes/setting/config/Logins.tsx
+++ b/src/routes/setting/config/Logins.tsx
@@ -1,3 +1,4 @@
+import { ChangeEvent } from "react";
 import toast from "react-hot-toast";
 import StyledContainer from "./StyledContainer";
 import Toggle from "../../../common/component/styled/Toggle";
@@ -45,22 +46,25 @@ export default function Logins() {
       }
     }
   };
-  const handleGoogleClientIdChange = (evt) => {
+  const handleGoogleClientIdChange = (evt: ChangeEvent<HTMLInputElement>) => {
     updateClientId(evt.target.value);
   };
-  const handleGithubAuthChange = (evt) => {
+  const handleGithubAuthChange = (evt: ChangeEvent<HTMLInputElement>) => {
     const { key } = evt.target.dataset;
     if (key) {
       updateGithubAuthConfig({ [key]: evt.target.value });
     }
   };
-  const handleToggle = (val) => {
+  const handleToggle = (
+    val: Partial<Pick<LoginConfig, "github" | "google" | "password" | "magic_link" | "metamask">>
+  ) => {
     setValues((prev) => {
+      if (!prev) return prev;
       return { ...prev, ...val };
     });
   };
   if (!values) return null;
-  const { google, magic_link, github, metamask, password, oidc = [] } = values ?? {};
+  const { google, magic_link, github, metamask, password, oidc = [] } = values as LoginConfig;
   const valuesChanged = clientIdChanged || changed || githubChanged;
 
   return (
@@ -177,10 +181,10 @@ export default function Logins() {
             <IssuerList
               issuers={oidc}
               onChange={(newOidc) => {
-                setValues((prev) => ({
-                  ...prev,
-                  oidc: newOidc
-                }));
+                setValues((prev) => {
+                  if (!prev) return prev;
+                  return { ...prev, oidc: newOidc };
+                });
               }}
             />
           </div>