diff --git a/src/app/slices/message.js b/src/app/slices/message.js index 2c369481..f2c59124 100644 --- a/src/app/slices/message.js +++ b/src/app/slices/message.js @@ -52,14 +52,14 @@ const messageSlice = createSlice({ }); }, addReplyingMessage(state, action) { - const { id, mid } = action.payload; - console.log("to ", id, mid); - state.replying[id] = mid; + const { key, mid } = action.payload; + console.log("to ", key, mid); + state.replying[key] = mid; }, removeReplyingMessage(state, action) { - const id = action.payload; - if (state.replying[id]) { - delete state.replying[id]; + const key = action.payload; + if (state.replying[key]) { + delete state.replying[key]; } }, }, diff --git a/src/common/component/Message/Commands.js b/src/common/component/Message/Commands.js index 0ce3fbcc..79558822 100644 --- a/src/common/component/Message/Commands.js +++ b/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(); diff --git a/src/common/component/Message/ContextMenu.js b/src/common/component/Message/ContextMenu.js index fd01c71b..0380fd92 100644 --- a/src/common/component/Message/ContextMenu.js +++ b/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 ( diff --git a/src/common/component/Send/Replying.js b/src/common/component/Send/Replying.js index 2dc4806f..fd7bdbd6 100644 --- a/src/common/component/Send/Replying.js +++ b/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; diff --git a/src/common/component/Send/index.js b/src/common/component/Send/index.js index f310b780..9195c224 100644 --- a/src/common/component/Send/index.js +++ b/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 && ( + + )} {mode == Modes.text && }
diff --git a/src/common/hook/useSendMessage.js b/src/common/hook/useSendMessage.js index 5572847e..e0d786f5 100644 --- a/src/common/hook/useSendMessage.js +++ b/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, diff --git a/src/common/hook/useUploadFile.js b/src/common/hook/useUploadFile.js index e4e8d235..ac55776e 100644 --- a/src/common/hook/useUploadFile.js +++ b/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);