diff --git a/src/atoms/global.ts b/src/atoms/global.ts index 7f1e637..910db58 100644 --- a/src/atoms/global.ts +++ b/src/atoms/global.ts @@ -89,4 +89,14 @@ export const promotionTimeIntervalAtom = atom({ export const promotionsAtom = atom({ key: 'promotionsAtom', default: [], +}); + +export const isFocusedParentGroupAtom = atom({ + key: 'isFocusedParentGroupAtom', + default: false, +}); + +export const isFocusedParentDirectAtom = atom({ + key: 'isFocusedParentDirectAtom', + default: false, }); \ No newline at end of file diff --git a/src/components/Chat/ChatDirect.tsx b/src/components/Chat/ChatDirect.tsx index 092fa82..9fafcff 100644 --- a/src/components/Chat/ChatDirect.tsx +++ b/src/components/Chat/ChatDirect.tsx @@ -20,6 +20,8 @@ import ShortUniqueId from "short-unique-id"; import { ReturnIcon } from '../../assets/Icons/ReturnIcon'; import { ExitIcon } from '../../assets/Icons/ExitIcon'; import { MessageItem, ReplyPreview } from './MessageItem'; +import { isFocusedParentDirectAtom } from '../../atoms/global'; +import { useRecoilState } from 'recoil'; const uid = new ShortUniqueId({ length: 5 }); @@ -27,8 +29,9 @@ const uid = new ShortUniqueId({ length: 5 }); export const ChatDirect = ({ myAddress, isNewChat, selectedDirect, setSelectedDirect, setNewChat, getTimestampEnterChat, myName, balance, close, setMobileViewModeKeepOpen}) => { const { queueChats, addToQueue, processWithNewMessages} = useMessageQueue(); - const [isFocusedParent, setIsFocusedParent] = useState(false); - + const [isFocusedParent, setIsFocusedParent] = useRecoilState( + isFocusedParentDirectAtom + ); const [messages, setMessages] = useState([]) const [isSending, setIsSending] = useState(false) const [directToValue, setDirectToValue] = useState('') @@ -51,11 +54,7 @@ export const ChatDirect = ({ myAddress, isNewChat, selectedDirect, setSelectedDi }; const [messageSize, setMessageSize] = useState(0) - const [, forceUpdate] = useReducer((x) => x + 1, 0); - - const triggerRerender = () => { - forceUpdate(); // Trigger re-render by updating the state - }; + const publicKeyOfRecipientRef = useRef(null) const getPublicKeyFunc = async (address)=> { try { @@ -340,6 +339,14 @@ const sendChatDirect = async ({ chatReference = undefined, messageText, otherDat } finally { } } + +useEffect(()=> { + if(isFocusedParent === false){ + setReplyMessage(null) + setOnEditMessage(null) + clearEditorContent() + } + }, [isFocusedParent]) const clearEditorContent = () => { if (editorRef.current) { editorRef.current.chain().focus().clearContent().run(); @@ -348,10 +355,6 @@ const clearEditorContent = () => { setTimeout(() => { editorRef.current?.chain().blur().run(); setIsFocusedParent(false) - executeEvent("sent-new-message-group", {}) - setTimeout(() => { - triggerRerender(); - }, 300); }, 200); } } @@ -650,9 +653,7 @@ const sendMessage = async ()=> { onClick={()=> { if(isSending) return setIsFocusedParent(false) - setReplyMessage(null) - setOnEditMessage(null) - clearEditorContent() + // Unfocus the editor }} style={{ diff --git a/src/components/Chat/ChatGroup.tsx b/src/components/Chat/ChatGroup.tsx index a21b7b0..dbffb6b 100644 --- a/src/components/Chat/ChatGroup.tsx +++ b/src/components/Chat/ChatGroup.tsx @@ -23,6 +23,8 @@ import { RESOURCE_TYPE_NUMBER_GROUP_CHAT_REACTIONS } from '../../constants/resou import { isExtMsg } from '../../background' import MentionList from './MentionList' import { ChatOptions } from './ChatOptions' +import { isFocusedParentGroupAtom } from '../../atoms/global' +import { useRecoilState } from 'recoil' const uid = new ShortUniqueId({ length: 5 }); @@ -38,7 +40,9 @@ export const ChatGroup = ({selectedGroup, secretKey, setSecretKey, getSecretKey, const [openSnack, setOpenSnack] = React.useState(false); const [infoSnack, setInfoSnack] = React.useState(null); const hasInitialized = useRef(false) - const [isFocusedParent, setIsFocusedParent] = useState(false); + const [isFocusedParent, setIsFocusedParent] = useRecoilState( + isFocusedParentGroupAtom + ); const [replyMessage, setReplyMessage] = useState(null) const hasInitializedWebsocket = useRef(false) @@ -47,7 +51,6 @@ export const ChatGroup = ({selectedGroup, secretKey, setSecretKey, getSecretKey, const groupSocketTimeoutRef = useRef(null); // Group Socket Timeout reference const editorRef = useRef(null); const { queueChats, addToQueue, processWithNewMessages } = useMessageQueue(); - const [, forceUpdate] = useReducer((x) => x + 1, 0); const lastReadTimestamp = useRef(null) @@ -106,9 +109,7 @@ export const ChatGroup = ({selectedGroup, secretKey, setSecretKey, getSecretKey, return Array.from(uniqueMembers); }, [messages]); - const triggerRerender = () => { - forceUpdate(); // Trigger re-render by updating the state - }; + const setEditorRef = (editorInstance) => { editorRef.current = editorInstance; }; @@ -552,6 +553,13 @@ const sendChatGroup = async ({groupId, typeMessage = undefined, chatReference = throw new Error(error) } } +useEffect(()=> { +if(isFocusedParent === false){ + setReplyMessage(null) + setOnEditMessage(null) + clearEditorContent() +} +}, [isFocusedParent]) const clearEditorContent = () => { if (editorRef.current) { editorRef.current.chain().focus().clearContent().run(); @@ -560,10 +568,7 @@ const clearEditorContent = () => { setTimeout(() => { editorRef.current?.chain().blur().run(); setIsFocusedParent(false) - executeEvent("sent-new-message-group", {}) - setTimeout(() => { - triggerRerender(); - }, 300); + }, 200); } } @@ -839,9 +844,9 @@ const sendMessage = async ()=> { onClick={()=> { if(isSending) return setIsFocusedParent(false) - setReplyMessage(null) - setOnEditMessage(null) - clearEditorContent() + // setReplyMessage(null) + // setOnEditMessage(null) + // clearEditorContent() // Unfocus the editor }} diff --git a/src/components/Group/Group.tsx b/src/components/Group/Group.tsx index 32a73e9..5e626d4 100644 --- a/src/components/Group/Group.tsx +++ b/src/components/Group/Group.tsx @@ -1536,7 +1536,7 @@ export const Group = ({ }; - useHandleMobileNativeBack({mobileViewMode, goToHome, setMobileViewMode}) + useHandleMobileNativeBack({mobileViewMode, goToHome, setMobileViewMode, mobileViewModeKeepOpen, setMobileViewModeKeepOpen, newChat, selectedDirect, setSelectedDirect, setNewChat }) const goToAnnouncements = async () => { diff --git a/src/hooks/useHandleMobileNativeBack.tsx b/src/hooks/useHandleMobileNativeBack.tsx index 370e8e0..2b76345 100644 --- a/src/hooks/useHandleMobileNativeBack.tsx +++ b/src/hooks/useHandleMobileNativeBack.tsx @@ -1,16 +1,41 @@ import React, { useCallback, useEffect } from 'react' import { subscribeToEvent, unsubscribeFromEvent } from '../utils/events'; +import { useRecoilState } from 'recoil'; +import { isFocusedParentDirectAtom, isFocusedParentGroupAtom } from '../atoms/global'; -export const useHandleMobileNativeBack = ({mobileViewMode, goToHome, setMobileViewMode}) => { - +export const useHandleMobileNativeBack = ({mobileViewMode, goToHome, setMobileViewMode, mobileViewModeKeepOpen, selectedDirect, newChat, setMobileViewModeKeepOpen, setSelectedDirect, setNewChat}) => { + const [isFocusedParent, setIsFocusedParent] = useRecoilState( + isFocusedParentGroupAtom + ); + const [isFocusedParentDirect, setIsFocusedParentDirect] = useRecoilState( + isFocusedParentDirectAtom + ); const handleMobileNativeBackFunc = useCallback((e) => { + if(mobileViewModeKeepOpen === 'messaging'){ + if(!selectedDirect && !newChat){ + setMobileViewModeKeepOpen("") + } + else if(selectedDirect || newChat){ + if(isFocusedParentDirect){ + setIsFocusedParentDirect(false) + return + } + setSelectedDirect(null) + setNewChat(false) + } + return + } if(mobileViewMode === 'groups'){ goToHome() } else if(mobileViewMode === "group"){ + if(isFocusedParent){ + setIsFocusedParent(false) + return + } setMobileViewMode('groups') } - }, [mobileViewMode]); + }, [mobileViewMode, isFocusedParent, mobileViewModeKeepOpen, newChat, selectedDirect, isFocusedParentDirect]); useEffect(() => { subscribeToEvent("handleMobileNativeBack", handleMobileNativeBackFunc);