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

package/src/components/ChannelList/hooks/useChannelActions.ts

@@ -2,8 +2,9 @@ import { useMemo } from 'react';
 
 import { Channel } from 'stream-chat';
 
-import { useChatContext } from '../../../contexts';
+import { useChatContext, useTranslationContext } from '../../../contexts';
 import { useStableCallback } from '../../../hooks';
+import { useNotificationApi } from '../../Notifications';
 
 export type ChannelActions = {
   archive: () => Promise<void>;
@@ -27,8 +28,25 @@ export const getOtherUserInDirectChannel = (channel: Channel) => {
     : undefined;
 };
 
+const getNotificationError = (error: unknown): Error | undefined => {
+  if (error instanceof Error) return error;
+  if (typeof error === 'string') return new Error(error);
+  if (error && typeof error === 'object' && 'message' in error) {
+    const message = error.message;
+    if (typeof message === 'string') return new Error(message);
+  }
+  return undefined;
+};
+
+const getNotificationErrorOptions = (error: unknown) => {
+  const originalError = getNotificationError(error);
+  return originalError ? { originalError } : {};
+};
+
 export const useChannelActions = (channel: Channel) => {
   const { client } = useChatContext();
+  const { addNotification } = useNotificationApi();
+  const { t } = useTranslationContext();
   const ownUserId = client.userID;
 
   const pin = useStableCallback(async () => {
@@ -37,8 +55,21 @@ export const useChannelActions = (channel: Channel) => {
         return;
       }
       await channel.pin();
+      addNotification({
+        message: t('Channel pinned'),
+        options: { severity: 'success', type: 'api:channel:pin:success' },
+        origin: { context: { channel }, emitter: 'ChannelActions' },
+      });
     } catch (error) {
-      console.log('Error pinning channel', error);
+      addNotification({
+        message: t('Failed to update channel pinned status'),
+        options: {
+          ...getNotificationErrorOptions(error),
+          severity: 'error',
+          type: 'api:channel:pin:failed',
+        },
+        origin: { context: { channel }, emitter: 'ChannelActions' },
+      });
     }
   });
 
@@ -48,8 +79,21 @@ export const useChannelActions = (channel: Channel) => {
         return;
       }
       await channel.unpin();
+      addNotification({
+        message: t('Channel unpinned'),
+        options: { severity: 'success', type: 'api:channel:unpin:success' },
+        origin: { context: { channel }, emitter: 'ChannelActions' },
+      });
     } catch (error) {
-      console.log('Error unpinning channel', error);
+      addNotification({
+        message: t('Failed to update channel pinned status'),
+        options: {
+          ...getNotificationErrorOptions(error),
+          severity: 'error',
+          type: 'api:channel:pin:failed',
+        },
+        origin: { context: { channel }, emitter: 'ChannelActions' },
+      });
     }
   });
 
@@ -59,8 +103,21 @@ export const useChannelActions = (channel: Channel) => {
         return;
       }
       await channel.archive();
+      addNotification({
+        message: t('Channel archived'),
+        options: { severity: 'success', type: 'api:channel:archive:success' },
+        origin: { context: { channel }, emitter: 'ChannelActions' },
+      });
     } catch (error) {
-      console.log('Error archiving channel', error);
+      addNotification({
+        message: t('Failed to update channel archive status'),
+        options: {
+          ...getNotificationErrorOptions(error),
+          severity: 'error',
+          type: 'api:channel:archive:failed',
+        },
+        origin: { context: { channel }, emitter: 'ChannelActions' },
+      });
     }
   });
 
@@ -70,8 +127,21 @@ export const useChannelActions = (channel: Channel) => {
         return;
       }
       await channel.unarchive();
+      addNotification({
+        message: t('Channel unarchived'),
+        options: { severity: 'success', type: 'api:channel:unarchive:success' },
+        origin: { context: { channel }, emitter: 'ChannelActions' },
+      });
     } catch (error) {
-      console.log('Error unarchiving channel', error);
+      addNotification({
+        message: t('Failed to update channel archive status'),
+        options: {
+          ...getNotificationErrorOptions(error),
+          severity: 'error',
+          type: 'api:channel:archive:failed',
+        },
+        origin: { context: { channel }, emitter: 'ChannelActions' },
+      });
     }
   });
 
