feat: add more add member entries

src/assets/icons/mention.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 1.75C14.5563 1.75 18.25 5.44365 18.25 10C18.25 12.8269 17.0262 14.75 15 14.75C13.7958 14.75 12.8751 14.0708 12.3262 12.9264C11.6738 13.7512 10.7016 14.25 9.5 14.25C7.20741 14.25 5.75 12.4342 5.75 10C5.75 7.53639 7.16021 5.75 9.5 5.75C10.3964 5.75 11.1564 6.01222 11.753 6.47429C11.7643 6.07167 12.0946 5.75 12.5 5.75C12.8797 5.75 13.1935 6.03215 13.2432 6.39823L13.25 6.5V10C13.25 12.1017 13.9808 13.25 15 13.25C16.0192 13.25 16.75 12.1017 16.75 10C16.75 6.27208 13.7279 3.25 10 3.25C6.27208 3.25 3.25 6.27208 3.25 10C3.25 13.7279 6.27208 16.75 10 16.75C10.794 16.75 11.5682 16.6132 12.2981 16.3489C12.6876 16.2079 13.1176 16.4093 13.2587 16.7988C13.3997 17.1883 13.1982 17.6183 12.8088 17.7593C11.9157 18.0827 10.9688 18.25 10 18.25C5.44365 18.25 1.75 14.5563 1.75 10C1.75 5.44365 5.44365 1.75 10 1.75ZM9.5 7.25C8.07681 7.25 7.25 8.29737 7.25 10C7.25 11.6694 8.11734 12.75 9.5 12.75C10.8827 12.75 11.75 11.6694 11.75 10C11.75 8.29737 10.9232 7.25 9.5 7.25Z" fill="#475467"/>
+</svg>

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>