feat: forward message and channel invite

src/common/component/ForwardModal/index.js

@@ -1,41 +1,79 @@
-import { useState, useEffect } from "react";
-import toast from "react-hot-toast";
-// import { useNavigate } from "react-router-dom";
-// import { useSelector, useDispatch } from "react-redux";
+import { useState } from "react";
+// import toast from "react-hot-toast";
 import Modal from "../Modal";
 import Button from "../styled/Button";
 import Input from "../styled/Input";
+import Channel from "../Channel";
 import Contact from "../Contact";
+// import Channel from "../Channel";
 import Reply from "../Message/Reply";
 import StyledWrapper from "./styled";
+import useForwardMessage from "../../hook/useForwardMessage";
+import useSendMessage from "../../hook/useSendMessage";
+import useFilteredChannels from "../../hook/useFilteredChannels";
+import useFilteredUsers from "../../hook/useFilteredUsers";
 import CloseIcon from "../../../assets/icons/close.circle.svg";
 import StyledCheckbox from "../../component/styled/Checkbox";
-import useFilteredUsers from "../../hook/useFilteredUsers";
-// import { addChannel } from "../../../app/slices/channels";
-
-// import { useCreateChannelMutation } from "../../../app/services/channel";
+import toast from "react-hot-toast";
 
 export default function ForwardModal({ mid, closeModal }) {
-  const [members, setMembers] = useState([]);
+  const [appendText, setAppendText] = useState("");
+  const { sendMessages } = useSendMessage();
+  const { forwardMessage, forwarding } = useForwardMessage();
+  const [selectedMembers, setSelectedMembers] = useState([]);
+  const [selectedChannels, setSelectedChannels] = useState([]);
+  const {
+    channels,
+    // input: channelInput,
+    updateInput: updateChannelInput,
+  } = useFilteredChannels();
   const { contacts, input, updateInput } = useFilteredUsers();
   // const { conactsData, loginUid } = useSelector((store) => {
   //   return { conactsData: store.contacts.byId, loginUid: store.authData.uid };
   // });
-  const handleInputChange = (evt) => {
-    updateInput(evt.target.value);
+  const toggleCheck = ({ currentTarget }) => {
+    const { id, type = "user" } = currentTarget.dataset;
+    const ids = type == "user" ? selectedMembers : selectedChannels;
+    const updateState =
+      type == "user" ? setSelectedMembers : setSelectedChannels;
+    let tmp = ids.includes(+id) ? ids.filter((m) => m != id) : [...ids, +id];
+    console.log(id, currentTarget);
+    updateState(tmp);
   };
-  const toggleCheckMember = ({ currentTarget }) => {
-    const { uid } = currentTarget.dataset;
-    let tmp = members.includes(+uid)
-      ? members.filter((m) => m != uid)
-      : [...members, +uid];
-    console.log(uid, currentTarget);
-    setMembers(tmp);
+  const updateAppendText = (evt) => {
+    setAppendText(evt.target.value);
   };
-  const removeSelected = (uid) => {
-    setMembers(members.filter((m) => m != uid));
+  const handleForward = async () => {
+    await forwardMessage({
+      mids: [mid],
+      users: selectedMembers,
+      channels: selectedChannels,
+    });
+    if (appendText) {
+      await sendMessages({
+        content: appendText,
+        users: selectedMembers,
+        channels: selectedChannels,
+      });
+    }
+    toast.success("Forward Message Successfully");
+    closeModal();
   };
-  const selectedCount = members.length ? `(${members.length})` : null;
+  const removeSelected = (id, from = "user") => {
+    if (from == "user") {
+      setSelectedMembers(selectedMembers.filter((m) => m != id));
+    } else {
+      setSelectedChannels(selectedChannels.filter((cid) => cid != id));
+    }
+  };
+  const handleSearchChange = (evt) => {
+    const newVal = evt.target.value;
+    updateChannelInput(newVal);
+    updateInput(newVal);
+  };
+  let selectedCount = selectedMembers.length + selectedChannels.length;
+  const sendButtonDisabled =
+    (selectedChannels.length == 0 && selectedMembers.length == 0) || forwarding;
   return (
     <Modal>
       <StyledWrapper>
@@ -43,22 +81,46 @@ export default function ForwardModal({ mid, closeModal }) {
           <div className="search">
             <input
               value={input}
-              onChange={handleInputChange}
+              onChange={handleSearchChange}
               placeholder="Search user or channel"
             />
           </div>
-          {contacts && (
-            <ul className="users">
-              {contacts.map((u) => {
+          <ul className="users">
+            {channels &&
+              channels.map((c) => {
+                const { gid } = c;
+                const checked = selectedChannels.includes(gid);
+                console.log({ checked });
+                return (
+                  <li
+                    key={gid}
+                    data-type="channel"
+                    data-id={gid}
+                    className="user channel"
+                    onClick={toggleCheck}
+                  >
+                    <StyledCheckbox
+                      readOnly
+                      checked={checked}
+                      name="cb"
+                      id="cb"
+                    />
+                    <Channel id={gid} interactive={false} />
+                  </li>
+                );
+              })}
+            {contacts &&
+              contacts.map((u) => {
                 const { uid } = u;
-                const checked = members.includes(uid);
+                const checked = selectedMembers.includes(uid);
                 console.log({ checked });
                 return (
                   <li
                     key={uid}
-                    data-uid={uid}
+                    data-id={uid}
+                    data-type="user"
                     className="user"
-                    onClick={toggleCheckMember}
+                    onClick={toggleCheck}
                   >
                     <StyledCheckbox
                       readOnly
@@ -70,13 +132,28 @@ export default function ForwardModal({ mid, closeModal }) {
                   </li>
                 );
               })}
-            </ul>
-          )}
+          </ul>
         </div>
         <div className={`right`}>
           <h3 className="title">Send To {selectedCount}</h3>
           <ul className="selected">
-            {members.map((uid) => {
+            {selectedChannels.map((cid) => {
+              return (
+                <li key={cid} className="item">
+                  <Channel
+                    key={cid}
+                    id={cid}
+                    interactive={false}
+                    avatarSize={40}
+                  />
+                  <CloseIcon
+                    className="remove"
+                    onClick={removeSelected.bind(null, cid, "channel")}
+                  />
+                </li>
+              );
+            })}
+            {selectedMembers.map((uid) => {
               return (
                 <li key={uid} className="item">
                   <Contact
@@ -87,7 +164,7 @@ export default function ForwardModal({ mid, closeModal }) {
                   />
                   <CloseIcon
                     className="remove"
-                    onClick={removeSelected.bind(null, uid)}
+                    onClick={removeSelected.bind(null, uid, "user")}
                   />
                 </li>
               );
@@ -96,13 +173,22 @@ export default function ForwardModal({ mid, closeModal }) {
           <div className="reply">
             <Reply mid={mid} interactive={false} />
           </div>
-          <Input className="input" placeholder="Leave a message"></Input>
+          <Input
+            className="input"
+            placeholder="Leave a message"
+            value={appendText}
+            onChange={updateAppendText}
+          ></Input>
           <div className="btns">
             <Button onClick={closeModal} className="normal cancel">
               Cancel
             </Button>
-            <Button className="normal" disabled={members.length == 0}>
-              Send To {selectedCount}
+            <Button
+              className="normal"
+              disabled={sendButtonDisabled}
+              onClick={handleForward}
+            >
+              Send To {selectedCount == 0 ? null : `(${selectedCount})`}
             </Button>
           </div>
         </div>

src/common/component/ForwardModal/styled.js

@@ -11,7 +11,7 @@ const StyledWrapper = styled.div`
   transition: all 0.5s ease;
   overflow: hidden;
   .left {
-    width: 260px;
+    width: 276px;
     /* height: 100%; */
     box-shadow: inset -1px 0px 0px rgba(0, 0, 0, 0.1);
     overflow-y: scroll;