Merge pull request #2108 from GetStream/develop

v10.12.0

docusaurus/docs/React/components/utility-components/channel-preview-ui.mdx

@@ -109,6 +109,40 @@ Latest message preview to display. Will be either a string or a JSX.Element rend
 | --------------------- |
 | string \| JSX.Element |
 
+### messageDeliveryStatus
+
+Status describing whether own message has been delivered or read by another. If the last message is not an own message, then the status is undefined. The value is calculated from `channel.read` data on mount and updated on every `message.new` resp. `message.read` WS event.
+
+| Type                    |
+|-------------------------|
+| `MessageDeliveryStatus` |
+
+Use `MessageDeliveryStatus` enum to determine the current delivery status, for example:
+
+```typescript jsx
+import { MessageDeliveryStatus } from 'stream-chat-react';
+import {
+    DoubleCheckMarkIcon,
+    SingleCheckMarkIcon,
+} from '../icons';
+
+type MessageDeliveryStatusIndicator = {
+    messageDeliveryStatus: MessageDeliveryStatus;
+}
+
+export const MessageDeliveryStatusIndicator = ({ messageDeliveryStatus }: MessageDeliveryStatusIndicator) => {
+    // the last message is not an own message in the channel
+    if (!messageDeliveryStatus) return null;
+
+    return (
+        <div>
+            {messageDeliveryStatus === MessageDeliveryStatus.DELIVERED && <SingleCheckMarkIcon /> }
+            {messageDeliveryStatus === MessageDeliveryStatus.READ && <DoubleCheckMarkIcon /> }
+        </div>
+    );
+};
+```
+
 ### onSelect
 
 Custom handler invoked when the `ChannelPreview` is clicked. The SDK uses `ChannelPreview` to display items of channel search results. There, behind the scenes, the new active channel is set.

docusaurus/docs/React/components/utility-components/channel-search.mdx

@@ -338,6 +338,14 @@ Custom search function to override default. The first argument should expect an
 | --------------------------------------------------------------------------------------------------- |
 | (`params: ChannelSearchFunctionParams, event: React.BaseSyntheticEvent` ) => Promise<void\> \| void |
 
+### searchDebounceIntervalMs
+
+The number of milliseconds to debounce the search query.
+
+| Type     | Default |
+|----------|---------|
+| `number` | 300     |
+
 ### SearchInput
 
 Custom UI component to display the search text input.

docusaurus/docs/React/guides/customization/channel-list-preview.mdx

