feat: highlight pin message

src/common/component/Message/index.js

@@ -17,6 +17,7 @@ import Tooltip from "../Tooltip";
 import ContextMenu from "./ContextMenu";
 
 import useContextMenu from "../../hook/useContextMenu";
+import usePinMessage from "../../hook/usePinMessage";
 dayjs.extend(isToday);
 dayjs.extend(isYesterday);
 function Message({
@@ -35,6 +36,7 @@ function Message({
   const inviewRef = useInView();
   const [edit, setEdit] = useState(false);
   const avatarRef = useRef(null);
+  const { getPinInfo } = usePinMessage(context == "channel" ? contextId : null);
   const { message = {}, reactionMessageData, contactsData } = useSelector(
     (store) => {
       return {
@@ -83,7 +85,7 @@ function Message({
     ? "Yesterday"
     : null;
 
-  console.log("render message");
+  const pinInfo = getPinInfo(mid);
   // return null;
   return (
     <StyledWrapper
@@ -91,8 +93,8 @@ function Message({
       data-msg-mid={mid}
       ref={inviewRef}
       className={`message ${readOnly ? "readonly" : ""} ${
-        contextMenuVisible ? "contextVisible" : ""
-      } `}
+        pinInfo ? "pinned" : ""
+      } ${contextMenuVisible ? "contextVisible" : ""} `}
     >
       <Tippy
         disabled={readOnly}
@@ -113,7 +115,10 @@ function Message({
         visible={contextMenuVisible}
         hide={hideContextMenu}
       >
-        <div className="details">
+        <div
+          className="details"
+          data-pin-tip={`pinned by ${contactsData[pinInfo?.created_by]?.name}`}
+        >
           <div className="up">
             <span className="name">{currUser.name}</span>
             <Tooltip

src/common/component/Message/styled.js

@@ -15,6 +15,9 @@ const StyledMsg = styled.div`
   &[data-highlight="true"] {
     background: #f5f6f7;
   }
+  &.pinned {
+    background: #ecfdff;
+  }
   &:hover,
   &.contextVisible,
   &.preview {
@@ -107,6 +110,23 @@ const StyledMsg = styled.div`
       }
     }
   }
+  &.pinned {
+    padding-top: 26px;
+    > .details {
+      position: relative;
+      &:before {
+        position: absolute;
+        left: 0;
+        top: -4px;
+        transform: translateY(-100%);
+        content: attr(data-pin-tip);
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 18px;
+        color: #98a2b3;
+      }
+    }
+  }
 `;
 
 export default StyledMsg;

src/common/hook/usePinMessage.js

@@ -25,6 +25,12 @@ export default function usePinMessage(cid = null) {
     if (!mid || !cid) return;
     unpin({ mid, gid: +cid });
   };
+  const getPinInfo = (mid) => {
+    const pins = channel?.pinned_messages;
+    if (pins?.length == 0) return;
+    const pinned = pins.find((p) => p.mid == mid);
+    return pinned;
+  };
   useEffect(() => {
     if (channel) {
       setPins(channel.pinned_messages);
@@ -32,6 +38,7 @@ export default function usePinMessage(cid = null) {
   }, [channel]);
 
   return {
+    getPinInfo,
     channel,
     pins,
     canPin: loginUser.is_admin || channel?.owner == loginUser.uid,