From 435da262bb0413012664f0de41e74f768a51b138 Mon Sep 17 00:00:00 2001
From: HD <zhd.superman@gmail.com>
Date: Thu, 30 Jun 2022 00:04:55 +0800
Subject: [PATCH] refactor: conditional props example

---
 src/common/component/InviteModal/AddMembers.tsx    |  4 ++--
 src/common/component/InviteModal/InviteByEmail.tsx | 14 ++++++++++----
 src/common/component/InviteModal/index.tsx         |  6 +++---
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/common/component/InviteModal/AddMembers.tsx b/src/common/component/InviteModal/AddMembers.tsx
index 1bfb8764..2de222b4 100644
--- a/src/common/component/InviteModal/AddMembers.tsx
+++ b/src/common/component/InviteModal/AddMembers.tsx
@@ -98,11 +98,11 @@ const Styled = styled.div`
 `;
 
 interface Props {
-  cid: null | number;
+  cid?: number;
   closeModal: () => void;
 }
 
-const AddMembers: FC<Props> = ({ cid = null, closeModal }) => {
+const AddMembers: FC<Props> = ({ cid, closeModal }) => {
   const [addMembers, { isLoading: isAdding, isSuccess }] = useAddMembersMutation();
   const [selects, setSelects] = useState([]);
   const { channel, contactData } = useAppSelector((store) => {
diff --git a/src/common/component/InviteModal/InviteByEmail.tsx b/src/common/component/InviteModal/InviteByEmail.tsx
index ca07b5f8..02ecd04f 100644
--- a/src/common/component/InviteModal/InviteByEmail.tsx
+++ b/src/common/component/InviteModal/InviteByEmail.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState, ChangeEvent } from "react";
+import { useEffect, useState, ChangeEvent, FC } from "react";
 import toast from "react-hot-toast";
 import styled from "styled-components";
 import useInviteLink from "../../hook/useInviteLink";
@@ -68,7 +68,11 @@ const Styled = styled.div`
   }
 `;
 
-export default function InviteByEmail({ cid = null }) {
+interface Props {
+  cid?: number;
+}
+
+const InviteByEmail: FC<Props> = ({ cid }) => {
   const [email, setEmail] = useState("");
   const { enableSMTP, linkCopied, link, copyLink, generateNewLink, generating } =
     useInviteLink(cid);
@@ -110,10 +114,12 @@ export default function InviteByEmail({ cid = null }) {
       </div>
       <div className="tip">
         Invite link expires in 7 days.{" "}
-        <button disabled={generating} className="new" onClick={generateNewLink}>
+        <button disabled={generating} className="new" onClick={() => generateNewLink()}>
           Generate New Link
         </button>
       </div>
     </Styled>
   );
-}
+};
+
+export default InviteByEmail;
diff --git a/src/common/component/InviteModal/index.tsx b/src/common/component/InviteModal/index.tsx
index ce53531d..8e1d54ec 100644
--- a/src/common/component/InviteModal/index.tsx
+++ b/src/common/component/InviteModal/index.tsx
@@ -33,12 +33,12 @@ const Styled = styled.div`
 
 interface Props {
   type?: "server" | "channel";
-  cid?: null | number;
+  cid?: number;
   title?: string;
   closeModal: () => void;
 }
 
-const InviteModal: FC<Props> = ({ type = "server", cid = null, title = "", closeModal }) => {
+const InviteModal: FC<Props> = ({ type = "server", cid, title = "", closeModal }) => {
   const { channel, server } = useAppSelector((store) => {
     return {
       channel: store.channels.byId[cid],
@@ -54,7 +54,7 @@ const InviteModal: FC<Props> = ({ type = "server", cid = null, title = "", close
           <CloseIcon className="close" onClick={closeModal} />
         </h2>
         {!channel?.is_public && <AddMembers cid={cid} closeModal={closeModal} />}
-        <InviteByEmail cid={channel?.is_public ? null : cid} />
+        <InviteByEmail cid={channel?.is_public ? undefined : cid} />
       </Styled>
     </Modal>
   );