refactor: more TS code

src/common/component/GithubLoginButton.tsx

@@ -25,7 +25,7 @@ const StyledSocialButton = styled(Button)`
 `;
 
 type Props = {
-  client_id: string;
+  client_id?: string;
   type?: "login" | "register";
 };
 

src/routes/chat/ChannelChat/PinList.tsx

@@ -10,6 +10,8 @@ const Styled = styled.div`
   filter: drop-shadow(0px 25px 50px rgba(31, 41, 55, 0.25));
   border-radius: 12px;
   min-width: 486px;
+  max-height: 90vh;
+  overflow-y: scroll;
   /* width: fit-content; */
   > .head {
     font-weight: 600;

src/routes/chat/index.tsx

@@ -32,7 +32,7 @@ export default function ChatPage() {
       ? null
       : { key: `user_${user_id}`, mid: null, unreads: 0, id: user_id, type: "user" };
   // console.log("temp uid", tmpUid);
-  const placeholderVisible = !channel_id && !user_id;
+  const placeholderVisible = channel_id == 0 && user_id == 0;
   return (
     <>
       {channelModalVisible && (
@@ -47,8 +47,8 @@ export default function ChatPage() {
         </div>
         <div className={`right ${placeholderVisible ? "placeholder" : ""}`}>
           {placeholderVisible && <BlankPlaceholder />}
-          {channel_id && <ChannelChat cid={+channel_id} />}
-          {user_id && <DMChat uid={+user_id} />}
+          {channel_id !== 0 && <ChannelChat cid={+channel_id} />}
+          {user_id !== 0 && <DMChat uid={+user_id} />}
         </div>
       </StyledWrapper>
     </>

src/routes/login/MetamaskLoginButton.tsx

@@ -4,32 +4,33 @@ import MetaMaskOnboarding from "@metamask/onboarding";
 import { useLazyGetMetamaskNonceQuery } from "../../app/services/auth";
 import metamaskSvg from "../../assets/icons/metamask.svg?url";
 import { StyledSocialButton } from "./styled";
+import Onboarding from "@metamask/onboarding";
 // import toast from "react-hot-toast";
 
 export default function MetamaskLoginButton({ login }) {
   const [requesting, setRequesting] = useState(false);
   const [accounts, setAccounts] = useState([]);
   const [getNonce] = useLazyGetMetamaskNonceQuery();
-  const onboarding = useRef();
+  const onboarding = useRef<Onboarding | undefined>();
 
   useEffect(() => {
     if (!onboarding.current) {
       onboarding.current = new MetaMaskOnboarding();
     }
-    function handleNewAccounts(newAccounts) {
+    function handleNewAccounts(newAccounts: any) {
       setAccounts(newAccounts);
     }
     if (MetaMaskOnboarding.isMetaMaskInstalled()) {
-      ethereum.on("accountsChanged", handleNewAccounts);
+      window.ethereum.on("accountsChanged", handleNewAccounts);
     }
     return () => {
       if (MetaMaskOnboarding.isMetaMaskInstalled()) {
-        ethereum.removeListener("accountsChanged", handleNewAccounts);
+        window.ethereum.removeListener("accountsChanged", handleNewAccounts);
       }
     };
   }, []);
   useEffect(() => {
-    const startLoginWithMask = async (address) => {
+    const startLoginWithMask = async (address: string) => {
       const { data: nonce, isSuccess } = await getNonce(address);
       if (isSuccess) {
         const signature = await getSignature(address, nonce);
@@ -47,16 +48,16 @@ export default function MetamaskLoginButton({ login }) {
         const [address] = accounts;
         startLoginWithMask(address);
         setRequesting(true);
-        onboarding.current.stopOnboarding();
+        onboarding.current?.stopOnboarding();
       } else {
         // setButtonText(CONNECT_TEXT);
         setRequesting(false);
       }
     }
   }, [accounts]);
-  const getSignature = async (address, nonce) => {
+  const getSignature = async (address: string, nonce: string) => {
     console.log("get sn");
-    const signature = await ethereum.request({
+    const signature = await window.ethereum.request({
       method: "personal_sign",
       params: [nonce, address, "hello from "]
     });
@@ -67,13 +68,13 @@ export default function MetamaskLoginButton({ login }) {
     if (MetaMaskOnboarding.isMetaMaskInstalled()) {
       setRequesting(true);
       try {
-        const tmps = await ethereum.request({
+        const tmps = await window.ethereum.request({
           method: "eth_requestAccounts"
         });
         setAccounts(tmps);
       } catch (error) {
         // toast.error(error.message);
-        ethereum.request({
+        window.ethereum.request({
           method: "wallet_requestPermissions",
           params: [{ eth_accounts: {} }]
         });
@@ -81,7 +82,7 @@ export default function MetamaskLoginButton({ login }) {
       }
       setRequesting(false);
     } else {
-      onboarding.current.startOnboarding();
+      onboarding.current?.startOnboarding();
     }
   };
   return (

src/routes/sendMagicLink/styled.tsx

@@ -8,7 +8,6 @@ const StyledWrapper = styled.div`
   .form {
     max-width: 440px;
     padding: 32px 40px 32px 40px;
-    /* border: 1px solid #eee; */
     box-shadow: 0 4px 8px -2px rgba(16, 24, 40, 0.1), 0px 2px 4px -2px rgba(16, 24, 40, 0.06);
     border-radius: 12px;
     .tips {

src/routes/setting/MyAccount.tsx

@@ -110,10 +110,10 @@ const EditModalInfo = {
     intro: "Enter a new email."
   }
 };
-
+type EditFields = "name" | "email";
 export default function MyAccount() {
   const [passwordModal, setPasswordModal] = useState(false);
-  const [editModal, setEditModal] = useState(null);
+  const [editModal, setEditModal] = useState<EditFields | null>(null);
   const [uploadAvatar, { isSuccess: uploadSuccess }] = useUpdateAvatarMutation();
   const loginUser = useAppSelector((store) => {
     return store.authData.user;
@@ -126,7 +126,7 @@ export default function MyAccount() {
   }, [uploadSuccess]);
 
   const handleBasicEdit = (evt: MouseEvent<HTMLButtonElement>) => {
-    const { edit } = evt.target.dataset;
+    const { edit } = evt.currentTarget.dataset as { edit: EditFields };
     setEditModal(edit);
   };
 

src/routes/setting/Overview.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, ChangeEvent } from "react";
 import styled from "styled-components";
 import toast from "react-hot-toast";
 import {
@@ -14,6 +14,7 @@ import Textarea from "../../common/component/styled/Textarea";
 import SaveTip from "../../common/component/SaveTip";
 import StyledRadio from "../../common/component/styled/Radio";
 import { useAppSelector } from "../../app/store";
+import { LoginConfig, WhoCanSignUp } from "../../types/server";
 
 const StyledWrapper = styled.div`
   position: relative;
@@ -22,29 +23,24 @@ const StyledWrapper = styled.div`
   display: flex;
   flex-direction: column;
   gap: 24px;
-
   .logo {
     display: flex;
     gap: 16px;
-
     .preview {
       width: 96px;
       height: 96px;
     }
-
     .upload {
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       align-items: flex-start;
-
       .tip {
         font-weight: normal;
         font-size: 14px;
         line-height: 20px;
         color: #374151;
       }
-
       .btn {
         padding: 8px 14px;
         font-weight: 500;
@@ -59,13 +55,11 @@ const StyledWrapper = styled.div`
       }
     }
   }
-
   .inputs {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 24px;
-
     .input {
       width: 100%;
       display: flex;
@@ -73,7 +67,6 @@ const StyledWrapper = styled.div`
       align-items: flex-start;
       gap: 8px;
     }
-
     > .radioButton {
       > .label {
         margin-top: 64px;
@@ -81,14 +74,12 @@ const StyledWrapper = styled.div`
         font-size: 14px;
         line-height: 20px;
       }
-
       > .tip {
         font-weight: 400;
         font-size: 14px;
         line-height: 20px;
         color: #667085;
       }
-
       > form {
         margin-top: 16px;
         width: 512px;
@@ -103,7 +94,7 @@ export default function Overview() {
   });
   const [changed, setChanged] = useState(false);
   const [serverValues, setServerValues] = useState<typeof server>(server);
-  const [loginConfigValues, setLoginConfigValues] = useState(null);
+  const [loginConfigValues, setLoginConfigValues] = useState<Partial<LoginConfig>>();
   const { data: loginConfig, refetch: refetchLoginConfig } = useGetLoginConfigQuery();
   const [updateServer, { isSuccess: serverUpdated }] = useUpdateServerMutation();
   const [uploadLogo, { isSuccess: uploadSuccess }] = useUpdateLogoMutation();
@@ -111,16 +102,16 @@ export default function Overview() {
   const handleUpdate = () => {
     const { name, description } = serverValues;
     updateServer({ name, description });
-    if (loginUser?.is_admin) {
+    if (loginUser?.is_admin && loginConfigValues?.who_can_sign_up) {
       updateLoginConfig({
         ...loginConfig,
         who_can_sign_up: loginConfigValues.who_can_sign_up
       });
     }
   };
-  const handleChange = (evt) => {
+  const handleChange = (evt: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     const newValue = evt.target.value;
-    const { type } = evt.target.dataset;
+    const { type = "" } = evt.target.dataset;
     setServerValues((prev) => {
       return { ...prev, [type]: newValue };
     });
@@ -225,7 +216,7 @@ export default function Overview() {
               options={["Everyone", "Invitation Link Only"]}
               values={["EveryOne", "InvitationOnly"]}
               value={whoCanSignUp}
-              onChange={(v) =>
+              onChange={(v: WhoCanSignUp) =>
                 setLoginConfigValues({
                   ...loginConfig,
                   who_can_sign_up: v

src/routes/setting/ProfileBasicEditModal.tsx

@@ -25,7 +25,7 @@ const StyledEdit = styled(StyledModal)`
 
 interface Props {
   label?: string;
-  valueKey?: string;
+  valueKey?: "name" | "email";
   value?: string;
   title?: string;
   intro?: string;

src/routes/setting/UpdatePasswordModal.tsx

@@ -52,7 +52,6 @@ const ProfileBasicEditModal: FC<Props> = ({ closeModal }) => {
     console.log("pwd", input);
     const { current, newPassword } = input;
     updatePassword({ old_password: current, new_password: newPassword });
-    // update({ [valueKey]: input });
   };
   const handleCompare = () => {
     const { newPassword, confirmPassword } = input;

src/routes/settingChannel/DeleteConfirmModal.tsx

@@ -7,7 +7,7 @@ import StyledModal from "../../common/component/styled/Modal";
 import Button from "../../common/component/styled/Button";
 
 interface Props {
-  id?: number;
+  id: number;
   closeModal: () => void;
 }
 

src/routes/settingChannel/Overview.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, ChangeEvent } from "react";
 import styled from "styled-components";
 import toast from "react-hot-toast";
 import {
@@ -13,6 +13,7 @@ import Textarea from "../../common/component/styled/Textarea";
 import SaveTip from "../../common/component/SaveTip";
 import channelIcon from "../../assets/icons/channel.svg?url";
 import { useAppSelector } from "../../app/store";
+import { Channel } from "../../types/channel";
 
 const StyledWrapper = styled.div`
   position: relative;
@@ -52,23 +53,25 @@ export default function Overview({ id = 0 }) {
   });
   const { data, refetch } = useGetChannelQuery(id);
   const [changed, setChanged] = useState(false);
-  const [values, setValues] = useState(null);
+  const [values, setValues] = useState<Channel>();
   const [updateChannelIcon] = useUpdateIconMutation();
   const [updateChannel, { isSuccess: updated }] = useUpdateChannelMutation();
   const handleUpdate = () => {
+    if (!values) return;
     const { name, description } = values;
     updateChannel({ id, name, description });
   };
 
-  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 };
     });
   };
 
-  const updateIcon = (image) => {
+  const updateIcon = (image: File) => {
     updateChannelIcon({ gid: id, image });
   };
 

src/types/user.ts

@@ -28,4 +28,4 @@ export interface UserForAdmin extends User {
 export interface UserForAdminDTO extends Partial<UserForAdmin> {
   id?: number;
 }
-export interface UserDTO extends Pick<User, "name" | "gender" | "language"> {}
+export interface UserDTO extends Partial<Pick<User, "name" | "gender" | "language" | "email">> {}