@@ -141,7 +141,7 @@ import '@stream-io/stream-chat-css/dist/css/index.css';
 >
 ```
 
-Next, let's add a little bit more useful information to the component using more of the default props and a value pulled from the `ChatContext`, as well as some styling using custom CSS.
+Next, let's add a bit more useful information to the component using more of the default props and a value pulled from the `ChatContext`, as well as some styling using custom CSS.
 This context also exposes the client which makes it possible to use API methods.
 
 :::note

docusaurus/docs/React/guides/customization/channel-search.mdx

@@ -311,7 +311,7 @@ const additionalProps = {
 
 ### The searchFunction Prop:
 
-By default the `ChannelSearch` component searches just for users. Use the `searchForChannels` prop to also search for channels.
+By default, the `ChannelSearch` component searches just for users. Use the `searchForChannels` prop to also search for channels.
 
 To override the search method, completely use the `searchFunction` prop. This prop is useful, say, when you want to search just for channels
 and for only channels that the current logged in user is a member of. See the example below for this.

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

@@ -48,7 +48,7 @@ const channelsQueryStateMock = {
 };
 
 /**
- * We are gonna use following custom UI components for preview and list.
+ * We use the following custom UI components for preview and list.
  * If we use ChannelPreviewMessenger or ChannelPreviewLastMessage here, then changes
  * to those components might end up breaking tests for ChannelList, which will be quite painful
  * to debug then.
@@ -438,6 +438,7 @@ describe('ChannelList', () => {
     });
 
     describe('channel search', () => {
+      const defaultSearchDebounceInterval = 300;
       const inputText = 'xxxxxxxxxx';
       const user1 = generateUser();
       const user2 = generateUser();
@@ -551,20 +552,24 @@ describe('ChannelList', () => {
       ])(
         'theme v%s %s unmount search results on result click, if configured',
         async (themeVersion, _, clearSearchOnClickOutside) => {
+          jest.useFakeTimers('modern');
+          jest.spyOn(client, 'queryUsers').mockResolvedValue({ users: [generateUser()] });
           const { container } = await renderComponents(
             { channel, client, themeVersion },
             { additionalChannelSearchProps: { clearSearchOnClickOutside } },
           );
-          const input = screen.queryByTestId('search-input');
+          const input = screen.getByTestId('search-input');
           await act(() => {
             fireEvent.change(input, {
               target: {
                 value: inputText,
               },
             });
           });
-
-          const searchResults = screen.queryAllByRole('option');
+          await act(() => {
+            jest.advanceTimersByTime(defaultSearchDebounceInterval + 1);
+          });
+          const searchResults = screen.queryAllByTestId('channel-search-result-user');
           useMockedApis(client, [getOrCreateChannelApi(generateChannel())]);
           await act(() => {
             fireEvent.click(searchResults[0]);
@@ -577,6 +582,7 @@ describe('ChannelList', () => {
               expect(container.querySelector(SEARCH_RESULT_LIST_SELECTOR)).toBeInTheDocument();
             }
           });
+          jest.useRealTimers();
         },
       );
 
@@ -645,6 +651,8 @@ describe('ChannelList', () => {
       it.each([['1'], ['2']])(
         'theme v%s should add the selected result to the top of the channel list',
         async (themeVersion) => {
+          jest.useFakeTimers('modern');
+          jest.spyOn(client, 'queryUsers').mockResolvedValue({ users: [generateUser()] });
           const getComputedStyleMock = jest.spyOn(window, 'getComputedStyle');
           getComputedStyleMock.mockReturnValue({
             getPropertyValue: jest.fn().mockReturnValue(themeVersion),
@@ -679,8 +687,11 @@ describe('ChannelList', () => {
               },
             });
           });
+          await act(() => {
+            jest.advanceTimersByTime(defaultSearchDebounceInterval + 1);
+          });
 
-          const targetChannelPreview = screen.queryByText(channelNotInTheList.channel.name);
+          const targetChannelPreview = screen.getByText(channelNotInTheList.channel.name);
           expect(targetChannelPreview).toBeInTheDocument();
           await act(() => {
             fireEvent.click(targetChannelPreview);
@@ -693,6 +704,7 @@ describe('ChannelList', () => {
             }
           });
           getComputedStyleMock.mockClear();
+          jest.useRealTimers();
         },
       );
     });

src/components/ChannelPreview/ChannelPreview.tsx

@@ -7,6 +7,7 @@ import { getLatestMessagePreview } from './utils';
 
 import { ChatContextValue, useChatContext } from '../../context/ChatContext';
 import { useTranslationContext } from '../../context/TranslationContext';
+import { MessageDeliveryStatus, useMessageDeliveryStatus } from './hooks/useMessageDeliveryStatus';
 
 import type { Channel, Event } from 'stream-chat';
 
@@ -29,6 +30,8 @@ export type ChannelPreviewUIComponentProps<
   lastMessage?: StreamMessage<StreamChatGenerics>;
   /** Latest message preview to display, will be a string or JSX element supporting markdown. */
   latestMessage?: string | JSX.Element;
+  /** Status describing whether own message has been delivered or read by another. If the last message is not an own message, then the status is undefined. */
+  messageDeliveryStatus?: MessageDeliveryStatus;
   /** Number of unread Messages */
   unread?: number;
 };
@@ -73,6 +76,10 @@ export const ChannelPreview = <
     channel.state.messages[channel.state.messages.length - 1],
   );
   const [unread, setUnread] = useState(0);
+  const { messageDeliveryStatus } = useMessageDeliveryStatus<StreamChatGenerics>({
+    channel,
+    lastMessage,
+  });
 
   const isActive = activeChannel?.cid === channel.cid;
   const { muted } = useIsChannelMuted(channel);
@@ -126,6 +133,7 @@ export const ChannelPreview = <
       displayTitle={displayTitle}
       lastMessage={lastMessage}
       latestMessage={latestMessage}
+      messageDeliveryStatus={messageDeliveryStatus}
       setActiveChannel={setActiveChannel}
       unread={unread}
     />