diff --git a/app/containers/MessageComposer/hooks/useAutoSaveDraft.ts b/app/containers/MessageComposer/hooks/useAutoSaveDraft.ts index 88bc7081bf..a846237f9c 100644 --- a/app/containers/MessageComposer/hooks/useAutoSaveDraft.ts +++ b/app/containers/MessageComposer/hooks/useAutoSaveDraft.ts @@ -1,24 +1,28 @@ +import { useRoute } from '@react-navigation/native'; import { useCallback, useEffect, useRef } from 'react'; +import { saveDraftMessage } from '../../../lib/methods/draftMessage'; import { useRoomContext } from '../../../views/RoomView/context'; import { useFocused } from '../context'; -import { saveDraftMessage } from '../../../lib/methods/draftMessage'; export const useAutoSaveDraft = (text = '') => { + const route = useRoute(); const { rid, tmid, action, selectedMessages } = useRoomContext(); const focused = useFocused(); const oldText = useRef(''); const intervalRef = useRef(); + const mounted = useRef(true); + const saveMessageDraft = useCallback(() => { + if (route.name === 'ShareView') return; if (action === 'edit') return; - const draftMessage = selectedMessages?.length ? JSON.stringify({ quotes: selectedMessages, msg: text }) : text; - if (oldText.current !== draftMessage) { + if (oldText.current !== draftMessage || (oldText.current === '' && draftMessage === '')) { oldText.current = draftMessage; saveDraftMessage({ rid, tmid, draftMessage }); } - }, [action, rid, tmid, text, selectedMessages?.length]); + }, [action, rid, tmid, text, selectedMessages?.length, route.name]); useEffect(() => { if (focused) { @@ -29,7 +33,23 @@ export const useAutoSaveDraft = (text = '') => { return () => { clearInterval(intervalRef.current); - saveMessageDraft(); }; }, [focused, saveMessageDraft]); + + // hack to call saveMessageDraft when component is unmounted + useEffect(() => { + () => {}; + return () => { + mounted.current = false; + }; + }, []); + + useEffect( + () => () => { + if (!mounted.current) { + saveMessageDraft(); + } + }, + [saveMessageDraft] + ); }; diff --git a/app/lib/methods/helpers/emitter.ts b/app/lib/methods/helpers/emitter.ts index cc7c0ca13e..3cc7f6c11c 100644 --- a/app/lib/methods/helpers/emitter.ts +++ b/app/lib/methods/helpers/emitter.ts @@ -18,4 +18,5 @@ export type TKeyEmitterEvent = keyof TEmitterEvents; export const emitter = mitt(); -emitter.on('*', (type, e) => console.log(type, e)); +// uncomment the line below to log all events +// emitter.on('*', (type, e) => console.log(type, e)); diff --git a/app/lib/methods/sendMessage.ts b/app/lib/methods/sendMessage.ts index 9dbc6bbb3d..1702cc0b16 100644 --- a/app/lib/methods/sendMessage.ts +++ b/app/lib/methods/sendMessage.ts @@ -8,7 +8,6 @@ import { Encryption } from '../encryption'; import { E2EType, IMessage, IUser, TMessageModel } from '../../definitions'; import sdk from '../services/sdk'; import { E2E_MESSAGE_TYPE, E2E_STATUS, messagesStatus } from '../constants'; -import { saveDraftMessage } from './draftMessage'; const changeMessageStatus = async (id: string, status: number, tmid?: string, message?: IMessage) => { const db = database.active; @@ -232,9 +231,6 @@ export async function sendMessage( } await sendMessageCall(message); - // clear draft message when message is sent and app is in background or closed - // do not affect the user experience when the app is in the foreground because the hook useAutoSaveDraft will handle it - saveDraftMessage({ rid, tmid, draftMessage: '' }); } catch (e) { log(e); } diff --git a/app/views/RoomView/index.tsx b/app/views/RoomView/index.tsx index 9747f82cb6..10d1e14f2a 100644 --- a/app/views/RoomView/index.tsx +++ b/app/views/RoomView/index.tsx @@ -985,7 +985,9 @@ class RoomView extends React.Component { const { rid } = this.state.room; const { user } = this.props; sendMessage(rid, message, this.tmid, user, tshow).then(() => { - this.setLastOpen(null); + if (this.mounted) { + this.setLastOpen(null); + } Review.pushPositiveEvent(); }); this.resetAction();