feat: disallow replying while uploading image/file

src/common/component/Message/Commands.js

@@ -4,12 +4,12 @@ import styled from "styled-components";
 import Tippy from "@tippyjs/react";
 import { hideAll } from "tippy.js";
 import { updateSelectMessages } from "../../../app/slices/ui";
-import { addReplyingMessage } from "../../../app/slices/message";
 // import StyledMenu from "../styled/Menu";
 import ContextMenu from "../ContextMenu";
 import Tooltip from "../../component/Tooltip";
 
 import useFavMessage from "../../hook/useFavMessage";
+import useSendMessage from "../../hook/useSendMessage";
 import ReactionPicker from "./ReactionPicker";
 import replyIcon from "../../../assets/icons/reply.svg?url";
 import reactIcon from "../../../assets/icons/reaction.svg?url";
@@ -82,6 +82,7 @@ export default function Commands({
     DeleteModal,
     ForwardModal,
   } = useMessageOperation({ mid, context, contextId });
+  const { setReplying } = useSendMessage({ context, to: contextId });
   const { addFavorite, isFavorited } = useFavMessage({
     cid: context == "channel" ? contextId : null,
   });
@@ -90,7 +91,7 @@ export default function Commands({
   const cmdsRef = useRef(null);
   const handleReply = (fromMenu) => {
     if (contextId) {
-      dispatch(addReplyingMessage({ id: contextId, mid }));
+      setReplying(mid);
     }
     if (fromMenu) {
       hideAll();

src/common/component/Message/ContextMenu.js

@@ -10,8 +10,7 @@ import IconPin from "../../../assets/icons/pin.svg";
 import IconCopy from "../../../assets/icons/copy.svg";
 import IconSelect from "../../../assets/icons/select.svg";
 import { updateSelectMessages } from "../../../app/slices/ui";
-import { addReplyingMessage } from "../../../app/slices/message";
-
+import useSendMessage from "../../hook/useSendMessage";
 import useMessageOperation from "./useMessageOperation";
 
 export default function MessageContextMenu({
@@ -40,6 +39,7 @@ export default function MessageContextMenu({
     DeleteModal,
   } = useMessageOperation({ mid, contextId, context });
   const dispatch = useDispatch();
+  const { setReplying } = useSendMessage({ context, to: contextId });
   const handleSelect = () => {
     dispatch(updateSelectMessages({ context, id: contextId, data: mid }));
     // hideAll();
@@ -47,7 +47,7 @@ export default function MessageContextMenu({
   const handleReply = () => {
     // console.log("dddd", contextId, mid);
     if (contextId) {
-      dispatch(addReplyingMessage({ id: contextId, mid }));
+      setReplying(mid);
     }
   };
   return (

src/common/component/Send/Replying.js

@@ -1,5 +1,5 @@
 // import React from 'react'
-import { useDispatch, useSelector } from "react-redux";
+import { useSelector } from "react-redux";
 import reactStringReplace from "react-string-replace";
 import Mention from "../Message/Mention";
 import { ContentTypes } from "../../../app/config";
@@ -7,7 +7,7 @@ import MrakdownRender from "../MrakdownRender";
 import closeIcon from "../../../assets/icons/close.circle.svg?url";
 import pictureIcon from "../../../assets/icons/picture.svg?url";
 import { getFileIcon, isImage } from "../../utils";
-import { removeReplyingMessage } from "../../../app/slices/message";
+import useSendMessage from "../../hook/useSendMessage";
 import styled from "styled-components";
 const Styled = styled.div`
   background-color: #f3f4f6;
@@ -124,13 +124,13 @@ const renderContent = (data) => {
   }
   return res;
 };
-export default function Replying({ id, mid }) {
+export default function Replying({ context, id, mid }) {
+  const { removeReplying } = useSendMessage({ to: id, context });
   const { msg, contactsData } = useSelector((store) => {
     return { contactsData: store.contacts.byId, msg: store.message[mid] };
   });
-  const dispatch = useDispatch();
   const removeReply = () => {
-    dispatch(removeReplyingMessage(id));
+    removeReplying();
   };
   if (!msg) return null;
   const { from_uid } = msg;

src/common/component/Send/index.js

@@ -51,7 +51,7 @@ function Send({
       contactsData: store.contacts.byId,
       mode: store.ui.inputMode,
       from_uid: store.authData.uid,
-      replying_mid: store.message.replying[id],
+      replying_mid: store.message.replying[`${context}_${id}`],
       uploadFiles: store.ui.uploadFiles[`${context}_${id}`],
     };
   });
@@ -145,7 +145,9 @@ function Send({
         replying_mid ? "reply" : ""
       } ${context}`}
     >
-      {replying_mid && <Replying mid={replying_mid} id={id} />}
+      {replying_mid && (
+        <Replying context={context} mid={replying_mid} id={id} />
+      )}
       {mode == Modes.text && <UploadFileList context={context} id={id} />}
 
       <div className={`send_box ${mode}`}>