@@ -80,7 +150,24 @@ export const useChannelActions = (channel: Channel) => {
       return;
     }
     if (ownUserId) {
-      await channel.removeMembers([ownUserId]);
+      try {
+        await channel.removeMembers([ownUserId]);
+        addNotification({
+          message: t('Left channel'),
+          options: { severity: 'success', type: 'api:channel:leave:success' },
+          origin: { context: { channel }, emitter: 'ChannelActions' },
+        });
+      } catch (error) {
+        addNotification({
+          message: t('Failed to leave channel'),
+          options: {
+            ...getNotificationErrorOptions(error),
+            severity: 'error',
+            type: 'api:channel:leave:failed',
+          },
+          origin: { context: { channel }, emitter: 'ChannelActions' },
+        });
+      }
     }
   });
 
@@ -106,9 +193,24 @@ export const useChannelActions = (channel: Channel) => {
     try {
       if (otherUser?.user?.id) {
         await client.muteUser(otherUser.user.id);
+        addNotification({
+          message: t('{{ user }} has been muted', {
+            user: otherUser.user.name || otherUser.user.id,
+          }),
+          options: { severity: 'success', type: 'api:user:mute:success' },
+          origin: { context: { channel }, emitter: 'ChannelActions' },
+        });
       }
     } catch (error) {
-      console.log('Error muting user', error);
+      addNotification({
+        message: t('Error muting a user ...'),
+        options: {
+          ...getNotificationErrorOptions(error),
+          severity: 'error',
+          type: 'api:user:mute:failed',
+        },
+        origin: { context: { channel }, emitter: 'ChannelActions' },
+      });
     }
   });
 
@@ -122,9 +224,24 @@ export const useChannelActions = (channel: Channel) => {
     try {
       if (otherUser?.user?.id) {
         await client.unmuteUser(otherUser.user.id);
+        addNotification({
+          message: t('{{ user }} has been unmuted', {
+            user: otherUser.user.name || otherUser.user.id,
+          }),
+          options: { severity: 'success', type: 'api:user:unmute:success' },
+          origin: { context: { channel }, emitter: 'ChannelActions' },
+        });
       }
     } catch (error) {
-      console.log('Error muting user', error);
+      addNotification({
+        message: t('Error unmuting a user ...'),
+        options: {
+          ...getNotificationErrorOptions(error),
+          severity: 'error',
+          type: 'api:user:unmute:failed',
+        },
+        origin: { context: { channel }, emitter: 'ChannelActions' },
+      });
     }
   });
 
@@ -135,8 +252,21 @@ export const useChannelActions = (channel: Channel) => {
 
     try {
       await channel.mute();
+      addNotification({
+        message: t('Channel muted'),
+        options: { severity: 'success', type: 'api:channel:mute:success' },
+        origin: { context: { channel }, emitter: 'ChannelActions' },
+      });
     } catch (error) {
-      console.log('Error muting channel', error);
+      addNotification({
+        message: t('Failed to update channel mute status'),
+        options: {
+          ...getNotificationErrorOptions(error),
+          severity: 'error',
+          type: 'api:channel:mute:failed',
+        },
+        origin: { context: { channel }, emitter: 'ChannelActions' },
+      });
     }
   });
 
@@ -147,8 +277,21 @@ export const useChannelActions = (channel: Channel) => {
 
     try {
       await channel.unmute();
+      addNotification({
+        message: t('Channel unmuted'),
+        options: { severity: 'success', type: 'api:channel:unmute:success' },
+        origin: { context: { channel }, emitter: 'ChannelActions' },
+      });
     } catch (error) {
-      console.log('Error muting channel', error);
+      addNotification({
+        message: t('Failed to update channel mute status'),
+        options: {
+          ...getNotificationErrorOptions(error),
+          severity: 'error',
+          type: 'api:channel:mute:failed',
+        },
+        origin: { context: { channel }, emitter: 'ChannelActions' },
+      });
     }
   });
 
@@ -162,9 +305,22 @@ export const useChannelActions = (channel: Channel) => {
     try {
       if (otherUser?.user?.id) {
         await client.blockUser(otherUser.user.id);
+        addNotification({
+          message: t('User blocked'),
+          options: { severity: 'success', type: 'api:user:block:success' },
+          origin: { context: { channel }, emitter: 'ChannelActions' },
+        });
       }
     } catch (error) {
-      console.log('Error blocking user', error);
+      addNotification({
+        message: t('Failed to block user'),
+        options: {
+          ...getNotificationErrorOptions(error),
+          severity: 'error',
+          type: 'api:user:block:failed',
+        },
+        origin: { context: { channel }, emitter: 'ChannelActions' },
+      });
     }
   });
 
