refactor: lots updates

src/common/component/Message/index.js

@@ -1,44 +1,34 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useRef, useState, useEffect } from "react";
 import dayjs from "dayjs";
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector, useDispatch } from "react-redux";
 import { useInViewRef } from "rooks";
 import Tippy from "@tippyjs/react";
-
+import Reaction from "./Reaction";
+import Reply from "./Reply";
 import Profile from "../Profile";
 import Avatar from "../Avatar";
-import { setChannelMsgRead } from "../../../app/slices/message.channel";
-import { setUserMsgRead } from "../../../app/slices/message.user";
+import { readMessage } from "../../../app/slices/message";
 import StyledWrapper from "./styled";
 import Commands from "./Commands";
-import { emojis } from "./EmojiPicker";
+
 import EditMessage from "./EditMessage";
 import renderContent from "./renderContent";
-function Message({
-  reply = null,
-  gid = "",
-  mid = "",
-  uid,
-  fromUid,
-  time,
-  content,
-  content_type = "text/plain",
-  unread = false,
-  pending,
-  edited = false,
-  likes = {},
-}) {
+function Message({ contextId = 0, mid = "" }) {
   const [myRef, inView] = useInViewRef();
   const [edit, setEdit] = useState(false);
   const [emojiPopVisible, setEmojiPopVisible] = useState(false);
   const [menuVisible, setMenuVisible] = useState(false);
   const disptach = useDispatch();
   const avatarRef = useRef(null);
-  const { contacts, loginedUser } = useSelector((store) => {
-    return {
-      contacts: store.contacts,
-      loginedUser: store.authData.user,
-    };
-  });
+  const { message = {}, reactionMessageData, contactsData } = useSelector(
+    (store) => {
+      return {
+        reactionMessageData: store.reactionMessage,
+        message: store.message[mid],
+        contactsData: store.contacts.byId,
+      };
+    }
+  );
   const toggleMenu = () => {
     setMenuVisible((prev) => !prev);
   };
@@ -49,20 +39,30 @@ function Message({
     setEmojiPopVisible((prev) => !prev);
   };
   // useEffect(() => {
-  //   if (!unread) {
+  //   if (!read) {
   //     avatarRef.current?.scrollIntoView();
   //   }
-  // }, [unread]);
+  // }, [read]);
+
+  // console.log("message", mid, messageData[mid]);
 
   useEffect(() => {
-    if (inView && unread) {
-      const setMsgRead = gid ? setChannelMsgRead : setUserMsgRead;
-      disptach(setMsgRead({ id: gid || uid, mid }));
+    if (inView && !message.read) {
+      disptach(readMessage(mid));
     }
-  }, [gid, mid, uid, unread, inView]);
-
-  if (!contacts) return null;
-  const currUser = contacts.find((c) => c.uid == fromUid) || {};
+  }, [mid, message, inView]);
+  if (!message) return null;
+  const {
+    reply_mid,
+    from_uid: fromUid,
+    created_at: time,
+    sending,
+    content,
+    content_type = "text/plain",
+    edited,
+  } = message;
+  const reactions = reactionMessageData[mid];
+  const currUser = contactsData[fromUid] || {};
   return (
     <StyledWrapper
       ref={myRef}
@@ -74,36 +74,20 @@ function Message({
         interactive
         placement="left"
         trigger="click"
-        content={<Profile data={currUser} type="card" />}
+        content={<Profile uid={fromUid} type="card" />}
       >
-        <div className="avatar" data-uid={uid} ref={avatarRef}>
+        <div className="avatar" data-uid={fromUid} ref={avatarRef}>
           <Avatar url={currUser.avatar} name={currUser.name} />
         </div>
       </Tippy>
       <div className="details">
-        {reply && <div className="reply">{reply.content}</div>}
+        {reply_mid && <Reply mid={reply_mid} />}
         <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).map(([reaction, uids]) => {
-                return uids.length > 0 ? (
-                  <i
-                    className="like"
-                    // data-count={count > 1 ? count : ""}
-                    key={reaction}
-                  >
-                    {emojis[reaction]}
-
-                    {uids.length > 1 ? <em>{`+${uids.length}`} </em> : null}
-                  </i>
-                ) : null;
-              })}
-            </span>
-          )}
+          {reactions && <Reaction reactions={reactions} />}
         </div>
-        <div className={`down ${pending ? "pending" : ""}`}>
+        <div className={`down ${sending ? "sending" : ""}`}>
           {edit ? (
             <EditMessage
               content={content}
@@ -117,23 +101,9 @@ function Message({
       </div>
       {!edit && (
         <Commands
-          contextId={gid || uid}
-          message={{
-            mid,
-            from_uid: fromUid,
-            name: currUser.name,
-            avatar: currUser.avatar,
-            time,
-            content,
-            content_type,
-          }}
-          reactions={Object.entries(likes ?? {})
-            .filter(([, uids = []]) => uids.includes(loginedUser.uid))
-            .map(([reaction]) => {
-              return reaction;
-            })}
+          contextId={contextId}
           mid={mid}
-          uid={fromUid}
+          from_uid={fromUid}
           toggleMenu={toggleMenu}
           menuVisible={menuVisible}
           emojiPopVisible={emojiPopVisible}