feat: message reply

src/common/component/Message/Commands.js

@@ -3,6 +3,7 @@ import { useDispatch, useSelector } from "react-redux";
 import styled from "styled-components";
 import toast from "react-hot-toast";
 import { useOutsideClick } from "rooks";
+import { setReplyMessage } from "../../../app/slices/message.pending";
 import StyledMenu from "../StyledMenu";
 import DeleteMessageConfirm from "./DeleteMessageConfirm";
 import EmojiPicker from "./EmojiPicker";
@@ -39,6 +40,7 @@ const StyledCmds = styled.ul`
   }
 `;
 export default function Commands({
+  contextId = 0,
   message = null,
   mid = 0,
   uid = 0,
@@ -49,13 +51,17 @@ export default function Commands({
   toggleEmojiPopover,
   toggleEditMessage,
 }) {
+  const dispatch = useDispatch();
   const [deleteModalVisible, setDeleteModalVisible] = useState(false);
 
   const currUid = useSelector((store) => store.authData.user.uid);
   const menuRef = useRef(null);
 
-  const handleClick = () => {
-    toast.success("cooming soon");
+  const handleReply = () => {
+    if (contextId) {
+      dispatch(setReplyMessage({ id: contextId, msg: message }));
+    }
+    // toast.success("cooming soon");
   };
 
   useOutsideClick(menuRef, toggleMenu);
@@ -86,7 +92,7 @@ export default function Commands({
           />
         </li>
       ) : (
-        <li className="cmd" onClick={handleClick}>
+        <li className="cmd" onClick={handleReply}>
           <img
             src="https://static.nicegoodthings.com/project/rustchat/icon.forward.svg"
             alt="icon reply"

src/common/component/Message/DeleteMessageConfirm.js

@@ -1,5 +1,5 @@
 // import React from "react";
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 // import { useDispatch } from "react-redux";
 // import BASE_URL from "../../app/config";
 import { useLazyDeleteMessageQuery } from "../../../app/services/message";

src/common/component/Message/EmojiPicker.js

@@ -16,6 +16,9 @@ const StyledPicker = styled.div`
   .emojis {
     display: flex;
     gap: 4px;
+    &.reacting {
+      opacity: 0.6;
+    }
     .emoji {
       cursor: pointer;
       border-radius: 4px;
@@ -43,7 +46,7 @@ export default function EmojiPicker({ mid, reactions = [], hidePicker }) {
   };
   return (
     <StyledPicker ref={wrapperRef}>
-      <ul className="emojis">
+      <ul className={`emojis ${isLoading ? "reacting" : ""}`}>
         {Object.entries(emojis).map(([key, emoji]) => {
           return (
             <li

src/common/component/Message/PreviewMessage.js

@@ -1,11 +1,12 @@
 // import { useEffect, useRef, useState } from "react";
 import dayjs from "dayjs";
 // import { useSelector } from "react-redux";
+import renderContent from "./renderContent";
 import Avatar from "../Avatar";
 import StyledWrapper from "./styled";
 export default function PreviewMessage({ data = null }) {
   if (!data) return null;
-  const { avatar, name, time, content } = data;
+  const { avatar, name, time, content_type, content } = data;
   return (
     <StyledWrapper className={`preview`}>
       <div className="avatar">
@@ -16,7 +17,7 @@ export default function PreviewMessage({ data = null }) {
           <span className="name">{name}</span>
           <i className="time">{dayjs(time).format("YYYY-MM-DD h:mm:ss A")}</i>
         </div>
-        <div className={`down`}>{content}</div>
+        <div className={`down`}>{renderContent(content_type, content)}</div>
       </div>
     </StyledWrapper>
   );

src/common/component/Message/index.js

@@ -13,6 +13,7 @@ import { emojis } from "./EmojiPicker";
 import EditMessage from "./EditMessage";
 import renderContent from "./renderContent";
 export default function Message({
+  reply = null,
   gid = "",
   mid = "",
   uid,
@@ -32,7 +33,12 @@ export default function Message({
   const [menuVisible, setMenuVisible] = useState(false);
   const disptach = useDispatch();
   const avatarRef = useRef(null);
-  const contacts = useSelector((store) => store.contacts);
+  const { contacts, loginedUser } = useSelector((store) => {
+    return {
+      contacts: store.contacts,
+      loginedUser: store.authData.user,
+    };
+  });
   const toggleMenu = () => {
     setMenuVisible((prev) => !prev);
   };
@@ -74,6 +80,7 @@ export default function Message({
         </div>
       </Tippy>
       <div className="details">
+        {reply && <div className="reply">{reply.content}</div>}
         <div className="up">
           <span className="name">{currUser.name}</span>
           <i className="time">{dayjs(time).format("YYYY-MM-DD h:mm:ss A")}</i>
@@ -109,14 +116,18 @@ export default function Message({
       </div>
       {!edit && (
         <Commands
+          contextId={gid || uid}
           message={{
+            mid,
+            from_uid: fromUid,
             name: currUser.name,
             avatar: currUser.avatar,
             time,
-            content: renderContent(content_type, content),
+            content,
+            content_type,
           }}
           reactions={Object.entries(likes ?? {})
-            .filter(([reaction, uids = []]) => uids.includes(currUser.uid))
+            .filter(([, uids = []]) => uids.includes(loginedUser.uid))
             .map(([reaction]) => {
               return reaction;
             })}

src/common/component/Message/styled.js

@@ -30,6 +30,12 @@ const StyledMsg = styled.div`
     display: flex;
     flex-direction: column;
     gap: 8px;
+    .reply {
+      color: #aaa;
+      font-size: 12px;
+      margin-bottom: -10px;
+      /* padding-left: 10px; */
+    }
     .up {
       display: flex;
       align-items: center;