feat: normalize message hook

src/app/services/message.js

@@ -114,6 +114,7 @@ export const messageApi = createApi({
 });
 
 export const {
+  useLazyGetArchiveMessageQuery,
   useGetArchiveMessageQuery,
   useLazyGetOGInfoQuery,
   usePrepareUploadFileMutation,

src/common/component/Message/renderContent.js

@@ -1,13 +1,13 @@
 import React, { useState, useEffect } from "react";
 import Linkit from "react-linkify";
 import dayjs from "dayjs";
-import BASE_URL, { ContentTypes } from "../../../app/config";
+import { ContentTypes } from "../../../app/config";
 import Mention from "./Mention";
+import useNormalizeMessage from "../../hook/useNormalizeMessage";
 import MrakdownRender from "../MrakdownRender";
 import FileMessage from "../FileMessage";
 import URLPreview from "./URLPreview";
 import reactStringReplace from "react-string-replace";
-import { useGetArchiveMessageQuery } from "../../../app/services/message";
 const renderContent = ({
   context,
   to,
@@ -45,7 +45,7 @@ const renderContent = ({
           >
             {reactStringReplace(
               content,
-              /(\s{1}\@[0-9]+\s{1})/g,
+              /(\s{1}@[0-9]+\s{1})/g,
               (match, idx) => {
                 console.log("match", match);
                 const uid = match.trim().slice(1);
@@ -112,36 +112,41 @@ const renderContent = ({
   return ctn;
 };
 const ForwardedMessage = ({ context, to, from_uid, id }) => {
+  const { normalizeMessage, messages } = useNormalizeMessage();
   const [forwards, setForwards] = useState(null);
-  const { data, isSuccess } = useGetArchiveMessageQuery(id);
   useEffect(() => {
-    if (isSuccess && data) {
-      const msgs = data.messages.map(
-        ({ content, file_id, thumbnail_id, content_type, properties }, idx) => {
-          const transformedContent =
-            content_type == ContentTypes.file
-              ? `${BASE_URL}/resource/archive/attachment?file_path=${id}&attachment_id=${file_id}`
-              : content;
-          const thumbnail =
-            content_type == ContentTypes.file
-              ? `${BASE_URL}/resource/archive/attachment?file_path=${id}&attachment_id=${thumbnail_id}`
-              : "";
+    if (id) {
+      normalizeMessage(id);
+    }
+  }, [id]);
+
+  useEffect(() => {
+    if (messages) {
+      setForwards(
+        messages.map((msg) => {
+          const {
+            download,
+            content,
+            content_type,
+            properties,
+            thumbnail,
+          } = msg;
           return renderContent({
+            download,
             context,
             to,
             from_uid,
-            content: transformedContent,
+            content,
             content_type,
             properties,
             thumbnail,
           });
-        }
+        })
       );
-      setForwards(msgs);
     }
-  }, [isSuccess, data]);
+  }, [messages, context, to, from_uid]);
 
-  console.log("archive data", data);
+  console.log("archive data", messages);
   if (!id) return null;
 
   return forwards;

src/common/hook/useNormalizeMessage.js

@@ -0,0 +1,55 @@
+import { useState, useEffect } from "react";
+import BASE_URL, { ContentTypes } from "../../app/config";
+import { useLazyGetArchiveMessageQuery } from "../../app/services/message";
+export default function useNormalizeMessage() {
+  const [filePath, setFilePath] = useState(null);
+  const [normalizedMessages, setNormalizedMessages] = useState(null);
+  const [
+    getArchiveMessage,
+    { data, isError, isLoading, isSuccess },
+  ] = useLazyGetArchiveMessageQuery();
+  useEffect(() => {
+    if (data && isSuccess) {
+      const msgs = data.messages.map(
+        ({ content, file_id, thumbnail_id, content_type, properties }) => {
+          const transformedContent =
+            content_type == ContentTypes.file
+              ? `${BASE_URL}/resource/archive/attachment?file_path=${filePath}&attachment_id=${file_id}`
+              : content;
+          const thumbnail =
+            content_type == ContentTypes.file
+              ? `${BASE_URL}/resource/archive/attachment?file_path=${filePath}&attachment_id=${thumbnail_id}`
+              : "";
+          const download =
+            content_type == ContentTypes.file
+              ? `${BASE_URL}/resource/archive/attachment?file_path=${filePath}&attachment_id=${file_id}&download=true`
+              : "";
+          return {
+            content: transformedContent,
+            content_type,
+            properties,
+            download,
+            thumbnail,
+          };
+        }
+      );
+      setNormalizedMessages(msgs);
+    }
+  }, [data, isSuccess, filePath]);
+  useEffect(() => {
+    if (filePath) {
+      getArchiveMessage(filePath);
+    }
+  }, [filePath]);
+
+  const normalizeMessage = (file_path) => {
+    setFilePath(file_path);
+  };
+  return {
+    normalizeMessage,
+    messages: normalizedMessages,
+    isError,
+    isLoading,
+    isSuccess,
+  };
+}

src/routes/chat/DMList/NavItem.js

@@ -1,4 +1,4 @@
-// import React from 'react'
+import { useEffect, useState } from "react";
 import { NavLink, useNavigate, useMatch } from "react-router-dom";
 import { useDrop } from "react-dnd";
 import { useSelector, useDispatch } from "react-redux";
@@ -9,13 +9,19 @@ import relativeTime from "dayjs/plugin/relativeTime";
 import Tippy from "@tippyjs/react";
 import { useReadMessageMutation } from "../../../app/services/message";
 import { removeUserSession } from "../../../app/slices/message.user";
-
+import useNormalizeMessage from "../../../common/hook/useNormalizeMessage";
 import useContextMenu from "../../../common/hook/useContextMenu";
 import ContextMenu from "../../../common/component/ContextMenu";
 dayjs.extend(relativeTime);
 import { renderPreviewMessage } from "../utils";
 import Contact from "../../../common/component/Contact";
+import { ContentTypes } from "../../../app/config";
 const NavItem = ({ uid, mid, unreads, setFiles }) => {
+  const [previewMsg, setPreviewMsg] = useState(null);
+  const {
+    messages: normalizedMessages,
+    normalizeMessage,
+  } = useNormalizeMessage();
   const dispatch = useDispatch();
   const pathMatched = useMatch(`/chat/dm/${uid}`);
   const [updateReadIndex] = useReadMessageMutation();
@@ -49,6 +55,21 @@ const NavItem = ({ uid, mid, unreads, setFiles }) => {
       isActive: monitor.canDrop() && monitor.isOver(),
     }),
   }));
+  useEffect(() => {
+    if (currMsg) {
+      if (currMsg.content_type == ContentTypes.archive) {
+        normalizeMessage(currMsg.content);
+      } else {
+        setPreviewMsg(currMsg);
+      }
+    }
+  }, [currMsg]);
+  useEffect(() => {
+    if (normalizedMessages) {
+      setPreviewMsg(normalizedMessages.pop());
+    }
+  }, [normalizedMessages]);
+
   const handleReadAll = () => {
     const param = { users: [{ uid, mid }] };
     updateReadIndex(param);
@@ -60,9 +81,11 @@ const NavItem = ({ uid, mid, unreads, setFiles }) => {
     }
   };
   if (!currUser) return null;
+  console.log("preview msg", previewMsg, normalizedMessages);
   return (
     <Tippy
       interactive
+      popperOptions={{ strategy: "fixed" }}
       placement="right-start"
       offset={[offset.y, offset.x]}
       visible={contextMenuVisible}
@@ -96,11 +119,13 @@ const NavItem = ({ uid, mid, unreads, setFiles }) => {
         <div className="details">
           <div className="up">
             <span className="name">{currUser.name}</span>
-            {currMsg && <time>{dayjs(currMsg.created_at).fromNow()}</time>}
+            {previewMsg && (
+              <time>{dayjs(previewMsg.created_at).fromNow()}</time>
+            )}
           </div>
 
           <div className="down">
-            <div className="msg">{renderPreviewMessage(currMsg)}</div>
+            <div className="msg">{renderPreviewMessage(previewMsg)}</div>
             {unreads > 0 && (
               <i className={`badge ${unreads > 99 ? "dot" : ""}`}>
                 {unreads > 99 ? null : unreads}

src/routes/chat/utils.js

@@ -52,6 +52,7 @@ export const renderPreviewMessage = (message = null) => {
   if (!message) return null;
   const { content_type, content, properties = {} } = message;
   let res = null;
+
   switch (content_type) {
     case ContentTypes.text:
       {
@@ -62,8 +63,12 @@ export const renderPreviewMessage = (message = null) => {
       {
         res = `[markdown]`;
       }
-
       break;
+    // case ContentTypes.archive:
+    //   {
+    //     res = `[forward]`;
+    //   }
+    //   break;
     case ContentTypes.file:
       {
         const props = properties ?? {};