stream-chat-react-native-core 4.0.0 → 4.1.0

package/src/components/Thread/Thread.tsx

@@ -2,10 +2,7 @@ import React, { useEffect } from 'react';
 
 import { ThreadFooterComponent } from './components/ThreadFooterComponent';
 
-import {
-  MessageInput as DefaultMessageInput,
-  MessageInputProps,
-} from '../MessageInput/MessageInput';
+import { useChannelContext } from '../../contexts/channelContext/ChannelContext';
 import { ChatContextValue, useChatContext } from '../../contexts/chatContext/ChatContext';
 import {
   MessagesContextValue,
@@ -13,43 +10,31 @@ import {
 } from '../../contexts/messagesContext/MessagesContext';
 import { ThreadContextValue, useThreadContext } from '../../contexts/threadContext/ThreadContext';
 
+import type { DefaultStreamChatGenerics } from '../../types/types';
+import {
+  MessageInput as DefaultMessageInput,
+  MessageInputProps,
+} from '../MessageInput/MessageInput';
 import type { MessageListProps } from '../MessageList/MessageList';
 
-import type {
-  DefaultAttachmentType,
-  DefaultChannelType,
-  DefaultCommandType,
-  DefaultEventType,
-  DefaultMessageType,
-  DefaultReactionType,
-  DefaultUserType,
-  UnknownType,
-} from '../../types/types';
-
 type ThreadPropsWithContext<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
-> = Pick<ChatContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'client'> &
-  Pick<MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>, 'MessageList'> &
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Pick<ChatContextValue<StreamChatGenerics>, 'client'> &
+  Pick<MessagesContextValue<StreamChatGenerics>, 'MessageList'> &
   Pick<
-    ThreadContextValue<At, Ch, Co, Ev, Me, Re, Us>,
+    ThreadContextValue<StreamChatGenerics>,
     'closeThread' | 'loadMoreThread' | 'reloadThread' | 'thread'
   > & {
     /**
      * Additional props for underlying MessageInput component.
      * Available props - https://getstream.github.io/stream-chat-react-native/v3/#messageinput
      * */
-    additionalMessageInputProps?: Partial<MessageInputProps<At, Ch, Co, Ev, Me, Re, Us>>;
+    additionalMessageInputProps?: Partial<MessageInputProps<StreamChatGenerics>>;
     /**
      * Additional props for underlying MessageList component.
      * Available props - https://getstream.github.io/stream-chat-react-native/v3/#messagelist
      * */
-    additionalMessageListProps?: Partial<MessageListProps<At, Ch, Co, Ev, Me, Re, Us>>;
+    additionalMessageListProps?: Partial<MessageListProps<StreamChatGenerics>>;
     /** Make input focus on mounting thread */
     autoFocus?: boolean;
     /** Closes thread on dismount, defaults to true */
@@ -60,7 +45,7 @@ type ThreadPropsWithContext<
      * **Customized MessageInput component to used within Thread instead of default MessageInput
      * **Available from [MessageInput](https://getstream.github.io/stream-chat-react-native/v3/#messageinput)**
      */
-    MessageInput?: React.ComponentType<MessageInputProps<At, Ch, Co, Ev, Me, Re, Us>>;
+    MessageInput?: React.ComponentType<MessageInputProps<StreamChatGenerics>>;
     /**
      * Call custom function on closing thread if handling thread state elsewhere
      */
@@ -68,15 +53,9 @@ type ThreadPropsWithContext<
   };
 
 const ThreadWithContext = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: ThreadPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>,
+  props: ThreadPropsWithContext<StreamChatGenerics>,
 ) => {
   const {
     additionalMessageInputProps,
@@ -123,7 +102,7 @@ const ThreadWithContext = <
         threadList
         {...additionalMessageListProps}
       />
-      <MessageInput<At, Ch, Co, Ev, Me, Re, Us>
+      <MessageInput<StreamChatGenerics>
         additionalTextInputProps={{ autoFocus, editable: !disabled }}
         threadList
         {...additionalMessageInputProps}
@@ -133,14 +112,8 @@ const ThreadWithContext = <
 };
 
 export type ThreadProps<
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
-> = Partial<ThreadPropsWithContext<At, Ch, Co, Ev, Me, Re, Us>>;
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+> = Partial<ThreadPropsWithContext<StreamChatGenerics>>;
 
 /**
  * Thread - The Thread renders a parent message with a list of replies. Use the standard message list of the main channel's messages.
@@ -152,23 +125,24 @@ export type ThreadProps<
  * - additionalMessageInputProps
  */
 export const Thread = <
-  At extends UnknownType = DefaultAttachmentType,
-  Ch extends UnknownType = DefaultChannelType,
-  Co extends string = DefaultCommandType,
-  Ev extends UnknownType = DefaultEventType,
-  Me extends UnknownType = DefaultMessageType,
-  Re extends UnknownType = DefaultReactionType,
-  Us extends UnknownType = DefaultUserType,
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >(
-  props: ThreadProps<At, Ch, Co, Ev, Me, Re, Us>,
+  props: ThreadProps<StreamChatGenerics>,
 ) => {
-  const { client } = useChatContext<At, Ch, Co, Ev, Me, Re, Us>();
-  const { MessageList } = useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { client } = useChatContext<StreamChatGenerics>();
+  const { threadList } = useChannelContext<StreamChatGenerics>();
+  const { MessageList } = useMessagesContext<StreamChatGenerics>();
   const { closeThread, loadMoreThread, reloadThread, thread } =
-    useThreadContext<At, Ch, Co, Ev, Me, Re, Us>();
+    useThreadContext<StreamChatGenerics>();
+
+  if (thread?.id && !threadList) {
+    throw new Error(
+      'Please add a threadList prop to your Channel component when rendering a thread list. Check our Channel documentation for more info: https://getstream.io/chat/docs/sdk/reactnative/core-components/channel/#threadlist',
+    );
+  }
 
   return (
-    <ThreadWithContext<At, Ch, Co, Ev, Me, Re, Us>
+    <ThreadWithContext<StreamChatGenerics>
       {...{
         client,
         closeThread,

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

@@ -1,24 +1,24 @@
 import React from 'react';
+
 import { act, cleanup, render, waitFor } from '@testing-library/react-native';
 import { v5 as uuidv5 } from 'uuid';
 
-import { Thread } from '../Thread';
-
-import { Channel } from '../../Channel/Channel';
-import { Chat } from '../../Chat/Chat';
-
+import { AttachmentPickerProvider } from '../../../contexts/attachmentPickerContext/AttachmentPickerContext';
 import { ChannelContext } from '../../../contexts/channelContext/ChannelContext';
-import { ThreadContext } from '../../../contexts/threadContext/ThreadContext';
-import { TranslationProvider } from '../../../contexts/translationContext/TranslationContext';
-import { Streami18n } from '../../../utils/Streami18n';
-
+import { ChannelsStateProvider } from '../../../contexts/channelsStateContext/ChannelsStateContext';
+import { ImageGalleryProvider } from '../../../contexts/imageGalleryContext/ImageGalleryContext';
+import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
-import { generateChannel } from '../../../mock-builders/generator/channel';
+import { generateChannelResponse } from '../../../mock-builders/generator/channel';
 import { generateMember } from '../../../mock-builders/generator/member';
 import { generateMessage, generateStaticMessage } from '../../../mock-builders/generator/message';
 import { generateStaticUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
+import { Streami18n } from '../../../utils/Streami18n';
+import { Channel } from '../../Channel/Channel';
+import { Chat } from '../../Chat/Chat';
+import { Thread } from '../Thread';
 
 const StreamReactNativeNamespace = '9b244ee4-7d69-4d7b-ae23-cf89e9f7b035';
 
@@ -26,74 +26,41 @@ afterEach(cleanup);
 
 describe('Thread', () => {
   it('should render a new thread', async () => {
-    const t = jest.fn((key) => key);
-    const i18nInstance = new Streami18n();
-    const translators = await i18nInstance.getTranslators();
     const thread = generateMessage({ text: 'Thread Message Text' });
     const thread2 = generateMessage({ text: 'Thread2 Message Text' });
     const parent_id = thread.id;
-    const mockedChannel = generateChannel({
-      messages: [
-        thread,
-        generateMessage({ parent_id, text: 'Response Message Text' }),
-        generateMessage({ parent_id }),
-        generateMessage({ parent_id }),
-        thread2,
-        generateMessage({
-          parent_id: thread2.id,
-          text: 'Response Message Text2',
-        }),
-      ],
+    const threadResponses = [
+      generateMessage({ parent_id, text: 'Response Message Text' }),
+      generateMessage({ parent_id }),
+      generateMessage({ parent_id }),
+    ];
+
+    const mockedChannel = generateChannelResponse({
+      messages: [thread, thread2],
     });
 
     const chatClient = await getTestClientWithUser({ id: 'Neil' });
     useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
     const channel = chatClient.channel('messaging', mockedChannel.id);
-    await channel.query();
-    let openThread;
-
-    const { getAllByText, getByText, queryByText, rerender } = render(
-      <Chat client={chatClient}>
-        <TranslationProvider value={{ ...translators, t }}>
-          <Channel channel={channel} client={chatClient} thread={thread}>
-            <ThreadContext.Consumer>
-              {(c) => {
-                openThread = c.openThread;
-                return <Thread />;
-              }}
-            </ThreadContext.Consumer>
+    await channel.watch();
+    channel.state.addMessagesSorted(threadResponses);
+
+    const { getAllByText, getByText, queryByText } = render(
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel} client={chatClient} thread={thread} threadList>
+            <Thread thread={thread} />
           </Channel>
-        </TranslationProvider>
-      </Chat>,
+        </Chat>
+      </OverlayProvider>,
     );
 
-    expect(t).toHaveBeenCalledWith('Start of a new thread');
     await waitFor(() => {
-      expect(t).toHaveBeenCalledWith('Start of a new thread');
-      expect(getByText('Start of a new thread')).toBeTruthy();
-      expect(getAllByText('Thread Message Text')).toHaveLength(1);
+      expect(getByText('Also send to channel')).toBeTruthy();
       expect(getAllByText('Response Message Text')).toHaveLength(1);
       expect(queryByText('Thread2 Message Text')).toBeFalsy();
     });
-
-    act(() => openThread(thread2));
-    rerender(
-      <Chat client={chatClient}>
-        <TranslationProvider value={{ ...translators, t }}>
-          <Channel channel={channel} client={chatClient} thread={thread2}>
-            <Thread />
-          </Channel>
-        </TranslationProvider>
-      </Chat>,
-    );
-
-    await waitFor(() => {
-      expect(getAllByText('Thread2 Message Text')).toHaveLength(1);
-      expect(queryByText('Thread Message Text')).toBeFalsy();
-      expect(queryByText('Response Message Text')).toBeFalsy();
-      expect(getAllByText('Response Message Text2')).toHaveLength(1);
-    });
-  });
+  }, 10000);
 
   it('should match thread snapshot', async () => {
     const i18nInstance = new Streami18n();
@@ -101,7 +68,14 @@ describe('Thread', () => {
     const user2 = generateStaticUser(3);
     const thread = generateStaticMessage('Message3', { user: user2 }, '2020-05-05T14:50:00.000Z');
     const parent_id = thread.id;
-    const mockedChannel = generateChannel({
+
+    const threadResponses = [
+      generateStaticMessage('Message4', { parent_id, user: user1 }, '2020-05-05T14:50:00.000Z'),
+      generateStaticMessage('Message5', { parent_id, user: user2 }, '2020-05-05T14:50:00.000Z'),
+      generateStaticMessage('Message6', { parent_id, user: user1 }, '2020-05-05T14:50:00.000Z'),
+    ];
+
+    const mockedChannel = generateChannelResponse({
       channel: {
         id: uuidv5('Channel', StreamReactNativeNamespace),
       },
@@ -110,9 +84,7 @@ describe('Thread', () => {
         generateStaticMessage('Message1', { user: user1 }, '2020-05-05T14:48:00.000Z'),
         generateStaticMessage('Message2', { user: user2 }, '2020-05-05T14:49:00.000Z'),
         thread,
-        generateStaticMessage('Message4', { parent_id, user: user1 }, '2020-05-05T14:50:00.000Z'),
-        generateStaticMessage('Message5', { parent_id, user: user2 }, '2020-05-05T14:50:00.000Z'),
-        generateStaticMessage('Message6', { parent_id, user: user1 }, '2020-05-05T14:50:00.000Z'),
+        ...threadResponses,
       ],
     });
 
@@ -120,19 +92,28 @@ describe('Thread', () => {
     useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
     const channel = chatClient.channel('messaging', mockedChannel.id);
     await channel.query();
+
+    channel.state.addMessagesSorted(threadResponses);
+
     let setLastRead;
 
     const { getByText, toJSON } = render(
-      <Chat client={chatClient} i18nInstance={i18nInstance}>
-        <Channel channel={channel} client={chatClient} thread={thread}>
-          <ChannelContext.Consumer>
-            {(c) => {
-              setLastRead = c.setLastRead;
-              return <Thread />;
-            }}
-          </ChannelContext.Consumer>
-        </Channel>
-      </Chat>,
+      <ChannelsStateProvider>
+        <Chat client={chatClient} i18nInstance={i18nInstance}>
+          <AttachmentPickerProvider value={{ closePicker: jest.fn(), openPicker: jest.fn() }}>
+            <ImageGalleryProvider>
+              <Channel channel={channel} client={chatClient} thread={thread} threadList>
+                <ChannelContext.Consumer>
+                  {(c) => {
+                    setLastRead = c.setLastRead;
+                    return <Thread />;
+                  }}
+                </ChannelContext.Consumer>
+              </Channel>
+            </ImageGalleryProvider>
+          </AttachmentPickerProvider>
+        </Chat>
+      </ChannelsStateProvider>,
     );
 
     await waitFor(() => {