fix: offline mode drafts and jsi quirks

Author: isekovanic

examples/SampleApp/src/screens/ChannelScreen.tsx

@@ -24,6 +24,7 @@ import { useChannelMembersStatus } from '../hooks/useChannelMembersStatus';
 
 import type { StackNavigatorParamList } from '../types';
 import { NetworkDownIndicator } from '../components/NetworkDownIndicator';
+import { useCreateDraftFocusEffect } from '../utils/useCreateDraftFocusEffect.tsx';
 
 export type ChannelScreenNavigationProp = StackNavigationProp<
   StackNavigatorParamList,
@@ -63,6 +64,8 @@ const ChannelHeader: React.FC<ChannelHeaderProps> = ({ channel }) => {
     }
   }, [navigation]);
 
+  useCreateDraftFocusEffect();
+
   const onRightContentPress = useCallback(() => {
     closePicker();
     if (isOneOnOneConversation) {

examples/SampleApp/src/screens/ThreadScreen.tsx

@@ -10,6 +10,7 @@ import type { RouteProp } from '@react-navigation/native';
 
 import type { StackNavigatorParamList } from '../types';
 import { LocalMessage, ThreadState, UserResponse } from 'stream-chat';
+import { useCreateDraftFocusEffect } from '../utils/useCreateDraftFocusEffect.tsx';
 
 const selector = (nextValue: ThreadState) => ({ parentMessage: nextValue.parentMessage }) as const;
 
@@ -39,6 +40,8 @@ const ThreadHeader: React.FC<ThreadHeaderProps> = ({ thread }) => {
     subtitleText = (parentMessage?.user as UserResponse)?.name;
   }
 
+  useCreateDraftFocusEffect();
+
   return (
     <ScreenHeader
       inSafeArea

examples/SampleApp/src/utils/useCreateDraftFocusEffect.tsx

@@ -0,0 +1,20 @@
+import { useCallback } from 'react';
+import { useMessageComposer } from 'stream-chat-react-native';
+import { useFocusEffect, useNavigation } from '@react-navigation/native';
+
+export const useCreateDraftFocusEffect = () => {
+  const navigation = useNavigation();
+  const messageComposer = useMessageComposer();
+
+  useFocusEffect(
+    useCallback(() => {
+      return navigation.addListener('beforeRemove', async () => {
+        try {
+          await messageComposer.createDraft();
+        } catch (e) {
+          console.error('Failed to save draft before remove', e);
+        }
+      });
+    }, [navigation, messageComposer]),
+  );
+};

package/src/components/MessageInput/MessageInput.tsx

@@ -280,14 +280,6 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
     }
   }, [editing, inputBoxRef]);
 
-  // Effect to create draft whenever we un-mount the component.
-  useEffect(
-    () => () => {
-      messageComposer.createDraft();
-    },
-    [messageComposer],
-  );
-
   /**
    * Effect to get the draft data for legacy thread composer and set it to message composer.
    * TODO: This can be removed once we remove legacy thread composer.

package/src/store/apis/upsertChannels.ts

@@ -41,7 +41,7 @@ export const upsertChannels = async ({
     }
 
     if (draft) {
-      queries = queries.concat(await upsertDraft({ draft }));
+      queries = queries.concat(await upsertDraft({ draft, execute: false }));
     }
 
     queries = queries.concat(

package/src/store/apis/upsertDraft.ts

@@ -40,17 +40,23 @@ export const upsertDraft = async ({
     draftMessage: storableDraftMessage,
   });
 
+  const messagesToUpsert = [];
+
   if (draft.quoted_message) {
-    const query = await upsertMessages({ execute: false, messages: [draft.quoted_message] });
+    messagesToUpsert.push(draft.quoted_message);
+  }
+
+  if (draft.parent_message) {
+    messagesToUpsert.push(draft.parent_message);
+  }
+
+  if (messagesToUpsert.length > 0) {
+    const query = await upsertMessages({ execute: false, messages: messagesToUpsert });
     queries.concat(query);
   }
 
   if (execute) {
-    try {
-      await SqliteClient.executeSqlBatch(queries);
-    } catch (error) {
-      console.error(error);
-    }
+    await SqliteClient.executeSqlBatch(queries);
   }
 
   return queries;