refactor: send and message display

src/common/component/Message/Commands.js

@@ -66,10 +66,13 @@ export default function Commands({
   const currUid = useSelector((store) => store.authData.uid);
   const menuRef = useRef(null);
 
-  const handleReply = () => {
+  const handleReply = (fromMenu = false) => {
     if (contextId) {
       dispatch(addReplyingMessage({ id: contextId, mid }));
     }
+    if (fromMenu) {
+      toggleMenu();
+    }
     // toast.success("cooming soon");
   };
 
@@ -93,7 +96,7 @@ export default function Commands({
           <img src={editIcon} alt="icon edit" />
         </li>
       ) : (
-        <li className="cmd" onClick={handleReply}>
+        <li className="cmd" onClick={handleReply.bind(null, false)}>
           <img src={replyIcon} alt="icon reply" />
         </li>
       )}
@@ -104,7 +107,9 @@ export default function Commands({
         <StyledMenu className="menu" ref={menuRef}>
           {/* <li className="item">Edit Message</li> */}
           <li className="item underline">Pin Message</li>
-          <li className="item">Reply</li>
+          <li className="item" onClick={handleReply.bind(null, true)}>
+            Reply
+          </li>
           {currUid == from_uid && (
             <li className="item danger" onClick={toggleDeleteModal}>
               Delete Message

src/common/component/Message/PreviewMessage.js

@@ -9,7 +9,7 @@ export default function PreviewMessage({ mid = 0 }) {
     return { msg: store.message[mid], contactsData: store.contacts.byId };
   });
   if (!msg) return null;
-  const { from_uid, created_at, content_type, content } = msg;
+  const { from_uid, created_at, content_type, content, thumbnail } = msg;
   const { name, avatar } = contactsData[from_uid];
   return (
     <StyledWrapper className={`preview`}>
@@ -23,7 +23,9 @@ export default function PreviewMessage({ mid = 0 }) {
             {dayjs(created_at).format("YYYY-MM-DD h:mm:ss A")}
           </i>
         </div>
-        <div className={`down`}>{renderContent(content_type, content)}</div>
+        <div className={`down`}>
+          {renderContent({ content_type, content, thumbnail })}
+        </div>
       </div>
     </StyledWrapper>
   );

src/common/component/Message/Reaction.js

@@ -7,7 +7,7 @@ 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;
+  /* z-index: 99; */
   position: relative;
   margin-top: 8px;
   margin-bottom: 4px;

src/common/component/Message/Reply.js

@@ -1,15 +1,79 @@
-import React from "react";
+// import React from "react";
 import styled from "styled-components";
 import { useSelector } from "react-redux";
-
+import { ContentTypes } from "../../../app/config";
+import Avatar from "../Avatar";
 const Styled = styled.div`
-  color: #aaa;
-  font-size: 12px;
-  margin-bottom: -10px;
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  background: #e5e7eb;
+  border-radius: var(--br);
+  gap: 8px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-bottom: 4px;
+  .user {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    .avatar {
+      width: 16px;
+      height: 16px;
+      border-radius: 50%;
+    }
+    .name {
+      font-style: normal;
+      font-weight: 500;
+      font-size: 14px;
+      line-height: 20px;
+      color: #06b6d4;
+    }
+  }
+  .content {
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 20px;
+    color: #616161;
+    .pic {
+      display: inherit;
+      max-width: 34px;
+    }
+  }
   /* padding-left: 10px; */
 `;
+const renderContent = (data) => {
+  const { content_type, content, thumbnail } = data;
+  let res = null;
+  switch (content_type) {
+    case ContentTypes.text:
+      res = content;
+      break;
+    case ContentTypes.image:
+    case ContentTypes.imageJPG:
+      res = <img className="pic" src={thumbnail} />;
+      break;
+
+    default:
+      break;
+  }
+  return res;
+};
 export default function Reply({ mid }) {
-  const data = useSelector((store) => store.message[mid]);
+  const { data, users } = useSelector((store) => {
+    return { data: store.message[mid], users: store.contacts.byId };
+  });
   if (!data) return null;
-  return <Styled className="reply">{data.content}</Styled>;
+  const currUser = users[data.from_uid];
+  if (!currUser) return null;
+  return (
+    <Styled className="reply">
+      <div className="user">
+        <Avatar className="avatar" url={currUser.avatar} name={currUser.name} />
+        <span className="name">{currUser.name}</span>
+      </div>
+      <div className="content">{renderContent(data)}</div>
+    </Styled>
+  );
 }

src/common/component/Message/index.js

@@ -65,8 +65,10 @@ function Message({ contextId = 0, mid = "", read = true, context = "user" }) {
     created_at: time,
     sending,
     content,
+    thumbnail,
     content_type = "text/plain",
     edited,
+    properties,
   } = message;
   const reactions = reactionMessageData[mid];
   const currUser = contactsData[fromUid] || {};
@@ -89,12 +91,12 @@ function Message({ contextId = 0, mid = "", read = true, context = "user" }) {
         </div>
       </Tippy>
       <div className="details">
-        {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>
         </div>
         <div className={`down ${sending ? "sending" : ""}`}>
+          {reply_mid && <Reply mid={reply_mid} />}
           {edit ? (
             <EditMessage
               content={content}
@@ -102,7 +104,13 @@ function Message({ contextId = 0, mid = "", read = true, context = "user" }) {
               cancelEdit={toggleEditMessage}
             />
           ) : (
-            renderContent(content_type, content, edited)
+            renderContent({
+              content_type,
+              properties,
+              content,
+              thumbnail,
+              edited,
+            })
           )}
           {reactions && <Reaction mid={mid} reactions={reactions} />}
         </div>

src/common/component/Message/renderContent.js

@@ -1,10 +1,16 @@
 import Linkify from "react-linkify";
 import dayjs from "dayjs";
-import BASE_URL from "../../../app/config";
 import MrakdownRender from "../MrakdownRender";
-const renderContent = (type, content, edited = false) => {
+import { getDefaultSize } from "../../utils";
+const renderContent = ({
+  properties,
+  content_type,
+  content,
+  thumbnail,
+  edited = false,
+}) => {
   let ctn = null;
-  switch (type) {
+  switch (content_type) {
     case "text/plain":
       ctn = (
         <>
@@ -40,16 +46,17 @@ const renderContent = (type, content, edited = false) => {
       break;
     case "image/png":
     case "image/jpeg":
-      ctn = (
-        <img
-          className="img preview"
-          src={
-            content.startsWith("blob")
-              ? content
-              : `${BASE_URL}/resource/image?id=${encodeURIComponent(content)}`
-          }
-        />
-      );
+      {
+        const { width, height } = getDefaultSize(properties);
+        ctn = (
+          <img
+            className="img preview"
+            style={{ width: `${width}px`, height: `${height}px` }}
+            data-origin={content}
+            src={thumbnail}
+          />
+        );
+      }
       break;
 
     default: