fix: add checks to draft auto save (#5639)

* fix: disable auto save draft on ShareView screen

* fix: remove unnecessary logic for draft saving

* fix: checks if any text has been changed before saving the draft on return

* chore: fix React warn (dont call state on unmonted component)

* chore: remove unnecessary console.log

* unmount hack

* wip

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 saveMessageDraft = useCallback(() => {
-		if (action === 'edit') return;
+	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]
+	);
 };

app/lib/methods/helpers/emitter.ts

@@ -18,4 +18,5 @@ export type TKeyEmitterEvent = keyof TEmitterEvents;
 
 export const emitter = mitt<TEmitterEvents>();
 
-emitter.on('*', (type, e) => console.log(type, e));
+// uncomment the line below to log all events
+// emitter.on('*', (type, e) => console.log(type, e));

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);
 	}

app/views/RoomView/index.tsx

@@ -985,7 +985,9 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
 		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();