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

Author: MartinCupela

src/components/Channel/Channel.tsx

@@ -1145,14 +1145,42 @@ const ChannelInner = <V extends CustomTrigger = CustomTrigger>(
 
   const openThread = (message: StreamMessage, 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) => {
@@ -1181,7 +1209,13 @@ const ChannelInner = <V extends CustomTrigger = CustomTrigger>(
 
   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';
@@ -51,6 +52,7 @@ export type ChannelStateReducerAction =
       channel: Channel;
       message: StreamMessage;
       type: 'openThread';
+      threadInstance?: Thread<StreamChatGenerics>;
     }
   | {
       error: Error;
@@ -91,6 +93,7 @@ export const makeChannelReducer =
         return {
           ...state,
           thread: null,
+          threadInstance: undefined,
           threadLoadingMore: false,
           threadMessages: [],
         };
@@ -198,11 +201,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

@@ -45,6 +45,7 @@ export const useCreateChannelStateContext = (
     suppressAutoscroll,
     thread,
     threadHasMore,
+    threadInstance,
     threadLoadingMore,
     threadMessages = [],
     videoAttachmentSizeHandler,
@@ -141,6 +142,7 @@ export const useCreateChannelStateContext = (
       suppressAutoscroll,
       thread,
       threadHasMore,
+      threadInstance,
       threadLoadingMore,
       threadMessages,
       videoAttachmentSizeHandler,
@@ -178,6 +180,7 @@ export const useCreateChannelStateContext = (
       suppressAutoscroll,
       thread,
       threadHasMore,
+      threadInstance,
       threadLoadingMore,
       threadMessagesLength,
       watcherCount,

src/components/Thread/Thread.tsx

@@ -53,9 +53,15 @@ export type ThreadProps<V extends CustomTrigger = CustomTrigger> = {
 export const Thread = <V extends CustomTrigger = CustomTrigger>(
   props: ThreadProps<V>,
 ) => {
-  const { channel, channelConfig, thread } = useChannelStateContext('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
@@ -68,7 +74,11 @@ export const Thread = <V extends CustomTrigger = CustomTrigger>(
   );
 };
 
-const selector = (nextValue: ThreadState) => ({
+const selector = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>(
+  nextValue: ThreadState<StreamChatGenerics>,
+) => ({
   isLoadingNext: nextValue.pagination.isLoadingNext,
   isLoadingPrev: nextValue.pagination.isLoadingPrev,
   parentMessage: nextValue.parentMessage,
@@ -91,13 +101,12 @@ const ThreadInner = <V extends CustomTrigger = CustomTrigger>(
     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,
@@ -112,6 +121,11 @@ const ThreadInner = <V extends CustomTrigger = CustomTrigger>(
     VirtualMessage,
   } = useComponentContext('Thread');
 
+  const threadInstance = threadInstanceThreadCtx ?? threadInstanceChannelCtx;
+
+  const { isLoadingNext, isLoadingPrev, parentMessage, replies } =
+    useStateStore(threadInstance?.state, selector) ?? {};
+
   const ThreadInput =
     PropInput ?? additionalMessageInputProps?.Input ?? ContextInput ?? MessageInputFlat;
 
@@ -122,7 +136,7 @@ const ThreadInner = <V extends CustomTrigger = CustomTrigger>(
   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

@@ -4,15 +4,18 @@ import { Channel } from '../../components';
 
 import type { PropsWithChildren } from 'react';
 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

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