fix: getDraft bug and add draft support for thread list

Author: khushal87

package/src/components/MessageInput/MessageInput.tsx

@@ -324,20 +324,6 @@ const MessageInputWithContext = (props: MessageInputPropsWithContext) => {
     };
   }, [draftsEnabled, 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.
-   */
-  useEffect(() => {
-    const threadId = messageComposer.threadId;
-    if (!threadId || !messageComposer.channel || !messageComposer.compositionIsEmpty) return;
-    messageComposer.channel.getDraft({ parent_id: threadId }).then(({ draft }) => {
-      if (draft) {
-        messageComposer.initState({ composition: draft });
-      }
-    });
-  }, [messageComposer]);
-
   const uploadImagesHandler = async () => {
     const imageToUpload = selectedImages.find((selectedImage) => {
       const uploadedImage = imageUploads.find(

package/src/components/Thread/Thread.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect } from 'react';
 
 import { ThreadFooterComponent } from './components/ThreadFooterComponent';
 
+import { useMessageComposer } from '../../contexts';
 import { useChannelContext } from '../../contexts/channelContext/ChannelContext';
 import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
 import {
@@ -59,6 +60,7 @@ const ThreadWithContext = (props: ThreadPropsWithContext) => {
     additionalMessageInputProps,
     additionalMessageListProps,
     autoFocus = true,
+    client,
     closeThread,
     closeThreadOnDismount = true,
     disabled,
@@ -71,6 +73,37 @@ const ThreadWithContext = (props: ThreadPropsWithContext) => {
     threadInstance,
   } = props;
 
+  const messageComposer = useMessageComposer();
+
+  /**
+   * 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.
+   */
+  useEffect(() => {
+    const threadId = messageComposer.threadId;
+    if (!threadId || !messageComposer.channel || !messageComposer.compositionIsEmpty) return;
+
+    if (client.offlineDb && client.userID) {
+      client.offlineDb
+        .getDraft({
+          cid: messageComposer.channel.cid,
+          currentUserId: client.userID,
+          parent_id: threadId,
+        })
+        .then((draft) => {
+          if (draft) {
+            messageComposer.initState({ composition: draft });
+          }
+        });
+    }
+
+    messageComposer.channel.getDraft({ parent_id: threadId }).then(({ draft }) => {
+      if (draft) {
+        messageComposer.initState({ composition: draft });
+      }
+    });
+  }, [client.offlineDb, client.userID, messageComposer, thread]);
+
   useEffect(() => {
     if (threadInstance?.activate) {
       threadInstance.activate();

package/src/components/ThreadList/ThreadListItem.tsx

@@ -1,7 +1,14 @@
 import React, { useCallback, useMemo } from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 
-import { LocalMessage, Thread, ThreadState } from 'stream-chat';
+import {
+  AttachmentManagerState,
+  DraftMessage,
+  LocalMessage,
+  TextComposerState,
+  Thread,
+  ThreadState,
+} from 'stream-chat';
 
 import {
   TranslationContextValue,
@@ -70,11 +77,13 @@ export const attachmentTypeIconMap = {
 
 const getTitleFromMessage = ({
   currentUserId,
+  draftMessage,
   message,
   t,
 }: {
   t: TranslationContextValue['t'];
   currentUserId?: string;
+  draftMessage?: DraftMessage;
   message?: LocalMessage;
 }) => {
   const attachment = message?.attachments?.at(0);
@@ -86,8 +95,15 @@ const getTitleFromMessage = ({
       } `
     : '';
 
-  const messageBelongsToCurrentUserPrefix =
-    message?.user?.id === currentUserId ? `${t('You')}: ` : '';
+  const messageBelongsToCurrentUserPrefix = draftMessage
+    ? 'Draft:'
+    : message?.user?.id === currentUserId
+      ? `${t('You')}: `
+      : '';
+
+  if (draftMessage) {
+    return `${attachmentIcon}${messageBelongsToCurrentUserPrefix}${draftMessage.text || t('🏙 Attachment...') || 'N/A'}`;
+  }
 
   if (message?.deleted_at && message.parent_id) {
     return `${messageBelongsToCurrentUserPrefix}${t('This reply was deleted')}.`;
@@ -106,6 +122,14 @@ const getTitleFromMessage = ({
   }`;
 };
 
+const textComposerStateSelector = (state: TextComposerState) => ({
+  text: state.text,
+});
+
+const stateSelector = (state: AttachmentManagerState) => ({
+  attachments: state.attachments,
+});
+
 export const ThreadListItemComponent = () => {
   const {
     channel,
@@ -126,6 +150,27 @@ export const ThreadListItemComponent = () => {
       threadListItem,
     },
   } = useTheme();
+  const { text: draftText } = useStateStore(
+    thread.messageComposer.textComposer.state,
+    textComposerStateSelector,
+  );
+
+  const { attachments } = useStateStore(
+    thread.messageComposer.attachmentManager.state,
+    stateSelector,
+  );
+
+  const draftMessage: DraftMessage | undefined = useMemo(
+    () =>
+      !thread.messageComposer.compositionIsEmpty
+        ? {
+            attachments,
+            id: thread.messageComposer.id,
+            text: draftText,
+          }
+        : undefined,
+    [thread.messageComposer, attachments, draftText],
+  );
 
   return (
     <TouchableOpacity
@@ -194,6 +239,7 @@ export const ThreadListItemComponent = () => {
                 ? 'This thread was deleted.'
                 : getTitleFromMessage({
                     currentUserId: client.userID,
+                    draftMessage,
                     message: lastReply,
                     t,
                   })}

package/src/store/apis/getDraft.ts

@@ -45,7 +45,7 @@ export const getDraft = async ({
     channelRow: channelRows[0] as unknown as TableRow<'channels'>,
     currentUserId,
     draftMessageRow: draftMessageRows[0] as unknown as TableRow<'draftMessage'>,
-    draftRow: draftRow[0] as unknown as TableRow<'draft'>,
+    draftRow: draftRow as unknown as TableRow<'draft'>,
     pollRow: polls[0],
     quotedMessageRow: quotedMessageRows,
   });