@@ -178,9 +334,22 @@ export const useChannelActions = (channel: Channel) => {
     try {
       if (otherUser?.user?.id) {
         await client.unBlockUser(otherUser.user.id);
+        addNotification({
+          message: t('User unblocked'),
+          options: { severity: 'success', type: 'api:user:unblock:success' },
+          origin: { context: { channel }, emitter: 'ChannelActions' },
+        });
       }
     } catch (error) {
-      console.log('Error unblocking user', error);
+      addNotification({
+        message: t('Failed to block user'),
+        options: {
+          ...getNotificationErrorOptions(error),
+          severity: 'error',
+          type: 'api:user:block:failed',
+        },
+        origin: { context: { channel }, emitter: 'ChannelActions' },
+      });
     }
   });
 

package/src/components/ImageGallery/__tests__/ImageGalleryFooter.test.tsx

@@ -59,7 +59,10 @@ const ImageGalleryComponentVideo = (props: ImageGalleryProps) => {
   });
 
   return (
-    <OverlayProvider value={{ overlayOpacity: { value: 1 } as SharedValue<number> }}>
+    <OverlayProvider
+      accessibility={{ enabled: true }}
+      value={{ overlayOpacity: { value: 1 } as SharedValue<number> }}
+    >
       {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
       <WithComponents overrides={{ ImageGalleryHeader: undefined as any }}>
         <ImageGalleryContext.Provider
@@ -101,7 +104,10 @@ const ImageGalleryComponentImage = (
   });
 
   return (
-    <OverlayProvider value={{ overlayOpacity: { value: 1 } as SharedValue<number> }}>
+    <OverlayProvider
+      accessibility={{ enabled: true }}
+      value={{ overlayOpacity: { value: 1 } as SharedValue<number> }}
+    >
       {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}
       <WithComponents overrides={{ ImageGalleryHeader: undefined as any }}>
         <ImageGalleryContext.Provider
@@ -129,7 +135,7 @@ describe('ImageGalleryFooter', () => {
     });
   });
 
