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}`}>

src/common/hook/useSendMessage.js

@@ -1,18 +1,19 @@
 // import second from 'first'
-import { removeReplyingMessage } from "../../app/slices/message";
+import {
+  removeReplyingMessage,
+  addReplyingMessage,
+} from "../../app/slices/message";
 import { useSendChannelMsgMutation } from "../../app/services/channel";
 import { useSendMsgMutation } from "../../app/services/contact";
 import { useReplyMessageMutation } from "../../app/services/message";
-import { useDispatch } from "react-redux";
-export default function useSendMessage(
-  props = {
-    context: "user",
-    from: null,
-    to: null,
-  }
-) {
+import { useDispatch, useSelector } from "react-redux";
+import toast from "react-hot-toast";
+export default function useSendMessage(props) {
+  const { context = "user", from = null, to = null } = props || {};
   const dispatch = useDispatch();
-  const { context = "user", from = null, to = null } = props;
+  const stageFiles = useSelector(
+    (store) => store.ui.uploadFiles[`${context}_${to}`] || []
+  );
   const [
     replyMessage,
     { isError: replyErr, isLoading: replying, isSuccess: replySuccess },
@@ -63,7 +64,7 @@ export default function useSendMessage(
     ...rest
   }) => {
     if (reply_mid) {
-      dispatch(removeReplyingMessage(to));
+      removeReplying();
       await replyMessage({
         id: to,
         reply_mid,
@@ -83,7 +84,19 @@ export default function useSendMessage(
       });
     }
   };
+  const setReplying = (mid) => {
+    if (stageFiles.length !== 0) {
+      toast.error("Only text is supported when replying a message");
+      return;
+    }
+    dispatch(addReplyingMessage({ mid, key: `${context}_${to}` }));
+  };
+  const removeReplying = () => {
+    dispatch(removeReplyingMessage(`${context}_${to}`));
+  };
   return {
+    setReplying,
+    removeReplying,
     sendMessages,
     sendMessage,
     isError: channelError || userError || replyErr,

src/common/hook/useUploadFile.js

@@ -15,7 +15,7 @@ export default function useUploadFile(props = {}) {
   const { stageFiles, replying } = useSelector((store) => {
     return {
       stageFiles: store.ui.uploadFiles[`${context}_${id}`] || [],
-      replying: store.message.replying[id],
+      replying: store.message.replying[`${context}_${id}`],
     };
   });
   const [data, setData] = useState(null);