From 4a3b478082d535845aeeee7dd7e2e8618ffbe293 Mon Sep 17 00:00:00 2001
From: zerosoul <yanggc888@163.com>
Date: Fri, 6 May 2022 17:53:41 +0800
Subject: [PATCH] feat: add invite server modal in placholder page

---
 src/common/component/BlankPlaceholder.js      |  12 +-
 .../ServerInviteModal/InviteByEmail.js        | 123 ++++++++++++++++++
 .../component/ServerInviteModal/index.js      |  44 +++++++
 3 files changed, 177 insertions(+), 2 deletions(-)
 create mode 100644 src/common/component/ServerInviteModal/InviteByEmail.js
 create mode 100644 src/common/component/ServerInviteModal/index.js

diff --git a/src/common/component/BlankPlaceholder.js b/src/common/component/BlankPlaceholder.js
index c06ccd59..5541cf32 100644
--- a/src/common/component/BlankPlaceholder.js
+++ b/src/common/component/BlankPlaceholder.js
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import styled from "styled-components";
 import ChannelModal from "../component/ChannelModal";
+import ServerInviteModal from "../component/ServerInviteModal";
 import IconChat from "../../assets/icons/placeholder.chat.svg";
 import IconAsk from "../../assets/icons/placeholder.question.svg";
 import IconInvite from "../../assets/icons/placeholder.invite.svg";
@@ -66,6 +67,7 @@ const Styled = styled.div`
 `;
 export default function BlankPlaceholder({ type = "chat" }) {
   const server = useSelector((store) => store.server);
+  const [inviteModalVisible, setInviteModalVisible] = useState(false);
   const [createChannelVisible, setCreateChannelVisible] = useState(false);
   const [contactListVisible, setContactListVisible] = useState(false);
   const toggleChannelModalVisible = () => {
@@ -74,6 +76,9 @@ export default function BlankPlaceholder({ type = "chat" }) {
   const toggleContactListVisible = () => {
     setContactListVisible((prev) => !prev);
   };
+  const toggleInviteModalVisible = () => {
+    setInviteModalVisible((prev) => !prev);
+  };
   const chatTip =
     type == "chat"
       ? "Create a Channel to Start a Conversation"
@@ -91,10 +96,10 @@ export default function BlankPlaceholder({ type = "chat" }) {
           </p>
         </div>
         <div className="boxes">
-          <NavLink className="box" to={"#"}>
+          <div className="box" onClick={toggleInviteModalVisible}>
             <IconInvite className="icon" />
             <div className="txt">Invite your friends or teammates</div>
-          </NavLink>
+          </div>
           <div className="box" onClick={chatHanlder}>
             <IconChat className="icon" />
             <div className="txt">{chatTip}</div>
@@ -115,6 +120,9 @@ export default function BlankPlaceholder({ type = "chat" }) {
       {contactListVisible && (
         <ContactsModal closeModal={toggleContactListVisible} />
       )}
+      {inviteModalVisible && (
+        <ServerInviteModal closeModal={toggleInviteModalVisible} />
+      )}
     </>
   );
 }
diff --git a/src/common/component/ServerInviteModal/InviteByEmail.js b/src/common/component/ServerInviteModal/InviteByEmail.js
new file mode 100644
index 00000000..04e3ad4e
--- /dev/null
+++ b/src/common/component/ServerInviteModal/InviteByEmail.js
@@ -0,0 +1,123 @@
+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>
+  );
+}
diff --git a/src/common/component/ServerInviteModal/index.js b/src/common/component/ServerInviteModal/index.js
new file mode 100644
index 00000000..08d870bd
--- /dev/null
+++ b/src/common/component/ServerInviteModal/index.js
@@ -0,0 +1,44 @@
+// 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>
+  );
+}