-  it('render image gallery footer component with Share Button and Grid Icon', async () => {
+  it('render image gallery footer component with share and grid buttons', async () => {
     render(<ImageGalleryComponentVideo />);
 
     await waitFor(() => {

package/src/components/ImageGallery/__tests__/ImageGalleryHeader.test.tsx

@@ -47,7 +47,10 @@ const ImageGalleryComponent = (props: ImageGalleryProps) => {
   }, [imageGalleryStateStore]);
 
   return (
-    <OverlayProvider value={{ overlayOpacity: { value: 1 } as SharedValue<number> }}>
+    <OverlayProvider
+      accessibility={{ enabled: true }}
+      value={{ overlayOpacity: { value: 1 } as SharedValue<number> }}
+    >
       <ImageGalleryContext.Provider
         value={
           {

package/src/components/ImageGallery/components/ImageGalleryFooter.tsx

@@ -134,7 +134,7 @@ export const ImageGalleryFooterWithContext = (props: ImageGalleryFooterProps) =>
             </Text>
           </View>
           <Button
-            accessibilityLabel='Grid Icon'
+            accessibilityLabelKey='a11y/Grid Icon'
             variant='secondary'
             type='ghost'
             size='md'
@@ -166,7 +166,7 @@ const ShareButton = ({ share, savingInProgress }: ShareButtonProps) => {
     </View>
   ) : (
     <Button
-      accessibilityLabel='Share Button'
+      accessibilityLabelKey='a11y/Share Button'
       variant='secondary'
       type='ghost'
       size='md'

package/src/components/ImageGallery/components/ImageGalleryHeader.tsx

@@ -74,7 +74,7 @@ export const ImageGalleryHeader = (props: ImageGalleryHeaderProps) => {
       <ReanimatedSafeAreaView edges={['top']} style={[styles.container, headerStyle]}>
         <View style={styles.innerContainer}>
           <Button
-            accessibilityLabel='Hide Overlay'
+            accessibilityLabelKey='a11y/Hide Overlay'
             variant='secondary'
             type='ghost'
             size='md'

package/src/components/ImageGallery/components/ImageGalleryVideoControl.tsx

@@ -74,7 +74,7 @@ export const ImageGalleryVideoControl = React.memo((props: ImageGalleryVideoCont
     <View style={[styles.container, container]}>
       <View style={styles.leftContainer}>
         <Button
-          accessibilityLabel='Play Pause Button'
+          accessibilityLabelKey='a11y/Play Pause Button'
           variant='secondary'
           type='ghost'
           size='md'

package/src/components/Message/hooks/__tests__/useMessageActionHandlers.test.tsx

@@ -0,0 +1,131 @@
+import React, { PropsWithChildren } from 'react';
+
+import { act, renderHook } from '@testing-library/react-native';
+import type { Channel, LocalMessage, StreamChat } from 'stream-chat';
+
+import { ChannelProvider } from '../../../../contexts/channelContext/ChannelContext';
+import { ChatProvider } from '../../../../contexts/chatContext/ChatContext';
+import { NotificationTargetProvider } from '../../../Notifications/NotificationTargetContext';
+import { useMessageActionHandlers } from '../useMessageActionHandlers';
+
+const createClient = () =>
+  ({
+    mutedUsers: [],
+    notifications: {
+      add: jest.fn(() => 'notification-id'),
+      remove: jest.fn(),
+      startTimeout: jest.fn(),
+    },
+    on: jest.fn(() => ({ unsubscribe: jest.fn() })),
+    pinMessage: jest.fn(),
+    unpinMessage: jest.fn(),
+    userID: 'current-user-id',
+  }) as unknown as StreamChat & {
+    notifications: { add: jest.Mock; remove: jest.Mock; startTimeout: jest.Mock };
+    pinMessage: jest.Mock;
+    unpinMessage: jest.Mock;
+  };
+
+const createChannel = () =>
+  ({
+    markUnread: jest.fn(),
+  }) as unknown as Channel & { markUnread: jest.Mock };
+
+const createWrapper =
+  (client: StreamChat, channel: Channel) =>
+  ({ children }: PropsWithChildren) => (
+    <ChatProvider value={{ client } as never}>
+      <NotificationTargetProvider hostId='channel:messaging:general' panel='channel'>
+        <ChannelProvider value={{ channel } as never}>{children}</ChannelProvider>
+      </NotificationTargetProvider>
+    </ChatProvider>
+  );
+
+const createMessage = (overrides?: Partial<LocalMessage>) =>
+  ({
+    id: 'message-id',
+    pinned: false,
+    text: 'Message text',
+    user: { id: 'message-user-id', name: 'Message User' },
+    ...overrides,
+  }) as LocalMessage;
+
+const renderUseMessageActionHandlers = ({
+  channel = createChannel(),
+  client = createClient(),
+  message = createMessage(),
+}: {
+  channel?: Channel & { markUnread: jest.Mock };
+  client?: ReturnType<typeof createClient>;
+  message?: LocalMessage;
+} = {}) =>
+  renderHook(
+    () =>
+      useMessageActionHandlers({
+        channel,
+        client,
+        deleteMessage: jest.fn(),
+        deleteReaction: jest.fn(),
+        enforceUniqueReaction: false,
+        message,
+        retrySendMessage: jest.fn(),
+        sendReaction: jest.fn(),
+        setEditingState: jest.fn(),
+        setQuotedMessage: jest.fn(),
+        supportedReactions: [],
+      }),
+    { wrapper: createWrapper(client, channel) },
+  );
+
+describe('useMessageActionHandlers notifications', () => {
+  it('notifies when pinning a message succeeds', async () => {
+    const client = createClient();
+    const message = createMessage();
+    const { result } = renderUseMessageActionHandlers({ client, message });
+
+    await act(async () => {
+      await result.current.handleTogglePinMessage();
+    });
+
+    expect(client.pinMessage).toHaveBeenCalledWith(message, null);
+    expect(client.notifications.add).toHaveBeenCalledWith({
+      message: 'Message pinned',
+      options: {
+        severity: 'success',
+        tags: ['target:channel:channel:messaging:general'],
+        type: 'api:message:pin:success',
+      },
+      origin: {
+        context: { message },
+        emitter: 'MessageActions',
+      },
+    });
+  });
+
+  it('notifies when marking a message unread fails', async () => {
+    const error = new Error('Cannot mark unread');
+    const client = createClient();
+    const channel = createChannel();
+    const message = createMessage();
+    channel.markUnread.mockRejectedValue(error);
+    const { result } = renderUseMessageActionHandlers({ channel, client, message });
+
+    await act(async () => {
+      await result.current.handleMarkUnreadMessage();
+    });
+
+    expect(client.notifications.add).toHaveBeenCalledWith({
+      message: 'Cannot mark unread',
+      options: {
+        originalError: error,
+        severity: 'error',
+        tags: ['target:channel:channel:messaging:general'],
+        type: 'api:message:markUnread:failed',
+      },
+      origin: {
+        context: { message },
+        emitter: 'MessageActions',
+      },
+    });
+  });
+});