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;

src/common/component/NotificationHub/index.js

@@ -66,13 +66,15 @@ const NotificationHub = ({ usersVersion = 0, afterMid = 0 }) => {
       sse.onerror = (err) => {
         switch (err.eventPhase) {
           case EventSource.CLOSED:
+            console.log("sse error closed error");
+            break;
           case EventSource.CONNECTING:
-            console.log("sse error renew");
+            console.log("sse error connecting error");
             renewToken({ token, refreshToken });
             break;
 
           default:
-            console.error("sse error", err);
+            console.error("sse error error", err);
             // renewToken({ token, refreshToken });
             break;
         }

src/common/component/NotificationHub/useMessageHandler.js

@@ -100,6 +100,24 @@ export default function useMessageHandler(currUser) {
           });
         }
         break;
+      case "reply":
+        {
+          dispatchAddMessage({
+            to,
+            id,
+            self,
+            common: {
+              mid,
+              reply_mid: detailMid,
+              content,
+              content_type,
+              from_uid,
+              created_at,
+              expires_in,
+            },
+          });
+        }
+        break;
       case "reaction": {
         dispatchReaction({
           to,

src/common/component/Send/index.js

@@ -1,11 +1,13 @@
 import { useState, useEffect, useRef } from "react";
-import { MdAdd } from "react-icons/md";
+import { MdAdd, MdClose } from "react-icons/md";
 import TextareaAutosize from "react-textarea-autosize";
-import { useSelector } from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import { useKey } from "rooks";
 
+import { removeReplyMessage } from "../../../app/slices/message.pending";
 import { useSendChannelMsgMutation } from "../../../app/services/channel";
 import { useSendMsgMutation } from "../../../app/services/contact";
+import { useReplyMessageMutation } from "../../../app/services/message";
 import StyledSend from "./styled";
 import useFiles from "./useFiles";
 import UploadModal from "./UploadModal";
@@ -22,14 +24,21 @@ export default function Send({
   id = "",
   dragFiles = [],
 }) {
+  const [replyMessage] = useReplyMessageMutation();
   const { files, setFiles, resetFiles } = useFiles([]);
   const inputRef = useRef();
   const [shift, setShift] = useState(false);
   const [enter, setEnter] = useState(false);
   const [msg, setMsg] = useState("");
-  // const dispatch = useDispatch();
+  const dispatch = useDispatch();
   // 谁发的
-  const from_uid = useSelector((store) => store.authData.user.uid);
+  const { from_uid, reply = null, contacts } = useSelector((store) => {
+    return {
+      contacts: store.contacts,
+      from_uid: store.authData.user.uid,
+      reply: store.pendingMessage.reply[id],
+    };
+  });
   useEffect(() => {
     if (dragFiles.length) {
       setFiles((prev) => [...prev, ...dragFiles]);
@@ -73,12 +82,31 @@ export default function Send({
   };
   const handleSendMessage = () => {
     if (!msg || !id || sendingMessage) return;
-    sendMessage({ id, content: msg, from_uid });
+    if (reply) {
+      replyMessage({ mid: reply.mid, content: msg });
+      dispatch(removeReplyMessage(id));
+    } else {
+      sendMessage({ id, content: msg, from_uid });
+    }
     setMsg("");
   };
+  const removeReply = () => {
+    dispatch(removeReplyMessage(id));
+  };
   return (
     <>
-      <StyledSend className="send">
+      <StyledSend className={`send ${reply ? "reply" : ""}`}>
+        {reply && (
+          <div className="reply">
+            <span className="txt">
+              Replying to
+              <em>{contacts.find((c) => c.uid == reply.from_uid)?.name}</em>
+            </span>
+            <button className="close" onClick={removeReply}>
+              <MdClose size={20} color="#78787C" />
+            </button>
+          </div>
+        )}
         <div className="addon">
           <MdAdd size={20} color="#78787C" />
           <input

src/common/component/Send/styled.js

@@ -14,6 +14,10 @@ const StyledSend = styled.div`
   gap: 18px;
   padding: 4px 18px;
   /* margin: 0 16px; */
+  &.reply {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
   .addon {
     cursor: pointer;
     position: relative;
@@ -71,6 +75,29 @@ const StyledSend = styled.div`
       transform: translateY(-100%);
     }
   }
+  .reply {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+    background-color: #f2f2f5;
+    position: absolute;
+    left: 0;
+    top: 0;
+    transform: translateY(-100%);
+    width: 100%;
+    padding: 6px 18px;
+    .txt {
+      color: #aaa;
+      font-size: 12px;
+      em {
+        font-weight: bold;
+        color: #333;
+        padding: 0 5px;
+      }
+    }
+  }
 `;
 
 export default StyledSend;