refactor: invite modal

src/common/component/BlankPlaceholder.js

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import styled from "styled-components";
 import ChannelModal from "../component/ChannelModal";
-import ServerInviteModal from "../component/ServerInviteModal";
+import InviteModal from "../component/InviteModal";
 import IconChat from "../../assets/icons/placeholder.chat.svg";
 import IconAsk from "../../assets/icons/placeholder.question.svg";
 import IconInvite from "../../assets/icons/placeholder.invite.svg";
@@ -121,7 +121,7 @@ export default function BlankPlaceholder({ type = "chat" }) {
         <ContactsModal closeModal={toggleContactListVisible} />
       )}
       {inviteModalVisible && (
-        <ServerInviteModal closeModal={toggleInviteModalVisible} />
+        <InviteModal closeModal={toggleInviteModalVisible} />
       )}
     </>
   );

src/common/component/InviteModal/index.js

@@ -27,28 +27,32 @@ const Styled = styled.div`
   }
 `;
 import Modal from "../Modal";
-export default function ChannelInviteModal({
+// type: server,channel
+export default function InviteModal({
+  type = "server",
   cid = null,
   title = "",
   closeModal,
 }) {
-  const { channel } = useSelector((store) => {
+  const { channel, server } = useSelector((store) => {
     return {
       channel: store.channels.byId[cid],
+      server: store.server,
     };
   });
-  if (!cid) return null;
+  const finalTitle =
+    type == "server" ? server.name : `#${title || channel?.name}`;
   return (
     <Modal>
       <Styled>
         <h2 className="title">
-          Add friends to #{title || channel?.name}{" "}
+          Add friends to {finalTitle}
           <CloseIcon className="close" onClick={closeModal} />
         </h2>
         {!channel?.is_public && (
           <AddMembers cid={cid} closeModal={closeModal} />
         )}
-        <InviteByEmail cid={cid} />
+        <InviteByEmail cid={channel?.is_public ? null : cid} />
       </Styled>
     </Modal>
   );

src/common/component/ServerInviteModal/InviteByEmail.js

@@ -1,123 +0,0 @@
-import { useEffect } from "react";
-import toast from "react-hot-toast";
-import styled from "styled-components";
-import useInviteLink from "../../hook/useInviteLink";
-const Styled = styled.div`
-  padding: 16px 0;
-  .input {
-    position: relative;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    > .copy {
-      position: absolute;
-      right: 4px;
-      top: 50%;
-      transform: translateY(-50%);
-      padding-right: 8px;
-      background: none;
-      font-weight: 500;
-      font-size: 14px;
-      line-height: 20px;
-      color: #22ccee;
-      &:hover {
-        color: #088ab2;
-      }
-    }
-    input {
-      padding-right: 80px;
-      &.invite {
-        padding-right: 50px;
-      }
-    }
-  }
-  > .invite {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    margin-bottom: 16px;
-    /* position: relative; */
-  }
-  > .link {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-    margin-bottom: 12px;
-    /* position: relative; */
-  }
-  label {
-    color: #6b7280;
-    font-style: normal;
-    font-weight: 500;
-    font-size: 14px;
-    line-height: 20px;
-  }
-  > .tip {
-    color: #344054;
-    font-weight: 400;
-    font-size: 12px;
-    line-height: 18px;
-    button {
-      background: none;
-      border: none;
-      color: #22ccee;
-    }
-  }
-`;
-import Button from "../styled/Button";
-import Input from "../styled/Input";
-export default function InviteByEmail() {
-  const {
-    enableSMTP,
-    linkCopied,
-    link,
-    copyLink,
-    generateNewLink,
-    generating,
-  } = useInviteLink();
-  useEffect(() => {
-    if (linkCopied) {
-      toast.success("Invite Link Copied!");
-    }
-  }, [linkCopied]);
-
-  return (
-    <Styled>
-      <div className="invite">
-        <label htmlFor="">Invite by Email</label>
-        <div className="input">
-          <Input
-            readOnly={true}
-            disabled={!enableSMTP}
-            type="email"
-            className="higher "
-            placeholder={enableSMTP ? "Enter Email" : "Enable SMTP First"}
-          />
-          <Button disabled={!enableSMTP} className="send">
-            Send
-          </Button>
-        </div>
-      </div>
-      <div className="link">
-        <label htmlFor="">Or Send invite link to your friends</label>
-        <div className="input">
-          <Input
-            readOnly
-            className="higher invite"
-            placeholder="Generating"
-            value={link}
-          />
-          <button className="copy" onClick={copyLink}>
-            Copy
-          </button>
-        </div>
-      </div>
-      <div className="tip">
-        Invite link expires in 7 days.{" "}
-        <button disabled={generating} className="new" onClick={generateNewLink}>
-          Generate New Link
-        </button>
-      </div>
-    </Styled>
-  );
-}

src/common/component/ServerInviteModal/index.js

@@ -1,44 +0,0 @@
-// import React from 'react'
-import styled from "styled-components";
-import { useSelector } from "react-redux";
-import InviteByEmail from "./InviteByEmail";
-import CloseIcon from "../../../assets/icons/close.svg";
-const Styled = styled.div`
-  display: flex;
-  flex-direction: column;
-  background: #fff;
-  box-shadow: 0px 25px 50px rgba(31, 41, 55, 0.25);
-  border-radius: var(--br);
-  padding: 16px;
-  min-width: 408px;
-  > .title {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-style: normal;
-    font-weight: 600;
-    font-size: 18px;
-    line-height: 28px;
-    color: #374151;
-    .close {
-      cursor: pointer;
-    }
-  }
-`;
-import Modal from "../Modal";
-export default function ServerInviteModal({ closeModal }) {
-  const server = useSelector((store) => {
-    return store.server;
-  });
-  return (
-    <Modal>
-      <Styled>
-        <h2 className="title">
-          Invite friends to {server.name}
-          <CloseIcon className="close" onClick={closeModal} />
-        </h2>
-        <InviteByEmail />
-      </Styled>
-    </Modal>
-  );
-}