fixes for thread recovery

Author: vishalnarkhede

src/components/Channel/Channel.tsx

@@ -1508,24 +1508,63 @@ const ChannelWithContext = <
     Re,
     Us
   >['loadMoreThread'] = async () => {
-    if (threadLoadingMore || !thread?.id) return;
+    if (threadLoadingMore || !thread?.id) {
+      return;
+    }
     setThreadLoadingMore(true);
 
-    if (channel) {
-      const parentID = thread.id;
+    try {
+      if (channel) {
+        const parentID = thread.id;
+
+        /**
+         * In the channel is re-initializing, then threads may get wiped out during the process
+         * (check `addMessagesSorted` method on channel.state). In those cases, we still want to
+         * preserve the messages on active thread, so lets simply copy messages from UI state to
+         * `channel.state`.
+         */
+        channel.state.threads[parentID] = threadMessages;
+        const oldestMessageID = threadMessages?.[0]?.id;
+
+        const limit = 50;
+        const queryResponse = await channel.getReplies(parentID, {
+          id_lt: oldestMessageID,
+          limit,
+        });
+
+        const updatedHasMore = queryResponse.messages.length === limit;
+        const updatedThreadMessages = channel.state.threads[parentID] || [];
+        loadMoreThreadFinished(updatedHasMore, updatedThreadMessages);
+      }
+    } catch (err) {
+      console.warn('Message pagination request failed with error', err);
+      setError(err);
+      setThreadLoadingMore(false);
+      throw err;
+    }
+  };
 
-      const oldMessages = channel.state.threads[parentID] || [];
-      const oldestMessageID = oldMessages?.[0]?.id;
+  const reloadThread = async () => {
+    if (!channel || !thread?.id) return;
+
+    setThreadLoadingMore(true);
+    try {
+      const parentID = thread.id;
 
       const limit = 50;
+      channel.state.threads[parentID] = [];
       const queryResponse = await channel.getReplies(parentID, {
-        id_lt: oldestMessageID,
-        limit,
+        limit: 50,
       });
 
       const updatedHasMore = queryResponse.messages.length === limit;
       const updatedThreadMessages = channel.state.threads[parentID] || [];
       loadMoreThreadFinished(updatedHasMore, updatedThreadMessages);
+    } catch (err) {
+      console.warn('Thread loading request failed with error', err);
+      setError(err);
+      setThreadLoadingMore(false);
+      throw err;
     }
   };
 
@@ -1707,6 +1746,7 @@ const ChannelWithContext = <
     closeThread,
     loadMoreThread,
     openThread,
+    reloadThread,
     setThreadLoadingMore,
     thread,
     threadHasMore,

src/components/Channel/hooks/useCreateThreadContext.ts

@@ -25,6 +25,7 @@ export const useCreateThreadContext = <
   closeThread,
   loadMoreThread,
   openThread,
+  reloadThread,
   setThreadLoadingMore,
   thread,
   threadHasMore,
@@ -50,6 +51,7 @@ export const useCreateThreadContext = <
       closeThread,
       loadMoreThread,
       openThread,
+      reloadThread,
       setThreadLoadingMore,
       thread,
       threadHasMore,
@@ -58,6 +60,7 @@ export const useCreateThreadContext = <
     }),
     [
       allowThreadMessagesInChannel,
+      loadMoreThread,
       threadHasMore,
       threadId,
       threadLoadingMore,

src/components/MessageList/MessageList.tsx

@@ -68,10 +68,7 @@ import {
   useTranslationContext,
 } from '../../contexts/translationContext/TranslationContext';
 
-import type {
-  FormatMessageResponse,
-  Channel as StreamChannel,
-} from 'stream-chat';
+import type { Channel as StreamChannel } from 'stream-chat';
 
 import type {
   DefaultAttachmentType,
@@ -358,9 +355,9 @@ const MessageListWithContext = <
    * So these values only get used if `initialScrollToFirstUnreadMessage` prop is true.
    */
   const topMessageBeforeUpdate = useRef<
-    FormatMessageResponse<At, Ch, Co, Me, Re, Us>
+    MessageType<At, Ch, Co, Ev, Me, Re, Us>
   >();
-  const topMessageAfterUpdate = channel?.state.messages[0];
+  const topMessageAfterUpdate = messageList[messageList.length - 1];
 
   const [autoscrollToTop, setAutoscrollToTop] = useState(false);
 
@@ -519,8 +516,8 @@ const MessageListWithContext = <
       if (
         (hasNewMessage && isMyMessage) ||
         messageListLengthAfterUpdate < messageListLengthBeforeUpdate.current ||
-        (topMessageBeforeUpdate.current &&
-          topMessageAfterUpdate &&
+        (topMessageBeforeUpdate.current?.created_at &&
+          topMessageAfterUpdate?.created_at &&
           topMessageBeforeUpdate.current.created_at <
             topMessageAfterUpdate.created_at)
       ) {
@@ -544,11 +541,10 @@ const MessageListWithContext = <
       }
     };
 
-    // If channel is not upto date, then always display scrollToBottom button.
-    if (!channel?.state.isUpToDate && !scrollToBottomButtonVisible) {
-      setScrollToBottomButtonVisible(true);
-    } else if (channel?.state.isUpToDate) {
+    if (threadList || channel?.state.isUpToDate) {
       scrollToBottomIfNeeded();
+    } else if (!scrollToBottomButtonVisible) {
+      setScrollToBottomButtonVisible(true);
     }
 
     /**
@@ -1006,7 +1002,7 @@ const MessageListWithContext = <
           <ScrollToBottomButton
             onPress={goToNewMessages}
             showNotification={scrollToBottomButtonVisible}
-            unreadCount={channel?.countUnread()}
+            unreadCount={threadList ? 0 : channel?.countUnread()}
           />
         </>
       )}

src/components/Thread/Thread.tsx

@@ -6,7 +6,10 @@ import {
   MessageInput as DefaultMessageInput,
   MessageInputProps,
 } from '../MessageInput/MessageInput';
-
+import {
+  ChatContextValue,
+  useChatContext,
+} from '../../contexts/chatContext/ChatContext';
 import {
   MessagesContextValue,
   useMessagesContext,
@@ -37,10 +40,11 @@ type ThreadPropsWithContext<
   Me extends UnknownType = DefaultMessageType,
   Re extends UnknownType = DefaultReactionType,
   Us extends UnknownType = DefaultUserType
-> = Pick<MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'MessageList'> &
+> = Pick<ChatContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'client'> &
+  Pick<MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'MessageList'> &
   Pick<
     ThreadContextValue<At, Ch, Co, Ev, Me, Re, Us>,
-    'closeThread' | 'loadMoreThread' | 'thread'
+    'closeThread' | 'loadMoreThread' | 'reloadThread' | 'thread'
   > & {
     /**
      * Additional props for underlying MessageInput component.
@@ -90,10 +94,12 @@ const ThreadWithContext = <
     additionalMessageInputProps,
     additionalMessageListProps,
     autoFocus = true,
+    client,
     closeThread,
     closeThreadOnDismount = true,
     disabled,
     loadMoreThread,
+    reloadThread,
     MessageInput = DefaultMessageInput,
     MessageList,
     onThreadDismount,
@@ -108,6 +114,18 @@ const ThreadWithContext = <
     if (thread?.id && thread.reply_count) {
       loadMoreThreadAsync();
     }
+
+    const recoveredHandler = client.on('connection.recovered', reloadThread);
+    const changedHandler = client.on('connection.changed', (event) => {
+      if (event.online) {
+        reloadThread();
+      }
+    });
+
+    return () => {
+      recoveredHandler.unsubscribe();
+      changedHandler.unsubscribe();
+    };
   }, []);
 
   useEffect(
@@ -170,23 +188,23 @@ export const Thread = <
 >(
   props: ThreadProps<At, Ch, Co, Ev, Me, Re, Us>,
 ) => {
+  const { client } = useChatContext<At, Ch, Co, Ev, Me, Re, Us>();
   const { MessageList } = useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
-  const { closeThread, loadMoreThread, thread } = useThreadContext<
-    At,
-    Ch,
-    Co,
-    Ev,
-    Me,
-    Re,
-    Us
-  >();
+  const {
+    closeThread,
+    loadMoreThread,
+    reloadThread,
+    thread,
+  } = useThreadContext<At, Ch, Co, Ev, Me, Re, Us>();
 
   return (
     <ThreadWithContext<At, Ch, Co, Ev, Me, Re, Us>
       {...{
+        client,
         closeThread,
         loadMoreThread,
         MessageList,
+        reloadThread,
         thread,
       }}
       {...props}

src/contexts/threadContext/ThreadContext.tsx

@@ -29,6 +29,7 @@ export type ThreadContextValue<
   closeThread: () => void;
   loadMoreThread: () => Promise<void>;
   openThread: (message: MessageType<At, Ch, Co, Ev, Me, Re, Us>) => void;
+  reloadThread: () => void;
   setThreadLoadingMore: React.Dispatch<React.SetStateAction<boolean>>;
   thread: MessageType<At, Ch, Co, Ev, Me, Re, Us> | null;
   threadHasMore: boolean;