feat: add more add member entries

src/common/component/AddEntriesMenu.js

@@ -0,0 +1,113 @@
+import { useState } from "react";
+import { useSelector } from "react-redux";
+import styled from "styled-components";
+import { hideAll } from "tippy.js";
+import IconInvite from "../../assets/icons/add.person.svg";
+import IconMention from "../../assets/icons/mention.svg";
+import ChannelIcon from "./ChannelIcon";
+import ChannelModal from "./ChannelModal";
+import ContactsModal from "./ContactsModal";
+import InviteModal from "./InviteModal";
+
+const Styled = styled.ul`
+  z-index: 999;
+  user-select: none;
+  box-shadow: 0px 24px 48px -12px rgba(16, 24, 40, 0.18);
+  border-radius: 12px;
+  color: #616161;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  padding: 4px;
+  .item {
+    border-radius: 3px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 20px;
+    cursor: pointer;
+    padding: 10px 8px;
+    &:hover {
+      background: rgba(116, 127, 141, 0.2);
+    }
+    .icon {
+      width: 20px;
+      height: 20px;
+      path {
+        fill: #475467;
+      }
+    }
+  }
+`;
+export default function AddEntriesMenu() {
+  const currentUser = useSelector(
+    (store) => store.contacts.byId[store.authData.uid]
+  );
+  const [isPrivate, setIsPrivate] = useState(false);
+  const [inviteModalVisible, setInviteModalVisible] = useState(false);
+
+  const [channelModalVisible, setChannelModalVisible] = useState(false);
+  const [contactsModalVisible, setContactsModalVisible] = useState(false);
+  const toggleInviteModalVisible = () => {
+    setInviteModalVisible((prev) => {
+      if (!prev) {
+        hideAll();
+      }
+      return !prev;
+    });
+  };
+  const toggleContactsModalVisible = () => {
+    setContactsModalVisible((prevVisible) => {
+      if (!prevVisible) {
+        hideAll();
+      }
+      return !prevVisible;
+    });
+  };
+  const handleOpenChannelModal = (isPrivate) => {
+    setIsPrivate(isPrivate);
+    setChannelModalVisible(true);
+    hideAll();
+  };
+  const handleCloseModal = () => {
+    setChannelModalVisible(false);
+  };
+  return (
+    <>
+      <Styled>
+        {currentUser?.is_admin && (
+          <li
+            className="item"
+            onClick={handleOpenChannelModal.bind(null, false)}
+          >
+            <ChannelIcon className="icon" />
+            New Channel
+          </li>
+        )}
+        <li className="item" onClick={handleOpenChannelModal.bind(null, true)}>
+          <ChannelIcon personal={true} className="icon" />
+          New Private Channel
+        </li>
+        <li className="item" onClick={toggleContactsModalVisible}>
+          <IconMention className="icon" />
+          New Message
+        </li>
+        <li className="item" onClick={toggleInviteModalVisible}>
+          <IconInvite className="icon" />
+          Invite People
+        </li>
+      </Styled>
+      {channelModalVisible && (
+        <ChannelModal personal={isPrivate} closeModal={handleCloseModal} />
+      )}
+      {contactsModalVisible && (
+        <ContactsModal closeModal={toggleContactsModalVisible} />
+      )}
+      {inviteModalVisible && (
+        <InviteModal closeModal={toggleInviteModalVisible} />
+      )}
+    </>
+  );
+}

src/common/component/Search.js

@@ -1,16 +1,12 @@
-import { useState } from "react";
+// import { useState } from "react";
 import styled from "styled-components";
-import { useSelector } from "react-redux";
+
 import Tippy from "@tippyjs/react";
-import { hideAll } from "tippy.js";
 
 import searchIcon from "../../assets/icons/search.svg?url";
 import addIcon from "../../assets/icons/add.svg?url";
-import mailIcon from "../../assets/icons/mail.svg?url";
+import AddEntriesMenu from "./AddEntriesMenu";
 import Tooltip from "../component/Tooltip";
-import ChannelIcon from "./ChannelIcon";
-import ChannelModal from "./ChannelModal";
-import ContactsModal from "./ContactsModal";
 
 const StyledWrapper = styled.div`
   position: relative;
@@ -38,65 +34,11 @@ const StyledWrapper = styled.div`
   .add {
     cursor: pointer;
   }
