fix: empty draft when the message is sent (#5595)

* chore: move draftMessage to helpers

* fix: set draft when the message is sent

app/containers/MessageComposer/components/ComposerInput.tsx

@@ -7,7 +7,7 @@ import { RouteProp, useFocusEffect, useRoute } from '@react-navigation/native';
 import I18n from '../../../i18n';
 import { IAutocompleteItemProps, IComposerInput, IComposerInputProps, IInputSelection, TSetInput } from '../interfaces';
 import { useAutocompleteParams, useFocused, useMessageComposerApi } from '../context';
-import { loadDraftMessage, fetchIsAllOrHere, getMentionRegexp } from '../helpers';
+import { fetchIsAllOrHere, getMentionRegexp } from '../helpers';
 import { useSubscription, useAutoSaveDraft } from '../hooks';
 import sharedStyles from '../../../views/Styles';
 import { useTheme } from '../../../theme';
@@ -24,6 +24,7 @@ import { Services } from '../../../lib/services';
 import log from '../../../lib/methods/helpers/log';
 import { useAppSelector, usePrevious } from '../../../lib/hooks';
 import { ChatsStackParamList } from '../../../stacks/types';
+import { loadDraftMessage } from '../../../lib/methods/draftMessage';
 
 const defaultSelection: IInputSelection = { start: 0, end: 0 };
 

app/containers/MessageComposer/helpers/index.ts

@@ -1,4 +1,3 @@
-export * from './draftMessage';
 export * from './fetchIsAllOrHere';
 export * from './forceJpgExtension';
 export * from './getMentionRegexp';

app/containers/MessageComposer/hooks/useAutoSaveDraft.ts

@@ -1,8 +1,8 @@
 import { useCallback, useEffect, useRef } from 'react';
 
-import { saveDraftMessage } from '../helpers';
 import { useRoomContext } from '../../../views/RoomView/context';
 import { useFocused } from '../context';
+import { saveDraftMessage } from '../../../lib/methods/draftMessage';
 
 export const useAutoSaveDraft = (text = '') => {
 	const { rid, tmid, action, selectedMessages } = useRoomContext();

app/lib/methods/draftMessage.ts

@@ -1,7 +1,7 @@
-import log from '../../../lib/methods/helpers/log';
-import database from '../../../lib/database';
-import { getSubscriptionByRoomId } from '../../../lib/database/services/Subscription';
-import { getThreadById } from '../../../lib/database/services/Thread';
+import database from '../database';
+import { getSubscriptionByRoomId } from '../database/services/Subscription';
+import { getThreadById } from '../database/services/Thread';
+import log from './helpers/log';
 
 export const loadDraftMessage = async ({ rid, tmid }: { rid?: string; tmid?: string }): Promise<string> => {
 	if (tmid) {

app/lib/methods/sendMessage.ts

@@ -8,6 +8,7 @@ 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;
@@ -231,6 +232,9 @@ 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);
 	}