Merge pull request #2121 from GetStream/develop

v10.13.0

Author: MartinCupela

docusaurus/docs/React/components/contexts/message-input-context.mdx

@@ -246,6 +246,14 @@ Function that runs onSubmit to the underlying `textarea` component.
 | ---------------------------------------------------------------------- |
 | (event: React.BaseSyntheticEvent, customMessageData?: Message) => void |
 
+### hideSendButton
+
+Allows to hide MessageInput's send button. Used by `MessageSimple` to hide the send button in `EditMessageForm`. Received from `MessageInputProps`.
+
+| Type    | Default |
+|---------|---------|
+| boolean | false   |
+
 ### imageOrder
 
 The order in which image attachments have been added to the current message.

docusaurus/docs/React/components/core-components/channel.mdx

@@ -329,6 +329,14 @@ The Giphy version to render - check the keys of the [Image Object](https://devel
 | ------ | -------------- |
 | string | 'fixed_height' |
 
+### HeaderComponent
+
+Custom UI component to render at the top of the `MessageList`.
+
+| Type      | Default |
+| --------- | ------- |
+| component | none    |
+
 ### imageAttachmentSizeHandler
 
 A custom function to provide size configuration for image attachments
@@ -337,13 +345,54 @@ A custom function to provide size configuration for image attachments
 | ---------------------------------------------------------------- |
 | `(a: Attachment, e: HTMLElement) => ImageAttachmentConfigration` |
 
-### HeaderComponent
+### initializeOnMount
+
+Allows to prevent triggering the `channel.watch()` (triggers channel query HTTP request) call when mounting the `Channel` component (the default behavior) with uninitialized (`channel.initialized`) `Channel` instance. That means that no channel data from the back-end will be received neither channel WS events will be delivered to the client. Preventing to initialize the channel on mount allows us to postpone the channel creation in the Stream's DB to a later point in time, for example, when a first message is sent:
+
+```typescript jsx
+import {useCallback} from "react";
+import {
+  getChannel,
+  MessageInput as StreamMessageInput,
+  MessageInputProps, MessageToSend,
+  useChannelActionContext,
+  useChatContext
+} from "stream-chat-react";
+import {Message, SendMessageOptions} from "stream-chat";
+
+import {useChannelInitContext} from "../../context/ChannelInitProvider";
+import type { MyStreamChatGenerics } from "../../types";
+
+export const MessageInput = (props: MessageInputProps) => {
+  const {client} = useChatContext();
+  const {sendMessage} = useChannelActionContext();
+  const { setInitializedChannelOnMount} = useChannelInitContext();
+
+  const submitHandler: MessageInputProps['overrideSubmitHandler'] = useCallback(async (
+    message: MessageToSend<MyStreamChatGenerics>,
+    channelCid: string,
+    customMessageData?: Partial<Message<MyStreamChatGenerics>>,
+    options?: SendMessageOptions,
+  ) => {
+    const [channelType, channelId] = channelCid.split(":");
+    const channel = client.channel(channelType, channelId);
+    if (!channel.initialized) {
+      await getChannel({channel, client});
+      setInitializedChannelOnMount(true);
+    }
+
+    await sendMessage(message, customMessageData, options);
+  }, [client, sendMessage, setInitializedChannelOnMount]);
 
-Custom UI component to render at the top of the `MessageList`.
+  return (
+    <StreamMessageInput {...props} overrideSubmitHandler={submitHandler} />
+  );
+};
+```
 
-| Type      | Default |
-| --------- | ------- |
-| component | none    |
+| Type    | Default |
+|---------|---------|
+| boolean | true    |
 
 ### Input
 

docusaurus/docs/React/components/message-input-components/message-input.mdx

@@ -124,6 +124,14 @@ If true, expands the text input vertically for new lines.
 | ------- | ------- |
 | boolean | true    |
 
+### hideSendButton
+
+Allows to hide MessageInput's send button. Used by `MessageSimple` to hide the send button in `EditMessageForm`.
+
+| Type    | Default |
+|---------|---------|
+| boolean | false   |
+
 ### Input
 
 Custom UI component handling how the message input is rendered.

package.json

@@ -169,7 +169,7 @@
     "rollup-plugin-url": "^3.0.1",
     "rollup-plugin-visualizer": "^4.2.0",
     "semantic-release": "^19.0.5",
-    "stream-chat": "^8.12.0",
+    "stream-chat": "^8.12.4",
     "style-loader": "^2.0.0",
     "ts-jest": "^26.5.1",
     "typescript": "^4.7.4",

src/components/Channel/Channel.tsx

@@ -152,7 +152,8 @@ export type ChannelProps<
   EmptyPlaceholder?: React.ReactElement;
   /** Custom UI component to be displayed when the `MessageList` is empty, defaults to and accepts same props as: [EmptyStateIndicator](https://github.com/GetStream/stream-chat-react/blob/master/src/components/EmptyStateIndicator/EmptyStateIndicator.tsx)  */
   EmptyStateIndicator?: ComponentContextValue<StreamChatGenerics>['EmptyStateIndicator'];
-  /** A global flag to toggle the URL enrichment and link previews in `MessageInput` components.
+  /**
+   * A global flag to toggle the URL enrichment and link previews in `MessageInput` components.
    * By default, the feature is disabled. Can be overridden on Thread, MessageList level through additionalMessageInputProps
    * or directly on MessageInput level through urlEnrichmentConfig.
    */
@@ -169,6 +170,12 @@ export type ChannelProps<
   HeaderComponent?: ComponentContextValue<StreamChatGenerics>['HeaderComponent'];
   /** A custom function to provide size configuration for image attachments */
   imageAttachmentSizeHandler?: ImageAttachmentSizeHandler;
+  /**
+   * Allows to prevent triggering the channel.watch() call when mounting the component.
+   * That means that no channel data from the back-end will be received neither channel WS events will be delivered to the client.
+   * Preventing to initialize the channel on mount allows us to postpone the channel creation to a later point in time.
+   */
+  initializeOnMount?: boolean;
   /** Custom UI component handling how the message input is rendered, defaults to and accepts the same props as [MessageInputFlat](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/MessageInputFlat.tsx) */
   Input?: ComponentContextValue<StreamChatGenerics>['Input'];
   /** Custom component to render link previews in message input **/
@@ -312,6 +319,7 @@ const ChannelInner = <
     dragAndDropWindow = false,
     emojiData = defaultEmojiData,
     enrichURLForPreviewConfig,
+    initializeOnMount = true,
     LoadingErrorIndicator = DefaultLoadingErrorIndicator,
     LoadingIndicator = DefaultLoadingIndicator,
     maxNumberOfFiles,
@@ -478,7 +486,7 @@ const ChannelInner = <
     };
 
     (async () => {
-      if (!channel.initialized) {
+      if (!channel.initialized && initializeOnMount) {
         try {
           // if active channel has been set without id, we will create a temporary channel id from its member IDs
           // to keep track of the /query request in progress. This is the same approach of generating temporary id
@@ -533,7 +541,7 @@ const ChannelInner = <
       client.off('user.deleted', handleEvent);
       notificationTimeouts.forEach(clearTimeout);
     };
-  }, [channel.cid, doMarkReadRequest, channelConfig?.read_events]);
+  }, [channel.cid, doMarkReadRequest, channelConfig?.read_events, initializeOnMount]);
 
   useEffect(() => {
     if (!state.thread) return;

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

@@ -380,13 +380,33 @@ describe('Channel', () => {
     jest.spyOn(channel, 'countUnread').mockImplementationOnce(() => 1);
     const doMarkReadRequest = jest.fn();
 
-    renderComponent({
-      doMarkReadRequest,
+    await act(() => {
+      renderComponent({
+        doMarkReadRequest,
+      });
     });
 
     await waitFor(() => expect(doMarkReadRequest).toHaveBeenCalledTimes(1));
   });
 
+  it('should not query the channel from the backend when initializeOnMount is disabled', async () => {
+    const watchSpy = jest.spyOn(channel, 'watch').mockImplementationOnce();
+    await act(() => {
+      renderComponent({
+        initializeOnMount: false,
+      });
+    });
+    await waitFor(() => expect(watchSpy).not.toHaveBeenCalled());
+  });
+
+  it('should query the channel from the backend when initializeOnMount is enabled (the default)', async () => {
+    const watchSpy = jest.spyOn(channel, 'watch').mockImplementationOnce();
+    await act(() => {
+      renderComponent();
+    });
+    await waitFor(() => expect(watchSpy).toHaveBeenCalledTimes(1));
+  });
+
   describe('Children that consume the contexts set in Channel', () => {
     it('should expose the emoji config', async () => {
       let context;

src/components/ChannelList/__tests__/ChannelList.test.js

@@ -324,6 +324,35 @@ describe('ChannelList', () => {
     expect(results).toHaveNoViolations();
   });
 
+  it('should show unique channels', async () => {
+    useMockedApis(chatClientUthred, [queryChannelsApi([testChannel1, testChannel2])]);
+    const ChannelPreview = (props) => <div data-testid={props.channel.id} role='listitem' />;
+    render(
+      <Chat client={chatClientUthred}>
+        <ChannelList filters={{}} options={{ limit: 2 }} Preview={ChannelPreview} />
+      </Chat>,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId(testChannel1.channel.id)).toBeInTheDocument();
+      expect(screen.getByTestId(testChannel2.channel.id)).toBeInTheDocument();
+      expect(screen.getAllByRole('listitem')).toHaveLength(2);
+    });
+
+    useMockedApis(chatClientUthred, [queryChannelsApi([testChannel1, testChannel3])]);
+
+    await act(() => {
+      fireEvent.click(screen.getByTestId('load-more-button'));
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId(testChannel1.channel.id)).toBeInTheDocument();
+      expect(screen.getByTestId(testChannel2.channel.id)).toBeInTheDocument();
+      expect(screen.getByTestId(testChannel3.channel.id)).toBeInTheDocument();
+      expect(screen.getAllByRole('listitem')).toHaveLength(3);
+    });
+  });
+
   describe('Default and custom active channel', () => {
     let setActiveChannel;
     const watchersConfig = { limit: 20, offset: 0 };

src/components/ChannelList/hooks/usePaginatedChannels.ts

@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
+import uniqBy from 'lodash.uniqby';
 
 import { MAX_QUERY_CHANNELS_LIMIT } from '../utils';
 
@@ -52,7 +53,9 @@ export const usePaginatedChannels = <
       const channelQueryResponse = await client.queryChannels(filters, sort || {}, newOptions);
 
       const newChannels =
-        queryType === 'reload' ? channelQueryResponse : [...channels, ...channelQueryResponse];
+        queryType === 'reload'
+          ? channelQueryResponse
+          : uniqBy([...channels, ...channelQueryResponse], 'cid');
 
       setChannels(newChannels);
       setHasNextPage(channelQueryResponse.length >= newOptions.limit);

src/components/Message/MessageSimple.tsx

@@ -124,6 +124,7 @@ const MessageSimpleWithContext = <
           <MessageInput
             clearEditingState={clearEditingState}
             grow
+            hideSendButton
             Input={EditMessageInput}
             message={message}
             {...additionalMessageInputProps}

src/components/MessageInput/MessageInput.tsx

@@ -61,6 +61,8 @@ export type MessageInputProps<
   getDefaultValue?: () => string | string[];
   /** If true, expands the text input vertically for new lines */
   grow?: boolean;
+  /** Allows to hide MessageInput's send button. */
+  hideSendButton?: boolean;
   /** Custom UI component handling how the message input is rendered, defaults to and accepts the same props as [MessageInputFlat](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/MessageInputFlat.tsx) */
   Input?: React.ComponentType<MessageInputProps<StreamChatGenerics, V>>;
   /** Max number of rows the underlying `textarea` component is allowed to grow */