-  .popup {
-    z-index: 999;
-    user-select: none;
-    box-shadow: 0px 20px 25px rgba(31, 41, 55, 0.1),
-      0px 10px 10px rgba(31, 41, 55, 0.04);
-    border-radius: 8px;
-    color: #616161;
-    background: #fff;
-    display: flex;
-    flex-direction: column;
-    padding: 4px;
-    .item {
-      border-radius: 3px;
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      font-weight: 600;
-      font-size: 14px;
-      line-height: 20px;
-      cursor: pointer;
-      padding: 10px 8px;
-      &:hover {
-        background: rgba(116, 127, 141, 0.2);
-      }
-    }
-  }
 `;
 export default function Search() {
-  const currentUser = useSelector(
-    (store) => store.contacts.byId[store.authData.uid]
-  );
-  const [channelModalVisible, setChannelModalVisible] = useState(false);
-  const [contactsModalVisible, setContactsModalVisible] = useState(false);
-  const [isPrivate, setIsPrivate] = useState(false);
-  const toggleContactsModalVisible = () => {
-    setContactsModalVisible((prevVisible) => {
-      if (!prevVisible) {
-        hideAll();
-      }
-      return !prevVisible;
-    });
-  };
-  const handleOpenChannelModal = (isPrivate) => {
-    setIsPrivate(isPrivate);
-    setChannelModalVisible(true);
-    hideAll();
-  };
-  const handleCloseModal = () => {
-    setChannelModalVisible(false);
-  };
   console.log("searching");
   return (
     <StyledWrapper>
-      {channelModalVisible && (
-        <ChannelModal personal={isPrivate} closeModal={handleCloseModal} />
-      )}
-      {contactsModalVisible && (
-        <ContactsModal closeModal={toggleContactsModalVisible} />
-      )}
       <div className="search">
         <img src={searchIcon} />
         <input placeholder="Search..." className="input" />
@@ -106,30 +48,7 @@ export default function Search() {
           interactive
           placement="bottom-end"
           trigger="click"
-          content={
-            <ul className="popup">
-              {currentUser?.is_admin && (
-                <li
-                  className="item"
-                  onClick={handleOpenChannelModal.bind(null, false)}
-                >
-                  <ChannelIcon />
-                  New Channel
-                </li>
-              )}
-              <li
-                className="item"
-                onClick={handleOpenChannelModal.bind(null, true)}
-              >
-                <ChannelIcon personal={true} />
-                New Private Channel
-              </li>
-              <li className="item" onClick={toggleContactsModalVisible}>
-                <img src={mailIcon} alt="icon mail" />
-                New Message
-              </li>
-            </ul>
-          }
+          content={<AddEntriesMenu />}
         >
           <img src={addIcon} alt="add icon" className="add" />
         </Tippy>

src/common/component/Server.js

@@ -1,15 +1,11 @@
-import { useState } from "react";
+// import { useState } from "react";
 import styled from "styled-components";
 import { useSelector } from "react-redux";
 import Tippy from "@tippyjs/react";
-import { hideAll } from "tippy.js";
 import addIcon from "../../assets/icons/add.svg?url";
-import mailIcon from "../../assets/icons/mail.svg?url";
 import Tooltip from "./Tooltip";
-import ChannelIcon from "./ChannelIcon";
-import ChannelModal from "./ChannelModal";
-import ContactsModal from "./ContactsModal";
 import { NavLink, useLocation } from "react-router-dom";
+import AddEntriesMenu from "./AddEntriesMenu";
 
 const StyledWrapper = styled.div`
   min-height: 56px;
@@ -53,71 +49,19 @@ const StyledWrapper = styled.div`
   .add {
     cursor: pointer;
   }
-  .popup {
-    z-index: 999;
-    user-select: none;
-    box-shadow: 0px 20px 25px rgba(31, 41, 55, 0.1),
-      0px 10px 10px rgba(31, 41, 55, 0.04);
-    border-radius: 8px;
-    color: #616161;
-    background: #fff;
-    display: flex;
-    flex-direction: column;
-    padding: 4px;
-    .item {
-      border-radius: 3px;
-      display: flex;
-      align-items: center;
-      gap: 4px;
-      font-weight: 600;
-      font-size: 14px;
-      line-height: 20px;
-      cursor: pointer;
-      padding: 10px 8px;
-      &:hover {
-        background: rgba(116, 127, 141, 0.2);
-      }
-    }
-  }
 `;
 export default function Server() {
   const { pathname } = useLocation();
-  const { currentUser, server, userCount } = useSelector((store) => {
+  const { server, userCount } = useSelector((store) => {
     return {
       userCount: store.contacts.ids.length,
-      currentUser: store.contacts.byId[store.authData.uid],
       server: store.server,
     };
   });
-  const [channelModalVisible, setChannelModalVisible] = useState(false);
-  const [contactsModalVisible, setContactsModalVisible] = useState(false);
-  const [isPrivate, setIsPrivate] = useState(false);
-  const toggleContactsModalVisible = () => {
-    setContactsModalVisible((prevVisible) => {
-      if (!prevVisible) {
-        hideAll();
-      }
-      return !prevVisible;
-    });
-  };
-  const handleOpenChannelModal = (isPrivate) => {
-    setIsPrivate(isPrivate);
-    setChannelModalVisible(true);
-    hideAll();
-  };
-  const handleCloseModal = () => {
-    setChannelModalVisible(false);
-  };
   // console.log("server info", server);
   const { name, description, logo } = server;
   return (
     <StyledWrapper>
-      {channelModalVisible && (
-        <ChannelModal personal={isPrivate} closeModal={handleCloseModal} />
-      )}
-      {contactsModalVisible && (
-        <ContactsModal closeModal={toggleContactsModalVisible} />
-      )}
       <NavLink to={`/setting?f=${pathname}`}>
         <div className="server">
           <div className="logo">
@@ -136,30 +80,7 @@ export default function Server() {
           interactive
           placement="bottom-end"
           trigger="click"
-          content={
-            <ul className="popup">
-              {currentUser?.is_admin && (
-                <li
-                  className="item"
-                  onClick={handleOpenChannelModal.bind(null, false)}
-                >
-                  <ChannelIcon />
-                  New Channel
-                </li>
-              )}
-              <li
-                className="item"
-                onClick={handleOpenChannelModal.bind(null, true)}
-              >
-                <ChannelIcon personal={true} />
-                New Private Channel
-              </li>
-              <li className="item" onClick={toggleContactsModalVisible}>
-                <img src={mailIcon} alt="icon mail" />
-                New Message
-              </li>
-            </ul>
-          }
+          content={<AddEntriesMenu />}
         >
           <img src={addIcon} alt="add icon" className="add" />
         </Tippy>