stream-chat-react-native-core 9.2.0-beta.1 → 9.2.0-beta.3

package/src/components/AttachmentPicker/components/AttachmentTypePickerButton.tsx

@@ -28,12 +28,14 @@ import { Button, ButtonProps } from '../../ui';
 import { BottomSheetModal } from '../../UIComponents';
 
 export type AttachmentTypePickerButtonProps = Pick<ButtonProps, 'selected' | 'onPress'> & {
+  accessibilityLabelKey?: string;
   Icon: ButtonProps['LeadingIcon'];
 } & Pick<PressableProps, 'testID'>;
 
 const hitSlop = { bottom: 15, top: 15 };
 
 export const AttachmentTypePickerButton = ({
+  accessibilityLabelKey,
   testID,
   selected,
   onPress: onPressProp,
@@ -52,6 +54,7 @@ export const AttachmentTypePickerButton = ({
 
   return (
     <Button
+      accessibilityLabelKey={accessibilityLabelKey}
       testID={testID}
       hitSlop={hitSlop}
       onPress={onPress}
@@ -80,6 +83,7 @@ export const MediaPickerButton = () => {
 
   return hasImagePicker ? (
     <AttachmentTypePickerButton
+      accessibilityLabelKey='a11y/Open photo picker'
       testID='upload-photo-touchable'
       Icon={Picture}
       selected={selectedPicker === 'images'}
@@ -113,6 +117,7 @@ export const CameraPickerButton = () => {
   return hasCameraPicker ? (
     <>
       <AttachmentTypePickerButton
+        accessibilityLabelKey='a11y/Open camera'
         testID='take-photo-touchable'
         Icon={Camera}
         selected={selectedPicker === 'camera-photo'}
@@ -120,6 +125,7 @@ export const CameraPickerButton = () => {
       />
       {Platform.OS === 'android' ? (
         <AttachmentTypePickerButton
+          accessibilityLabelKey='a11y/Open video recorder'
           Icon={VideoIcon}
           selected={selectedPicker === 'camera-video'}
           onPress={onVideoRecorderPickerPress}
@@ -144,6 +150,7 @@ export const FilePickerButton = () => {
 
   return hasFilePicker ? (
     <AttachmentTypePickerButton
+      accessibilityLabelKey='a11y/Open file picker'
       testID='upload-file-touchable'
       Icon={FilePickerIcon}
       selected={selectedPicker === 'files'}
@@ -171,6 +178,7 @@ export const PollPickerButton = () => {
 
   return !threadList && hasCreatePoll && ownCapabilities.sendPoll ? ( // do not allow poll creation in threads
     <AttachmentTypePickerButton
+      accessibilityLabelKey='a11y/Open poll creation'
       testID='create-poll-touchable'
       Icon={PollThumbnail}
       selected={selectedPicker === 'polls'}
@@ -198,6 +206,7 @@ export const CommandsPickerButton = () => {
   return hasCommands ? (
     <>
       <AttachmentTypePickerButton
+        accessibilityLabelKey='a11y/Open commands'
         testID='commands-touchable'
         Icon={CommandsIcon}
         selected={selectedPicker === 'commands'}

package/src/components/AttachmentPicker/components/__tests__/AttachmentPickerContent.test.tsx

@@ -1,27 +1,31 @@
 import React from 'react';
 
 import { fireEvent, render, screen } from '@testing-library/react-native';
-import type { CommandSuggestion } from 'stream-chat';
-
-import {
-  AttachmentCommandNativePickerItem,
-  AttachmentCommandPickerItem,
-} from '../AttachmentPickerContent';
+import { type CommandSuggestion, notifyCommandDisabled } from 'stream-chat';
 
 jest.mock('stream-chat', () => ({
   CommandSearchSource: jest.fn(() => ({
     query: jest.fn(() => ({ items: [] })),
   })),
+  notifyCommandDisabled: jest.fn(),
 }));
 
+import {
+  AttachmentCommandNativePickerItem,
+  AttachmentCommandPickerItem,
+} from '../AttachmentPickerContent';
+
 jest.mock('../AttachmentMediaPicker/AttachmentMediaPicker', () => ({
   AttachmentMediaPicker: () => null,
 }));
 
+const mockNotifyCommandDisabled = jest.mocked(notifyCommandDisabled);
 const mockClose = jest.fn((callback?: () => void) => callback?.());
 const mockFocus = jest.fn();
-const mockIsCommandDisabled = jest.fn();
 const mockSetCommand = jest.fn();
+const mockMessageComposer = {
+  textComposer: { setCommand: mockSetCommand },
+};
 
 jest.mock('../../../../contexts', () => ({
   useAttachmentPickerContext: jest.fn(() => ({
@@ -30,10 +34,7 @@ jest.mock('../../../../contexts', () => ({
   useBottomSheetContext: jest.fn(() => ({
     close: mockClose,
   })),
-  useMessageComposer: jest.fn(() => ({
-    isCommandDisabled: mockIsCommandDisabled,
-    textComposer: { setCommand: mockSetCommand },
-  })),
+  useMessageComposer: jest.fn(() => mockMessageComposer),
   useMessageInputContext: jest.fn(() => ({
     inputBoxRef: { current: { focus: mockFocus } },
   })),
@@ -73,30 +74,30 @@ describe('AttachmentPickerContent commands', () => {
   beforeEach(() => {
     mockClose.mockClear();
     mockFocus.mockClear();
-    mockIsCommandDisabled.mockReset();
+    mockNotifyCommandDisabled.mockReset();
     mockSetCommand.mockClear();
   });
 
-  it('does not focus the input when a disabled command is pressed', () => {
-    mockIsCommandDisabled.mockReturnValue(true);
+  it('does not focus the input when a disabled command notification is emitted', () => {
+    mockNotifyCommandDisabled.mockReturnValue(true);
 
     render(<AttachmentCommandPickerItem item={command} />);
 
     fireEvent.press(screen.getByText('ban'));
 
-    expect(mockIsCommandDisabled).toHaveBeenCalledWith(command);
+    expect(mockNotifyCommandDisabled).toHaveBeenCalledWith(mockMessageComposer, command);
     expect(mockSetCommand).not.toHaveBeenCalled();
     expect(mockFocus).not.toHaveBeenCalled();
   });
 
-  it('does not close the picker or focus the input when a disabled command is pressed in native picker mode', () => {
-    mockIsCommandDisabled.mockReturnValue(true);
+  it('does not close the picker or focus the input when a disabled command notification is emitted in native picker mode', () => {
+    mockNotifyCommandDisabled.mockReturnValue(true);
 
     render(<AttachmentCommandNativePickerItem item={command} />);
 
     fireEvent.press(screen.getByText('ban'));
 
-    expect(mockIsCommandDisabled).toHaveBeenCalledWith(command);
+    expect(mockNotifyCommandDisabled).toHaveBeenCalledWith(mockMessageComposer, command);
     expect(mockSetCommand).not.toHaveBeenCalled();
     expect(mockClose).not.toHaveBeenCalled();
     expect(mockFocus).not.toHaveBeenCalled();

package/src/components/Channel/Channel.tsx

@@ -118,6 +118,8 @@ import type { KeyboardCompatibleViewProps } from '../KeyboardCompatibleView/Keyb
 import { Emoji } from '../MessageMenu/EmojiPickerList';
 import { emojis } from '../MessageMenu/emojis';
 import { toUnicodeScalarString } from '../MessageMenu/utils/toUnicodeScalarString';
+import { getChannelNotificationHostId } from '../Notifications/notificationTarget';
+import { NotificationTargetProvider } from '../Notifications/NotificationTargetContext';
 
 export type MarkReadFunctionOptions = {
   /**
@@ -352,6 +354,7 @@ export type ChannelPropsWithContext = Pick<ChannelContextValue, 'channel'> &
      * Load the channel at a specified message instead of the most recent message.
      */
     messageId?: string;
+    notificationHostId?: string;
     /**
      * @deprecated
      * The time interval for throttling while updating the message state
@@ -1789,6 +1792,9 @@ export type ChannelProps = Partial<Omit<ChannelPropsWithContext, 'channel' | 'th
 export const Channel = (props: PropsWithChildren<ChannelProps>) => {
   const { client, enableOfflineSupport, isOnline, isMessageAIGenerated } = useChatContext();
   const { t } = useTranslationContext();
+  const notificationHostId =
+    props.notificationHostId ??
+    (props.channel?.cid ? getChannelNotificationHostId(props.channel.cid) : undefined);
 
   const threadFromProps = props?.thread;
   const threadInstance = (threadFromProps as ThreadType)?.threadInstance as Thread;
@@ -1808,7 +1814,7 @@ export const Channel = (props: PropsWithChildren<ChannelProps>) => {
     props.threadList ? threadMessage?.id : undefined,
   );
 
-  return (
+  const channelWithContext = (
     <ChannelWithContext
       {...{
         client,
@@ -1826,6 +1832,14 @@ export const Channel = (props: PropsWithChildren<ChannelProps>) => {
       }}
     />
   );
+
+  return notificationHostId ? (
+    <NotificationTargetProvider hostId={notificationHostId} panel='channel'>
+      {channelWithContext}
+    </NotificationTargetProvider>
+  ) : (
+    channelWithContext
+  );
 };
 
 const useStyles = () => {

package/src/components/Channel/__tests__/useMessageListPagination.test.tsx

@@ -1,16 +1,30 @@
+import React, { PropsWithChildren } from 'react';
+
 import { act, cleanup, renderHook, waitFor } from '@testing-library/react-native';
 import type { Channel as ChannelType, LocalMessage, StreamChat } from 'stream-chat';
 
+import { ChatProvider } from '../../../contexts/chatContext/ChatContext';
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
 import { generateChannelResponse } from '../../../mock-builders/generator/channel';
 import { generateMessage } from '../../../mock-builders/generator/message';
 import { generateUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
+import { NotificationTargetProvider } from '../../Notifications/NotificationTargetContext';
 import { channelInitialState } from '../hooks/useChannelDataState';
 import * as ChannelStateHooks from '../hooks/useChannelDataState';
 import { useMessageListPagination } from '../hooks/useMessageListPagination';
 
+const createChatWrapper =
+  (client: StreamChat) =>
+  ({ children }: PropsWithChildren) => (
+    <ChatProvider value={{ client } as never}>
+      <NotificationTargetProvider hostId='channel:messaging:general' panel='channel'>
+        {children}
+      </NotificationTargetProvider>
+    </ChatProvider>
+  );
+
 describe('useMessageListPagination', () => {
   let chatClient: StreamChat;
   let channel: ChannelType;
@@ -618,7 +632,7 @@ describe('useMessageListPagination', () => {
         };
 
         // Mock query if needed
-        const queryMock = jest.fn();
+        const queryMock = jest.fn().mockResolvedValue({ messages: [] });
         channel.query = queryMock as unknown as typeof channel.query;
 
         // Set up mocks
@@ -626,9 +640,12 @@ describe('useMessageListPagination', () => {
         mockedHook(channelInitialState, { jumpToMessageFinished: jumpToMessageFinishedMock });
         const setChannelUnreadStateMock = jest.fn();
         const setTargetedMessageIdMock = jest.fn((message) => message);
+        const addNotificationSpy = jest.spyOn(chatClient.notifications, 'add');
 
         // Render hook
-        const { result } = renderHook(() => useMessageListPagination({ channel }));
+        const { result } = renderHook(() => useMessageListPagination({ channel }), {
+          wrapper: createChatWrapper(chatClient),
+        });
 
         // Act
         await act(async () => {
@@ -642,6 +659,21 @@ describe('useMessageListPagination', () => {
         // Assert
         await waitFor(() => {
           expect(queryMock).toHaveBeenCalledTimes(expectedQueryCalls);
+          if (expectedQueryCalls) {
+            expect(addNotificationSpy).toHaveBeenCalledWith({
+              message: 'Failed to jump to the first unread message',
+              options: {
+                originalError: expect.any(Error),
+                severity: 'error',
+                tags: ['target:channel:channel:messaging:general'],
+                type: 'channel:jumpToFirstUnread:failed',
+              },
+              origin: {
+                context: { feature: 'jumpToFirstUnread' },
+                emitter: 'Channel',
+              },
+            });
+          }
           expect(jumpToMessageFinishedMock).toHaveBeenCalledTimes(
             expectedJumpToMessageFinishedCalls,
           );

package/src/components/Channel/hooks/useMessageListPagination.tsx

@@ -6,8 +6,10 @@ import { Channel, ChannelState, MessageResponse } from 'stream-chat';
 import { useChannelMessageDataState } from './useChannelDataState';
 
 import { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext';
+import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { useStableCallback } from '../../../hooks';
 import { findInMessagesByDate, findInMessagesById } from '../../../utils/utils';
+import { useNotificationApi } from '../../Notifications';
 
 const defaultDebounceInterval = 500;
 const debounceOptions = {
@@ -22,6 +24,8 @@ const debounceOptions = {
  * @param channel The channel object for which the message list pagination is being handled.
  */
 export const useMessageListPagination = ({ channel }: { channel: Channel }) => {
+  const { addNotification } = useNotificationApi();
+  const { t } = useTranslationContext();
   const {
     copyMessagesStateFromChannel,
     jumpToLatestMessage,
@@ -180,6 +184,18 @@ export const useMessageListPagination = ({ channel }: { channel: Channel }) => {
     },
   );
 
+  const notifyJumpToFirstUnreadError = useStableCallback((error: unknown) => {
+    addNotification({
+      message: t('Failed to jump to the first unread message'),
+      options: {
+        ...(error instanceof Error ? { originalError: error } : {}),
+        severity: 'error',
+        type: 'channel:jumpToFirstUnread:failed',
+      },
+      origin: { context: { feature: 'jumpToFirstUnread' }, emitter: 'Channel' },
+    });
+  });
+
   /**
    * Loads channel at first unread message.
    */
@@ -225,7 +241,7 @@ export const useMessageListPagination = ({ channel }: { channel: Channel }) => {
               } catch (error) {
                 setLoading(false);
                 loadMoreFinished(channel.state.messagePagination.hasPrev, messagesState);
-                console.log('Loading channel at first unread message failed with error:', error);
+                notifyJumpToFirstUnreadError(error);
                 return;
               }
 
@@ -275,7 +291,7 @@ export const useMessageListPagination = ({ channel }: { channel: Channel }) => {
             } catch (error) {
               setLoading(false);
               loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
-              console.log('Loading channel at first unread message failed with error:', error);
+              notifyJumpToFirstUnreadError(error);
               return;
             }
           }
@@ -296,7 +312,7 @@ export const useMessageListPagination = ({ channel }: { channel: Channel }) => {
             setTargetedMessage(firstUnreadMessageId);
           }
         } catch (error) {
-          console.log('Loading channel at first unread message failed with error:', error);
+          notifyJumpToFirstUnreadError(error);
         }
       },
     );

package/src/components/ChannelList/ChannelList.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
 
+import { StyleSheet, View } from 'react-native';
 import type { FlatList } from 'react-native-gesture-handler';
 
 import {
@@ -21,8 +22,12 @@ import {
   ChannelsProvider,
 } from '../../contexts/channelsContext/ChannelsContext';
 import { useChatContext } from '../../contexts/chatContext/ChatContext';
+import { useComponentsContext } from '../../contexts/componentsContext/ComponentsContext';
 import { SwipeRegistryProvider } from '../../contexts/swipeableContext/SwipeRegistryContext';
+import { useLazyRef } from '../../hooks/useLazyRef';
 import type { ChannelListEventListenerOptions } from '../../types/types';
+import { generateRandomId } from '../../utils/utils';
+import { NotificationTargetProvider } from '../Notifications/NotificationTargetContext';
 
 export type ChannelListProps = Partial<
   Pick<
@@ -206,6 +211,7 @@ export type ChannelListProps = Partial<
    * - The return type has to be Channel[] (which is the return type of StreamChat.queryChannels)
    */
   queryChannelsOverride?: QueryChannelsRequestType;
+  notificationHostId?: string;
 };
 
 const DEFAULT_FILTERS = {};
@@ -244,12 +250,16 @@ export const ChannelList = (props: ChannelListProps) => {
     setFlatListRef,
     sort = DEFAULT_SORT,
     queryChannelsOverride,
+    notificationHostId: notificationHostIdProp,
     mutedStatusPosition = 'inlineTitle',
     swipeActionsEnabled = true,
   } = props;
 
   const [forceUpdate, setForceUpdate] = useState(0);
+  const fallbackNotificationHostIdRef = useLazyRef(() => `channel-list:${generateRandomId()}`);
+  const notificationHostId = notificationHostIdProp ?? fallbackNotificationHostIdRef.current;
   const { client, enableOfflineSupport } = useChatContext();
+  const { NotificationList } = useComponentsContext();
   const channelManager = useMemo(() => client.createChannelManager({}), [client]);
 
   /**
@@ -368,10 +378,22 @@ export const ChannelList = (props: ChannelListProps) => {
   });
 
   return (
-    <ChannelsProvider value={channelsContext}>
-      <SwipeRegistryProvider>
-        <ChannelListView />
-      </SwipeRegistryProvider>
-    </ChannelsProvider>
+    <NotificationTargetProvider hostId={notificationHostId} panel='channel-list'>
+      <ChannelsProvider value={channelsContext}>
+        <SwipeRegistryProvider>
+          <View style={styles.container}>
+            <ChannelListView />
+            <NotificationList />
+          </View>
+        </SwipeRegistryProvider>
+      </ChannelsProvider>
+    </NotificationTargetProvider>
   );
 };
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: 'transparent',
+    flex: 1,
+  },
+});

package/src/components/ChannelList/__tests__/ChannelListView.test.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
 
 import { cleanup, render, waitFor } from '@testing-library/react-native';
-import type { StreamChat } from 'stream-chat';
+import type { Channel, QueryChannelsRequestType, StreamChat } from 'stream-chat';
 
 import type { ChannelsContextValue } from '../../../contexts/channelsContext/ChannelsContext';
 import { ChannelsProvider } from '../../../contexts/channelsContext/ChannelsContext';
 import { ChatContext, ChatProvider } from '../../../contexts/chatContext/ChatContext';
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
-import { queryChannelsApi } from '../../../mock-builders/api/queryChannels';
 import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
 import { generateChannelResponse } from '../../../mock-builders/generator/channel';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
@@ -16,6 +15,11 @@ import { ChannelList } from '../ChannelList';
 import { ChannelListView } from '../ChannelListView';
 
 let chatClient: StreamChat;
+let defaultChannels: Channel[];
+let queryChannelsResponse: Channel[];
+
+const queryChannelsOverride: QueryChannelsRequestType = () =>
+  Promise.resolve(queryChannelsResponse);
 
 /**
  * Renders the full ChannelList (which now always uses ChannelListView internally).
@@ -31,6 +35,7 @@ const Component = () => (
                 $in: ['vishal', 'neil'],
               },
             }}
+            queryChannelsOverride={queryChannelsOverride}
           />
         </ChatProvider>
       )}
@@ -90,13 +95,19 @@ describe('ChannelListView', () => {
     chatClient = await getTestClientWithUser({ id: 'vishal' });
     const c1 = generateChannelResponse();
     const c2 = generateChannelResponse();
-    useMockedApis(chatClient, [getOrCreateChannelApi(c1), getOrCreateChannelApi(c2)]);
+    useMockedApis(chatClient, [getOrCreateChannelApi(c1)]);
     const channel1 = chatClient.channel(c1.channel.type, c1.channel.id);
     await channel1.watch();
+    useMockedApis(chatClient, [getOrCreateChannelApi(c2)]);
     const channel2 = chatClient.channel(c2.channel.type, c2.channel.id);
     await channel2.watch();
-    useMockedApis(chatClient, [queryChannelsApi([channel1, channel2])]);
+    defaultChannels = [channel1, channel2];
+  });
+
+  beforeEach(() => {
+    queryChannelsResponse = defaultChannels;
   });
+
   afterEach(cleanup);
 
   it('renders without crashing', async () => {
@@ -107,7 +118,7 @@ describe('ChannelListView', () => {
   });
 
   it('renders the `EmptyStateIndicator` when no channels are present', async () => {
-    useMockedApis(chatClient, [queryChannelsApi([])]);
+    queryChannelsResponse = [];
     const { getByTestId } = render(<Component />);
     await waitFor(() => {
       expect(getByTestId('empty-channel-state-title')).toBeTruthy();

package/src/components/ChannelList/hooks/__tests__/useChannelActions.test.tsx

@@ -0,0 +1,123 @@
+import React, { PropsWithChildren } from 'react';
+
+import { act, renderHook } from '@testing-library/react-native';
+import type { Channel } from 'stream-chat';
+
+import { ChatProvider } from '../../../../contexts/chatContext/ChatContext';
+import { useChannelActions } from '../useChannelActions';
+
+const createWrapper =
+  (client: unknown) =>
+  ({ children }: PropsWithChildren) => (
+    <ChatProvider value={{ client } as never}>{children}</ChatProvider>
+  );
+
+const createClient = () => ({
+  blockUser: jest.fn(),
+  notifications: {
+    add: jest.fn(),
+    remove: jest.fn(),
+    startTimeout: jest.fn(),
+  },
+  muteUser: jest.fn(),
+  unBlockUser: jest.fn(),
+  unmuteUser: jest.fn(),
+  userID: 'current-user-id',
+});
+
+const createChannel = (client: ReturnType<typeof createClient>) =>
+  ({
+    archive: jest.fn(),
+    getClient: () => client,
+    mute: jest.fn(),
+    pin: jest.fn(),
+    removeMembers: jest.fn(),
+    state: {
+      members: {
+        current: { user: { id: 'current-user-id' } },
+        other: { user: { id: 'other-user-id', name: 'Other User' } },
+      },
+    },
+    unarchive: jest.fn(),
+    unmute: jest.fn(),
+    unpin: jest.fn(),
+  }) as unknown as Channel;
+
+describe('useChannelActions', () => {
+  it('notifies when channel mute succeeds', async () => {
+    const client = createClient();
+    const channel = createChannel(client);
+    const { result } = renderHook(() => useChannelActions(channel), {
+      wrapper: createWrapper(client),
+    });
+
+    await act(async () => {
+      await result.current.muteChannel();
+    });
+
+    expect(channel.mute).toHaveBeenCalledTimes(1);
+    expect(client.notifications.add).toHaveBeenCalledWith({
+      message: 'Channel muted',
+      options: {
+        severity: 'success',
+        type: 'api:channel:mute:success',
+      },
+      origin: {
+        context: { channel },
+        emitter: 'ChannelActions',
+      },
+    });
+  });
+
+  it('notifies when channel mute fails', async () => {
+    const error = new Error('mute failed');
+    const client = createClient();
+    const channel = createChannel(client);
+    jest.mocked(channel.mute).mockRejectedValue(error);
+    const { result } = renderHook(() => useChannelActions(channel), {
+      wrapper: createWrapper(client),
+    });
+
+    await act(async () => {
+      await result.current.muteChannel();
+    });
+
+    expect(client.notifications.add).toHaveBeenCalledWith({
+      message: 'Failed to update channel mute status',
+      options: {
+        originalError: error,
+        severity: 'error',
+        type: 'api:channel:mute:failed',
+      },
+      origin: {
+        context: { channel },
+        emitter: 'ChannelActions',
+      },
+    });
+  });
+
+  it('notifies when a direct channel user is blocked', async () => {
+    const client = createClient();
+    const channel = createChannel(client);
+    const { result } = renderHook(() => useChannelActions(channel), {
+      wrapper: createWrapper(client),
+    });
+
+    await act(async () => {
+      await result.current.blockUser();
+    });
+
+    expect(client.blockUser).toHaveBeenCalledWith('other-user-id');
+    expect(client.notifications.add).toHaveBeenCalledWith({
+      message: 'User blocked',
+      options: {
+        severity: 'success',
+        type: 'api:user:block:success',
+      },
+      origin: {
+        context: { channel },
+        emitter: 'ChannelActions',
+      },
+    });
+  });
+});