Merge pull request #15 from hdsuperman/refactor/typescript

refactor: conditional props example

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) => {

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;

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>
   );