feat: favorite message

src/common/component/Message/Commands.js

@@ -1,4 +1,4 @@
-import { useState, useRef } from "react";
+import { useState, useRef, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import styled from "styled-components";
 import Tippy from "@tippyjs/react";
@@ -9,15 +9,18 @@ import { addReplyingMessage } from "../../../app/slices/message";
 import StyledMenu from "../styled/Menu";
 import Tooltip from "../../component/Tooltip";
 import DeleteMessageConfirm from "../DeleteMessageConfirm";
+import useFavMessage from "../../hook/useFavMessage";
 import EmojiPicker from "./EmojiPicker";
 import replyIcon from "../../../assets/icons/reply.svg?url";
 import reactIcon from "../../../assets/icons/reaction.svg?url";
 import editIcon from "../../../assets/icons/edit.svg?url";
-// import bookmarkIcon from "../../../assets/icons/bookmark.svg?url";
+import IconBookmark from "../../../assets/icons/bookmark.svg";
 import moreIcon from "../../../assets/icons/more.svg?url";
 import ForwardModal from "../ForwardModal";
 import PinMessageModal from "./PinMessageModal";
 import usePinMessage from "../../hook/usePinMessage";
+import { ContentTypes } from "../../../app/config";
+import toast from "react-hot-toast";
 const StyledCmds = styled.ul`
   z-index: 9999;
   position: absolute;
@@ -40,10 +43,16 @@ const StyledCmds = styled.ul`
     &:hover {
       background-color: #f3f4f6;
     }
-    img {
+    img,
+    svg {
       width: 24px;
       height: 24px;
     }
+    &.fav {
+      svg path {
+        fill: #667085;
+      }
+    }
   }
   > .picker {
     position: absolute;
@@ -53,18 +62,23 @@ const StyledCmds = styled.ul`
   }
 `;
 export default function Commands({
+  content_type = ContentTypes.text,
   context = "user",
   contextId = 0,
   mid = 0,
   from_uid = 0,
   toggleEditMessage,
 }) {
+  const { addFavorite, isFavorited } = useFavMessage(
+    context == "channel" ? contextId : null
+  );
+  const [mids, setMids] = useState([]);
   const dispatch = useDispatch();
   const [pinModalVisible, setPinModalVisible] = useState(false);
   const [deleteModalVisible, setDeleteModalVisible] = useState(false);
   const [forwardModalVisible, setForwardModalVisible] = useState(false);
   const [tippyVisible, setTippyVisible] = useState(false);
-  const { canPin } = usePinMessage(
+  const { canPin, pins, unpinMessage, isUnpinSuccess } = usePinMessage(
     context == "channel" ? contextId : undefined
   );
   const currUid = useSelector((store) => store.authData.uid);
@@ -79,6 +93,7 @@ export default function Commands({
   };
   const toggleForwardModal = () => {
     hideAll();
+    console.log("midss", mids);
     setForwardModalVisible((prev) => !prev);
   };
   const toggleDeleteModal = () => {
@@ -96,13 +111,55 @@ export default function Commands({
     dispatch(updateSelectMessages({ context, id: contextId, data: mid }));
     hideAll();
   };
+  const handleUnpin = () => {
+    hideAll();
+    unpinMessage(mid);
+  };
+  const handleAddFav = async () => {
+    hideAll();
+    const faved = isFavorited(mid);
+    if (faved) {
+      toast.success("Favorited!");
+      return;
+    }
+    await addFavorite(mid);
+    toast.success("Added Favorites!");
+  };
+  useEffect(() => {
+    if (isUnpinSuccess) {
+      toast.success("Unpin Message Successfully!");
+    }
+  }, [isUnpinSuccess]);
+
+  useEffect(() => {
+    if (content_type == ContentTypes.archive) {
+      // forward message
+      const forwardEle = document.querySelector(
+        `[data-msg-mid='${mid}'] .down [data-forwarded-mids]`
+      );
+      if (forwardEle) {
+        const mids = forwardEle.dataset.forwardedMids.split(",");
+        setMids(mids);
+      }
+    } else {
+      setMids([mid]);
+    }
+  }, [mid, content_type]);
+
   const enablePin = context == "channel" && canPin;
+  const enableEdit =
+    currUid == from_uid &&
+    [ContentTypes.text, ContentTypes.markdown].includes(content_type);
+  const enableReply = currUid != from_uid;
+  const pinned = enablePin ? pins.findIndex((p) => p.mid == mid) > -1 : false;
   return (
     <StyledCmds
       ref={cmdsRef}
       className={`cmds ${tippyVisible ? "visible" : ""}`}
     >
       <Tippy
+        duration={0}
+        delay={[0, 0]}
         onShow={handleTippyVisible.bind(null, true)}
         onHide={handleTippyVisible.bind(null, false)}
         interactive
@@ -116,24 +173,25 @@ export default function Commands({
           </Tooltip>
         </li>
       </Tippy>
-      {currUid == from_uid ? (
+      {enableEdit && (
         <li className="cmd" onClick={toggleEditMessage}>
           <Tooltip placement="top" tip="Edit">
             <img src={editIcon} alt="icon edit" />
           </Tooltip>
         </li>
-      ) : (
+      )}
+      {enableReply && (
         <li className="cmd" onClick={handleReply}>
           <Tooltip placement="top" tip="Reply">
             <img src={replyIcon} alt="icon reply" />
           </Tooltip>
         </li>
       )}
-      {/* <li className="cmd">
+      <li className="cmd fav" onClick={handleAddFav}>
         <Tooltip placement="top" tip="Add to Favorites">
-          <img src={bookmarkIcon} className="toggler" alt="icon bookmark" />
+          <IconBookmark />
         </Tooltip>
-      </li> */}
+      </li>
       <Tippy
         onShow={handleTippyVisible.bind(null, true)}
         onHide={handleTippyVisible.bind(null, false)}
@@ -145,8 +203,11 @@ export default function Commands({
           <StyledMenu className="menu">
             {/* <li className="item">Edit Message</li> */}
             {enablePin && (
-              <li className="item underline" onClick={togglePinModal}>
-                Pin Message
+              <li
+                className="item"
+                onClick={pinned ? handleUnpin : togglePinModal}
+              >
+                {pinned ? `Unpin Message` : `Pin Message`}
               </li>
             )}
             <li className="item" onClick={toggleForwardModal}>
@@ -177,7 +238,7 @@ export default function Commands({
         <DeleteMessageConfirm closeModal={toggleDeleteModal} mids={mid} />
       )}
       {forwardModalVisible && (
-        <ForwardModal mids={[mid]} closeModal={toggleForwardModal} />
+        <ForwardModal mids={mids} closeModal={toggleForwardModal} />
       )}
       {pinModalVisible && (
         <PinMessageModal