feat: use Thread class instance to manage Thread component state when drafts enabled

Author: MartinCupela

src/components/Channel/Channel.tsx

@@ -82,6 +82,7 @@ import type {
   MessageResponse,
   SendMessageAPIResponse,
   StreamChat,
+  Thread,
   UpdatedMessage,
   UserResponse,
 } from 'stream-chat';
@@ -1177,14 +1178,42 @@ const ChannelInner = <
     event?: React.BaseSyntheticEvent,
   ) => {
     event?.preventDefault();
-    setQuotedMessage((current) => {
-      if (current?.parent_id !== message?.parent_id) {
-        return undefined;
-      } else {
-        return current;
+    if (messageDraftsEnabled) {
+      let threadInstance = client.threads.threadsById[message.id];
+      if (threadInstance) {
+        dispatch({ channel, message, threadInstance, type: 'openThread' });
+        return;
       }
-    });
-    dispatch({ channel, message, type: 'openThread' });
+
+      dispatch({
+        channel,
+        message,
+        threadInstance: {} as Thread<StreamChatGenerics>,
+        type: 'openThread',
+      });
+
+      client
+        .getThread(message.id, { reply_limit: DEFAULT_THREAD_PAGE_SIZE })
+        .then((t: Thread<StreamChatGenerics>) => {
+          t.registerSubscriptions();
+          dispatch({
+            channel,
+            message,
+            threadInstance: t,
+            type: 'openThread',
+          });
+          client.threads.addThread(t);
+        });
+    } else {
+      setQuotedMessage((current) => {
+        if (current?.parent_id !== message?.parent_id) {
+          return undefined;
+        } else {
+          return current;
+        }
+      });
+      dispatch({ channel, message, type: 'openThread' });
+    }
   };
 
   const closeThread = (event?: React.BaseSyntheticEvent) => {
@@ -1215,7 +1244,13 @@ const ChannelInner = <
 
   const loadMoreThread = async (limit: number = DEFAULT_THREAD_PAGE_SIZE) => {
     // FIXME: should prevent loading more, if state.thread.reply_count === channel.state.threads[parentID].length
-    if (state.threadLoadingMore || !state.thread || !state.threadHasMore) return;
+    if (
+      state.threadInstance ||
+      state.threadLoadingMore ||
+      !state.thread ||
+      !state.threadHasMore
+    )
+      return;
 
     dispatch({ type: 'startLoadingThread' });
     const parentId = state.thread.id;

src/components/Channel/__tests__/Channel.test.js

@@ -567,18 +567,65 @@ describe('Channel', () => {
       const { channel, chatClient } = await initClient();
       const threadMessage = messages[0];
       const hasThread = jest.fn();
+      const hasThreadInstance = jest.fn();
+      const mockThreadInstance = {
+        threadInstanceMock: true,
+        registerSubscriptions: jest.fn(),
+      };
+      const getThreadSpy = jest
+        .spyOn(chatClient, 'getThread')
+        .mockResolvedValueOnce(mockThreadInstance);
 
       // this renders Channel, calls openThread from a child context consumer with a message,
       // and then calls hasThread with the thread id if it was set.
-      await renderComponent({ channel, chatClient }, ({ openThread, thread }) => {
-        if (!thread) {
-          openThread(threadMessage, { preventDefault: () => null });
-        } else {
-          hasThread(thread.id);
-        }
+      await renderComponent(
+        { channel, chatClient },
+        ({ openThread, thread, threadInstance }) => {
+          if (!thread) {
+            openThread(threadMessage, { preventDefault: () => null });
+          } else {
+            hasThread(thread.id);
+            hasThreadInstance(threadInstance);
+          }
+        },
+      );
+
+      await waitFor(() => {
+        expect(hasThread).toHaveBeenCalledWith(threadMessage.id);
+        expect(getThreadSpy).not.toHaveBeenCalled();
+        expect(hasThreadInstance).toHaveBeenCalledWith(undefined);
       });
+      getThreadSpy.mockRestore();
+    });
+
+    it('uses Thread instance when messageDraftsEnabled is true', async () => {
+      const { channel, chatClient } = await initClient();
+      const threadMessage = messages[0];
+      const hasThreadInstance = jest.fn();
+      const mockThreadInstance = {
+        threadInstanceMock: true,
+        registerSubscriptions: jest.fn(),
+      };
+      const spy = jest
+        .spyOn(chatClient, 'getThread')
+        .mockResolvedValueOnce(mockThreadInstance);
 
-      await waitFor(() => expect(hasThread).toHaveBeenCalledWith(threadMessage.id));
+      await renderComponent(
+        { channel, chatClient, messageDraftsEnabled: true },
+        ({ openThread, thread, threadInstance }) => {
+          if (!thread) {
+            openThread(threadMessage, { preventDefault: () => null });
+          } else {
+            hasThreadInstance(threadInstance);
+          }
+        },
+      );
+
+      await waitFor(() => {
+        expect(hasThreadInstance).toHaveBeenCalledWith(mockThreadInstance);
+        expect(mockThreadInstance.registerSubscriptions).toHaveBeenCalledWith();
+      });
+      spy.mockRestore();
     });
 
     it('should be able to load more messages in a thread until reaching the end', async () => {

src/components/Channel/channelState.ts

@@ -1,7 +1,8 @@
-import type {
+import {
   Channel,
   MessageResponse,
   ChannelState as StreamChannelState,
+  Thread,
 } from 'stream-chat';
 
 import type { ChannelState, StreamMessage } from '../../context/ChannelStateContext';
@@ -57,6 +58,7 @@ export type ChannelStateReducerAction<
       channel: Channel<StreamChatGenerics>;
       message: StreamMessage<StreamChatGenerics>;
       type: 'openThread';
+      threadInstance?: Thread<StreamChatGenerics>;
     }
   | {
       error: Error;
@@ -101,6 +103,7 @@ export const makeChannelReducer =
         return {
           ...state,
           thread: null,
+          threadInstance: undefined,
           threadLoadingMore: false,
           threadMessages: [],
         };
@@ -208,11 +211,12 @@ export const makeChannelReducer =
       }
 
       case 'openThread': {
-        const { channel, message } = action;
+        const { channel, message, threadInstance } = action;
         return {
           ...state,
           thread: message,
           threadHasMore: true,
+          threadInstance,
           threadMessages: message.id
             ? { ...channel.state.threads }[message.id] || []
             : [],

src/components/Channel/hooks/useCreateChannelStateContext.ts

@@ -49,6 +49,7 @@ export const useCreateChannelStateContext = <
     suppressAutoscroll,
     thread,
     threadHasMore,
+    threadInstance,
     threadLoadingMore,
     threadMessages = [],
     videoAttachmentSizeHandler,
@@ -145,6 +146,7 @@ export const useCreateChannelStateContext = <
       suppressAutoscroll,
       thread,
       threadHasMore,
+      threadInstance,
       threadLoadingMore,
       threadMessages,
       videoAttachmentSizeHandler,
@@ -182,6 +184,7 @@ export const useCreateChannelStateContext = <
       suppressAutoscroll,
       thread,
       threadHasMore,
+      threadInstance,
       threadLoadingMore,
       threadMessagesLength,
       watcherCount,

src/components/Thread/Thread.tsx

@@ -62,10 +62,15 @@ export const Thread = <
 >(
   props: ThreadProps<StreamChatGenerics, V>,
 ) => {
-  const { channel, channelConfig, thread } =
-    useChannelStateContext<StreamChatGenerics>('Thread');
-  const threadInstance = useThreadContext();
+  const {
+    channel,
+    channelConfig,
+    thread,
+    threadInstance: threadInstanceChannelCtx,
+  } = useChannelStateContext<StreamChatGenerics>('Thread');
+  const threadInstanceThreadCtx = useThreadContext();
 
+  const threadInstance = threadInstanceThreadCtx ?? threadInstanceChannelCtx;
   if ((!thread && !threadInstance) || channelConfig?.replies === false) return null;
 
   // the wrapper ensures a key variable is set and the component recreates on thread switch
@@ -78,7 +83,11 @@ export const Thread = <
   );
 };
 
-const selector = (nextValue: ThreadState) => ({
+const selector = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  nextValue: ThreadState<StreamChatGenerics>,
+) => ({
   isLoadingNext: nextValue.pagination.isLoadingNext,
   isLoadingPrev: nextValue.pagination.isLoadingPrev,
   parentMessage: nextValue.parentMessage,
@@ -104,13 +113,12 @@ const ThreadInner = <
     virtualized,
   } = props;
 
-  const threadInstance = useThreadContext();
-  const { isLoadingNext, isLoadingPrev, parentMessage, replies } =
-    useStateStore(threadInstance?.state, selector) ?? {};
+  const threadInstanceThreadCtx = useThreadContext<StreamChatGenerics>();
 
   const {
     thread,
     threadHasMore,
+    threadInstance: threadInstanceChannelCtx,
     threadLoadingMore,
     threadMessages = [],
     threadSuppressAutoscroll,
@@ -126,6 +134,11 @@ const ThreadInner = <
     VirtualMessage,
   } = useComponentContext<StreamChatGenerics>('Thread');
 
+  const threadInstance = threadInstanceThreadCtx ?? threadInstanceChannelCtx;
+
+  const { isLoadingNext, isLoadingPrev, parentMessage, replies } =
+    useStateStore(threadInstance?.state, selector) ?? {};
+
   const ThreadInput =
     PropInput ?? additionalMessageInputProps?.Input ?? ContextInput ?? MessageInputFlat;
 
@@ -136,7 +149,7 @@ const ThreadInner = <
   const ThreadMessageList = virtualized ? VirtualizedMessageList : MessageList;
 
   useEffect(() => {
-    if (thread?.id && thread?.reply_count) {
+    if (!threadInstance && thread?.id && thread?.reply_count) {
       // FIXME: integrators can customize channel query options but cannot customize channel.getReplies() options
       loadMoreThread();
     }

src/components/Thread/__tests__/Thread.test.js

@@ -330,6 +330,12 @@ describe('Thread', () => {
     expect(channelActionContextMock.loadMoreThread).toHaveBeenCalledTimes(1);
   });
 
+  it('should not call the loadMoreThread callback on mount if the thread start has a non-zero reply count but threadInstance is provided', () => {
+    renderComponent({ chatClient, channelStateOverrides: { threadInstance: {} } });
+
+    expect(channelActionContextMock.loadMoreThread).not.toHaveBeenCalled();
+  });
+
   it('should render null if replies is disabled', async () => {
     const client = await getTestClientWithUser();
     const ch = generateChannel({ getConfig: () => ({ replies: false }) });

src/components/Threads/ThreadContext.tsx

@@ -3,16 +3,19 @@ import React, { createContext, useContext } from 'react';
 import { Channel } from '../../components';
 
 import type { PropsWithChildren } from 'react';
-import { Thread } from 'stream-chat';
+import type { Thread } from 'stream-chat';
+import type { DefaultStreamChatGenerics } from '../../types';
 
 export type ThreadContextValue = Thread | undefined;
 
 export const ThreadContext = createContext<ThreadContextValue>(undefined);
 
-export const useThreadContext = () => {
+export const useThreadContext = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>() => {
   const thread = useContext(ThreadContext);
 
-  return thread ?? undefined;
+  return (thread as unknown as Thread<StreamChatGenerics>) ?? undefined;
 };
 
 export const ThreadProvider = ({

src/context/ChannelStateContext.tsx

@@ -7,6 +7,7 @@ import type {
   MessageResponse,
   Mute,
   ChannelState as StreamChannelState,
+  Thread,
 } from 'stream-chat';
 
 import type {
@@ -50,6 +51,7 @@ export type ChannelState<
   read?: StreamChannelState<StreamChatGenerics>['read'];
   thread?: StreamMessage<StreamChatGenerics> | null;
   threadHasMore?: boolean;
+  threadInstance?: Thread<StreamChatGenerics>;
   threadLoadingMore?: boolean;
   threadMessages?: StreamMessage<StreamChatGenerics>[];
   threadSuppressAutoscroll?: boolean;