refactor: lots updates

src/common/component/Message/index.js

@@ -8,12 +8,14 @@ import Reply from "./Reply";
 import Profile from "../Profile";
 import Avatar from "../Avatar";
 import { readMessage } from "../../../app/slices/message";
+import { useReadMessageMutation } from "../../../app/services/message";
 import StyledWrapper from "./styled";
 import Commands from "./Commands";
 
 import EditMessage from "./EditMessage";
 import renderContent from "./renderContent";
-function Message({ contextId = 0, mid = "" }) {
+function Message({ contextId = 0, mid = "", read = true, context = "user" }) {
+  const [updateReadIndex] = useReadMessageMutation();
   const [myRef, inView] = useInViewRef();
   const [edit, setEdit] = useState(false);
   const [emojiPopVisible, setEmojiPopVisible] = useState(false);
@@ -47,10 +49,15 @@ function Message({ contextId = 0, mid = "" }) {
   // console.log("message", mid, messageData[mid]);
 
   useEffect(() => {
-    if (inView && !message.read) {
+    if (inView && !read) {
       disptach(readMessage(mid));
+      const data =
+        context == "user"
+          ? { users: [{ uid: +contextId, mid }] }
+          : { groups: [{ gid: +contextId, mid }] };
+      updateReadIndex(data);
     }
-  }, [mid, message, inView]);
+  }, [mid, read, inView]);
   if (!message) return null;
   const {
     reply_mid,
@@ -65,6 +72,7 @@ function Message({ contextId = 0, mid = "" }) {
   const currUser = contactsData[fromUid] || {};
   return (
     <StyledWrapper
+      data-mid={mid}
       ref={myRef}
       className={`message ${menuVisible ? "menu" : ""} ${
         inView ? "in_view" : ""
@@ -85,7 +93,6 @@ function Message({ contextId = 0, mid = "" }) {
         <div className="up">
           <span className="name">{currUser.name}</span>
           <i className="time">{dayjs(time).format("YYYY-MM-DD h:mm:ss A")}</i>
-          {reactions && <Reaction reactions={reactions} />}
         </div>
         <div className={`down ${sending ? "sending" : ""}`}>
           {edit ? (
@@ -97,6 +104,7 @@ function Message({ contextId = 0, mid = "" }) {
           ) : (
             renderContent(content_type, content, edited)
           )}
+          {reactions && <Reaction mid={mid} reactions={reactions} />}
         </div>
       </div>
       {!edit && (