feat: message reaction

src/common/component/Message/index.js

@@ -1,46 +1,16 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import dayjs from "dayjs";
 import { useDispatch, useSelector } from "react-redux";
 import { useInViewRef } from "rooks";
 import Tippy from "@tippyjs/react";
-import Linkify from "react-linkify";
 import Profile from "../Profile";
 import Avatar from "../Avatar";
-import BASE_URL from "../../../app/config";
 import { setChannelMsgRead } from "../../../app/slices/message.channel";
 import { setUserMsgRead } from "../../../app/slices/message.user";
 import StyledWrapper from "./styled";
 import Commands from "./Commands";
-const renderContent = (type, content) => {
-  let ctn = null;
-  switch (type) {
-    case "text/plain":
-      ctn = (
-        <Linkify
-          componentDecorator={(decoratedHref, decoratedText, key) => (
-            <a target="blank" href={decoratedHref} key={key}>
-              {decoratedText}
-            </a>
-          )}
-        >
-          {content}
-        </Linkify>
-      );
-      break;
-    case "image/jpeg":
-      ctn = (
-        <img
-          className="img"
-          src={`${BASE_URL}/resource/image?id=${encodeURIComponent(content)}`}
-        />
-      );
-      break;
-
-    default:
-      break;
-  }
-  return ctn;
-};
+import { emojis } from "./EmojiPicker";
+import renderContent from "./renderContent";
 export default function Message({
   gid = "",
   mid = "",
@@ -51,11 +21,21 @@ export default function Message({
   content_type = "text/plain",
   unread = false,
   pending,
+  removed = false,
+  likes,
 }) {
   const [myRef, inView] = useInViewRef();
+  const [emojiPopVisible, setEmojiPopVisible] = useState(false);
+  const [menuVisible, setMenuVisible] = useState(false);
   const disptach = useDispatch();
   const avatarRef = useRef(null);
   const contacts = useSelector((store) => store.contacts);
+  const toggleMenu = () => {
+    setMenuVisible((prev) => !prev);
+  };
+  const toggleEmojiPopover = () => {
+    setEmojiPopVisible((prev) => !prev);
+  };
   useEffect(() => {
     if (!unread) {
       avatarRef.current?.scrollIntoView();
@@ -73,8 +53,10 @@ export default function Message({
 
   if (!contacts) return null;
   const currUser = contacts.find((c) => c.uid == fromUid) || {};
-  return (
-    <StyledWrapper ref={myRef}>
+  return removed ? (
+    "removed"
+  ) : (
+    <StyledWrapper ref={myRef} className={`${menuVisible ? "menu" : ""}`}>
       <Tippy
         interactive
         placement="left"
@@ -89,12 +71,46 @@ export default function Message({
         <div className="up">
           <span className="name">{currUser.name}</span>
           <i className="time">{dayjs(time).format("YYYY-MM-DD h:mm:ss A")}</i>
+          {likes && (
+            <span className="likes">
+              {Object.entries(
+                likes.reduce((acc, val) => {
+                  return { ...acc, [val]: (acc[val] || 0) + 1 };
+                }, {})
+              ).map(([l, count]) => {
+                return (
+                  <i
+                    className="like"
+                    // data-count={count > 1 ? count : ""}
+                    key={l}
+                  >
+                    {emojis[l]}
+
+                    {count > 1 ? <em>{`+${count}`} </em> : null}
+                  </i>
+                );
+              })}
+            </span>
+          )}
         </div>
         <div className={`down ${pending ? "pending" : ""}`}>
           {renderContent(content_type, content)}
         </div>
       </div>
-      <Commands />
+      <Commands
+        message={{
+          name: currUser.name,
+          avatar: currUser.avatar,
+          time,
+          content: renderContent(content_type, content),
+        }}
+        mid={mid}
+        uid={fromUid}
+        toggleMenu={toggleMenu}
+        menuVisible={menuVisible}
+        emojiPopVisible={emojiPopVisible}
+        toggleEmojiPopover={toggleEmojiPopover}
+      />
     </StyledWrapper>
   );
 }