refactor: reaction

src/common/component/Message/Reaction.js

@@ -1,16 +1,16 @@
 // import { useState } from "react";
 import { useSelector } from "react-redux";
 import styled from "styled-components";
+import { getEmojiDataFromNative } from "emoji-mart";
+import AppleEmojiData from "emoji-mart/data/apple.json";
 import Tippy from "@tippyjs/react";
 import { hideAll } from "tippy.js";
-import Emoji from "../Emoji";
+import ReactionItem from "../ReactionItem";
 import ReactionPicker from "./ReactionPicker";
 import Tooltip from "../Tooltip";
 import { useReactMessageMutation } from "../../../app/services/message";
-// import { Emojis } from "../../../app/config";
 import addEmojiIcon from "../../../assets/icons/add.emoji.svg?url";
 const StyledWrapper = styled.span`
-  /* z-index: 99; */
   position: relative;
   margin-top: 8px;
   margin-bottom: 4px;
@@ -18,7 +18,6 @@ const StyledWrapper = styled.span`
   align-items: center;
   gap: 4px;
   width: fit-content;
-  /* align-items: center; */
   .reaction {
     cursor: pointer;
     background-color: #ecfdff;
@@ -67,6 +66,68 @@ const StyledWrapper = styled.span`
     visibility: visible;
   }
 `;
+const StyledDetails = styled.div`
+  position: relative;
+  background: #ffffff;
+  border-radius: var(--br);
+  box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08),
+    0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 8px;
+  &:after {
+    content: "";
+    display: block;
+    width: 12px;
+    height: 12px;
+    background-color: #fff;
+    border-radius: 1px;
+    position: absolute;
+    bottom: -6px;
+    left: calc(50% - 6px);
+    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
+  }
+  &.first:after {
+    left: calc(50% - 16px);
+  }
+  .emoji {
+    width: 32px;
+    height: 32px;
+  }
+  .desc {
+    display: flex;
+    flex-direction: column;
+    width: 140px;
+    font-weight: 500;
+    font-size: 12px;
+    line-height: 18px;
+    color: #1d2939;
+  }
+`;
+const ReactionDetails = ({ uids = [], emoji, index }) => {
+  const contactsData = useSelector((store) => store.contacts.byId);
+  const names = uids.map((id) => {
+    return contactsData[id]?.name;
+  });
+  const emojiData = getEmojiDataFromNative(emoji, "apple", AppleEmojiData);
+  const prefixDesc =
+    names.length > 3
+      ? `${names.join(", ")} and ${names.length - 3} others reacted with`
+      : `${names.join(", ")} reacted with`;
+  console.log("eeee", emojiData);
+  return (
+    <StyledDetails className={index == 0 ? "first" : ""}>
+      <div className="emoji">
+        <ReactionItem native={emoji} />
+      </div>
+      <div className="desc">
+        <span>{prefixDesc}</span>
+        <span>{emojiData?.colons}</span>
+      </div>
+    </StyledDetails>
+  );
+};
 export default function Reaction({ mid, reactions = null }) {
   const [reactWithEmoji] = useReactMessageMutation();
   const { currUid } = useSelector((store) => {
@@ -81,7 +142,7 @@ export default function Reaction({ mid, reactions = null }) {
   if (!reactions || Object.entries(reactions).length == 0) return null;
   return (
     <StyledWrapper className="reactions">
-      {Object.entries(reactions).map(([reaction, uids]) => {
+      {Object.entries(reactions).map(([reaction, uids], idx) => {
         const reacted = uids.findIndex((id) => id == currUid) > -1;
         return uids.length > 0 ? (
           <span
@@ -90,9 +151,19 @@ export default function Reaction({ mid, reactions = null }) {
             // data-count={count > 1 ? count : ""}
             key={reaction}
           >
-            <i className="emoji">
-              <Emoji native={reaction} />
-            </i>
+            <Tippy
+              offset={[0, 20]}
+              // visible={true}
+              interactive
+              placement="top"
+              content={
+                <ReactionDetails uids={uids} emoji={reaction} index={idx} />
+              }
+            >
+              <i className="emoji">
+                <ReactionItem native={reaction} />
+              </i>
+            </Tippy>
 
             {uids.length > 1 ? (
               <em className="count">{`${uids.length}`} </em>

src/common/component/Message/ReactionPicker.js

@@ -3,7 +3,7 @@ import { useSelector } from "react-redux";
 
 import { useReactMessageMutation } from "../../../app/services/message";
 import { Emojis } from "../../../app/config";
-import Emoji from "../Emoji";
+import Emoji from "../ReactionItem";
 const StyledPicker = styled.div`
   background: none;
   z-index: 999;

src/common/component/ReactionItem.js

@@ -18,7 +18,7 @@ const Emojis = {
   "🎉": <EmojiCelebrate className="emoji" />,
 };
 
-export default function EmojiItem({ native = "" }) {
+export default function ReactionItem({ native = "" }) {
   if (!native || !Emojis[native]) return null;
 
   return Emojis[native];

src/common/hook/useStreaming/chat.handler.js

@@ -118,8 +118,14 @@ const handler = (data, dispatch, currState) => {
         switch (type) {
           case "like":
             {
+              // rid reaction's mid
               dispatch(
-                toggleReactionMessage({ from_uid, mid: detailMid, action })
+                toggleReactionMessage({
+                  from_uid,
+                  mid: detailMid,
+                  rid: mid,
+                  action,
+                })
               );
             }