stream-chat-react-native-core 9.2.0-beta.2 → 9.2.0-beta.4

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/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',
+      },
+    });
+  });
+});

package/src/components/Message/hooks/useMessageActionHandlers.ts

@@ -19,6 +19,25 @@ import {
 } from '../../../hooks';
 import { useTranslatedMessage } from '../../../hooks/useTranslatedMessage';
 import { NativeHandlers } from '../../../native';
+import { useNotificationApi } from '../../Notifications';
+
+const getErrorMessage = (error: unknown, fallback: string) =>
+  error instanceof Error && error.message ? error.message : fallback;
+
+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 useWithPortalKeyboardSafety = <T extends unknown[]>(
   callback: (...args: T) => void,
@@ -47,6 +66,7 @@ export const useMessageActionHandlers = ({
   Pick<MessageContextValue, 'message'> &
   Pick<MessageComposerAPIContextValue, 'setEditingState' | 'setQuotedMessage'>) => {
   const { t } = useTranslationContext();
+  const { addNotification } = useNotificationApi();
   const handleResendMessage = useStableCallback(() => retrySendMessage(message));
   const translatedMessage = useTranslatedMessage(message);
 
@@ -74,7 +94,24 @@ export const useMessageActionHandlers = ({
         { style: 'cancel', text: t('Cancel') },
         {
           onPress: async () => {
-            await deleteMessage(message);
+            try {
+              await deleteMessage(message);
+              addNotification({
+                message: t('Message deleted'),
+                options: { severity: 'success', type: 'api:message:delete:success' },
+                origin: { context: { message }, emitter: 'MessageActions' },
+              });
+            } catch (error) {
+              addNotification({
+                message: getErrorMessage(error, t('Error deleting message')),
+                options: {
+                  ...getNotificationErrorOptions(error),
+                  severity: 'error',
+                  type: 'api:message:delete:failed',
+                },
+                origin: { context: { message }, emitter: 'MessageActions' },
+              });
+            }
           },
           style: 'destructive',
           text: t('Delete'),
@@ -97,10 +134,39 @@ export const useMessageActionHandlers = ({
       return;
     }
 
-    if (isMuted) {
-      await client.unmuteUser(message.user.id);
-    } else {
-      await client.muteUser(message.user.id);
+    try {
+      if (isMuted) {
+        await client.unmuteUser(message.user.id);
+        addNotification({
+          message: t('{{ user }} has been unmuted', {
+            user: message.user?.name || message.user?.id,
+          }),
+          options: { severity: 'success', type: 'api:user:unmute:success' },
+          origin: { context: { message }, emitter: 'MessageActions' },
+        });
+      } else {
+        await client.muteUser(message.user.id);
+        addNotification({
+          message: t('{{ user }} has been muted', {
+            user: message.user?.name || message.user?.id,
+          }),
+          options: { severity: 'success', type: 'api:user:mute:success' },
+          origin: { context: { message }, emitter: 'MessageActions' },
+        });
+      }
+    } catch (error) {
+      addNotification({
+        message: getErrorMessage(
+          error,
+          isMuted ? t('Error unmuting a user ...') : t('Error muting a user ...'),
+        ),
+        options: {
+          ...getNotificationErrorOptions(error),
+          severity: 'error',
+          type: isMuted ? 'api:user:unmute:failed' : 'api:user:mute:failed',
+        },
+        origin: { context: { message }, emitter: 'MessageActions' },
+      });
     }
   });
 
@@ -118,11 +184,36 @@ export const useMessageActionHandlers = ({
   });
 
   const handleTogglePinMessage = useStableCallback(async () => {
-    const MessagePinnedHeaderStatus = message.pinned;
-    if (!MessagePinnedHeaderStatus) {
-      await client.pinMessage(message, null);
-    } else {
-      await client.unpinMessage(message);
+    const isPinned = !!message.pinned;
+    try {
+      if (!isPinned) {
+        await client.pinMessage(message, null);
+        addNotification({
+          message: t('Message pinned'),
+          options: { severity: 'success', type: 'api:message:pin:success' },
+          origin: { context: { message }, emitter: 'MessageActions' },
+        });
+      } else {
+        await client.unpinMessage(message);
+        addNotification({
+          message: t('Message unpinned'),
+          options: { severity: 'success', type: 'api:message:unpin:success' },
+          origin: { context: { message }, emitter: 'MessageActions' },
+        });
+      }
+    } catch (error) {
+      addNotification({
+        message: getErrorMessage(
+          error,
+          isPinned ? t('Error removing message pin') : t('Error pinning message'),
+        ),
+        options: {
+          ...getNotificationErrorOptions(error),
+          severity: 'error',
+          type: isPinned ? 'api:message:unpin:failed' : 'api:message:pin:failed',
+        },
+        origin: { context: { message }, emitter: 'MessageActions' },
+      });
     }
   });
 
@@ -143,15 +234,21 @@ export const useMessageActionHandlers = ({
           onPress: async () => {
             try {
               await client.flagMessage(message.id);
-              Alert.alert(t('Message flagged'), t('The message has been reported to a moderator.'));
+              addNotification({
+                message: t('Message has been successfully flagged'),
+                options: { severity: 'success', type: 'api:message:flag:success' },
+                origin: { context: { message }, emitter: 'MessageActions' },
+              });
             } catch (error) {
-              console.log('Error flagging message:', error);
-              Alert.alert(
-                t('Cannot Flag Message'),
-                t(
-                  'Flag action failed either due to a network issue or the message is already flagged',
-                ),
-              );
+              addNotification({
+                message: getErrorMessage(error, t('Error adding flag')),
+                options: {
+                  ...getNotificationErrorOptions(error),
+                  severity: 'error',
+                  type: 'api:message:flag:failed',
+                },
+                origin: { context: { message }, emitter: 'MessageActions' },
+              });
             }
           },
           text: t('Flag'),
@@ -167,13 +264,26 @@ export const useMessageActionHandlers = ({
     }
     try {
       await channel.markUnread({ message_id: message.id });
+      addNotification({
+        message: t('Message marked as unread'),
+        options: { severity: 'success', type: 'api:message:markUnread:success' },
+        origin: { context: { message }, emitter: 'MessageActions' },
+      });
     } catch (error) {
-      console.log('Error marking message as unread:', error);
-      Alert.alert(
-        t(
-          'Error marking message unread. Cannot mark unread messages older than the newest 100 channel messages.',
+      addNotification({
+        message: getErrorMessage(
+          error,
+          t(
+            'Error marking message unread. Cannot mark unread messages older than the newest 100 channel messages.',
+          ),
         ),
-      );
+        options: {
+          ...getNotificationErrorOptions(error),
+          severity: 'error',
+          type: 'api:message:markUnread:failed',
+        },
+        origin: { context: { message }, emitter: 'MessageActions' },
+      });
     }
   });
 

package/src/components/MessageInput/MessageComposer.tsx

@@ -50,7 +50,7 @@ import { useStateStore } from '../../hooks/useStateStore';
 import { AudioRecorderManagerState } from '../../state-store/audio-recorder-manager';
 import { MessageInputHeightState } from '../../state-store/message-input-height-store';
 import { primitives } from '../../theme';
-import { transitions } from '../../utils/transitions';
+import { transitions } from '../../utils/animations/transitions';
 import { type TextInputOverrideComponent } from '../AutoCompleteInput/AutoCompleteInput';
 import { CreatePoll } from '../Poll/CreatePollContent';
 import { PortalWhileClosingView } from '../UIComponents/PortalWhileClosingView';

package/src/components/MessageInput/MessageComposerLeadingView.tsx

@@ -9,7 +9,7 @@ import { idleRecordingStateSelector } from './utils/audioRecorderSelectors';
 import { useMessageInputContext } from '../../contexts/messageInputContext/MessageInputContext';
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStateStore } from '../../hooks/useStateStore';
-import { transitions } from '../../utils/transitions';
+import { transitions } from '../../utils/animations/transitions';
 
 export const MessageComposerLeadingView = () => {
   const {

package/src/components/MessageInput/MessageInputHeaderView.tsx

@@ -17,7 +17,7 @@ import { useMessageInputContext } from '../../contexts/messageInputContext/Messa
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStateStore } from '../../hooks/useStateStore';
 import { primitives } from '../../theme';
-import { transitions } from '../../utils/transitions';
+import { transitions } from '../../utils/animations/transitions';
 
 export const MessageInputHeaderView = () => {
   const {

package/src/components/MessageInput/MessageInputTrailingView.tsx

@@ -11,7 +11,7 @@ import { useMessageInputContext } from '../../contexts/messageInputContext/Messa
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
 import { useStateStore } from '../../hooks/useStateStore';
 import { primitives } from '../../theme';
-import { transitions } from '../../utils/transitions';
+import { transitions } from '../../utils/animations/transitions';
 
 export const MessageInputTrailingView = () => {
   const {