feat: pin message

src/common/component/Message/Commands.js

@@ -8,7 +8,7 @@ import { updateSelectMessages } from "../../../app/slices/ui";
 import { addReplyingMessage } from "../../../app/slices/message";
 import StyledMenu from "../styled/Menu";
 import Tooltip from "../../component/Tooltip";
-import DeleteMessageConfirm from "./DeleteMessageConfirm";
+import DeleteMessageConfirm from "../DeleteMessageConfirm";
 import EmojiPicker from "./EmojiPicker";
 import replyIcon from "../../../assets/icons/reply.svg?url";
 import reactIcon from "../../../assets/icons/reaction.svg?url";
@@ -17,6 +17,7 @@ import editIcon from "../../../assets/icons/edit.svg?url";
 import moreIcon from "../../../assets/icons/more.svg?url";
 import ForwardModal from "../ForwardModal";
 import PinMessageModal from "./PinMessageModal";
+import usePinMessage from "../../hook/usePinMessage";
 const StyledCmds = styled.ul`
   z-index: 9999;
   position: absolute;
@@ -63,6 +64,9 @@ export default function Commands({
   const [deleteModalVisible, setDeleteModalVisible] = useState(false);
   const [forwardModalVisible, setForwardModalVisible] = useState(false);
   const [tippyVisible, setTippyVisible] = useState(false);
+  const { canPin } = usePinMessage(
+    context == "channel" ? contextId : undefined
+  );
   const currUid = useSelector((store) => store.authData.uid);
   const cmdsRef = useRef(null);
   const handleReply = (fromMenu) => {
@@ -92,6 +96,7 @@ export default function Commands({
     dispatch(updateSelectMessages({ context, id: contextId, data: mid }));
     hideAll();
   };
+  const enablePin = context == "channel" && canPin;
   return (
     <StyledCmds
       ref={cmdsRef}
@@ -139,7 +144,7 @@ export default function Commands({
         content={
           <StyledMenu className="menu">
             {/* <li className="item">Edit Message</li> */}
-            {context == "channel" && (
+            {enablePin && (
               <li className="item underline" onClick={togglePinModal}>
                 Pin Message
               </li>
@@ -169,7 +174,7 @@ export default function Commands({
       </Tippy>
 
       {deleteModalVisible && (
-        <DeleteMessageConfirm closeModal={toggleDeleteModal} mid={mid} />
+        <DeleteMessageConfirm closeModal={toggleDeleteModal} mids={mid} />
       )}
       {forwardModalVisible && (
         <ForwardModal mids={[mid]} closeModal={toggleForwardModal} />

src/common/hook/useNormalizeMessage.js

@@ -33,9 +33,11 @@ export default function useNormalizeMessage() {
               : "";
           let user = { ...(data.users[from_user] || {}) };
           user.avatar =
-            typeof user.avatar !== "undefined"
+            user.avatar !== null
               ? `${BASE_URL}/resource/archive/attachment?file_path=${filePath}&attachment_id=${user.avatar}`
               : "";
+
+          console.log("user data", transformedContent, user);
           return {
             user,
             content: transformedContent,

src/common/hook/usePinMessage.js

@@ -0,0 +1,46 @@
+import { useState, useEffect } from "react";
+import { useSelector } from "react-redux";
+import {
+  usePinMessageMutation,
+  useUnpinMessageMutation,
+} from "../../app/services/message";
+export default function usePinMessage(cid = null) {
+  const [pins, setPins] = useState([]);
+  const { channel, loginUser } = useSelector((store) => {
+    return {
+      channel: store.channels.byId[cid],
+      loginUser: store.contacts.byId[store.authData.uid],
+    };
+  });
+  const [pin, { isError, isLoading, isSuccess }] = usePinMessageMutation();
+  const [
+    unpin,
+    { isError: isUnpinError, isLoading: isUnpining, isSuccess: isUnpinSuccess },
+  ] = useUnpinMessageMutation();
+  const pinMessage = (mid) => {
+    if (!mid || !cid) return;
+    pin({ mid, gid: +cid });
+  };
+  const unpinMessage = (mid) => {
+    if (!mid || !cid) return;
+    unpin({ mid, gid: +cid });
+  };
+  useEffect(() => {
+    if (channel) {
+      setPins(channel.pinned_messages);
+    }
+  }, [channel]);
+
+  return {
+    pins,
+    canPin: loginUser.is_admin || channel?.owner == loginUser.uid,
+    pinMessage,
+    unpinMessage,
+    isError,
+    isPining: isLoading,
+    isSuccess,
+    isUnpinError,
+    isUnpining,
+    isUnpinSuccess,
+  };
+}