stream-chat-react-native-core 9.10.2-beta.1 → 10.0.0-rc.2

package/src/components/MessageMenu/hooks/useFetchReactions.ts

@@ -1,16 +1,17 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { LocalMessage, ReactionResponse, ReactionSort } from 'stream-chat';
+import { LocalMessage, ReactionResponse, SortParamRequest } from 'stream-chat';
 
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
+import { useStableCallback } from '../../../hooks/useStableCallback';
 import { useNotificationApi } from '../../Notifications';
 
 export type UseFetchReactionParams = {
   limit?: number;
   message?: LocalMessage;
   reactionType?: string;
-  sort?: ReactionSort;
+  sort?: SortParamRequest[];
 };
 
 const isSameReaction = (left: ReactionResponse, right: ReactionResponse) =>
@@ -105,17 +106,30 @@ export const useFetchReactions = ({
 
   const sortString = useMemo(() => JSON.stringify(sort), [sort]);
 
+  const notifyFetchFailed = useStableCallback((error: unknown) => {
+    addNotification({
+      message: t('messageMenu.userReactions.fetchFailed.error', 'Error fetching reactions'),
+      options: {
+        ...(error instanceof Error ? { originalError: error } : {}),
+        severity: 'error',
+        type: 'api:message:reactions:fetch:failed',
+      },
+      origin: {
+        ...(message ? { context: { message } } : {}),
+        emitter: 'Reactions',
+      },
+    });
+  });
+
   const fetchReactions = useCallback(
     async (next: string | undefined) => {
       if (!messageId) {
         return;
       }
       try {
-        const response = await client.queryReactions(
-          messageId,
-          reactionType ? { type: reactionType } : {},
-          sort,
-          { limit, next },
+        const response = await client.queryReactionsAndHydrate(
+          { id: messageId },
+          { filter: reactionType ? { type: reactionType } : undefined, limit, next, sort },
         );
         if (response) {
           setNext(response.next);
@@ -126,21 +140,10 @@ export const useFetchReactions = ({
           setLoading(false);
         }
       } catch (error) {
-        addNotification({
-          message: t('Error fetching reactions'),
-          options: {
-            ...(error instanceof Error ? { originalError: error } : {}),
-            severity: 'error',
-            type: 'api:message:reactions:fetch:failed',
-          },
-          origin: {
-            ...(message ? { context: { message } } : {}),
-            emitter: 'Reactions',
-          },
-        });
+        notifyFetchFailed(error);
       }
     },
-    [addNotification, client, limit, message, messageId, reactionType, sort, t],
+    [client, limit, messageId, notifyFetchFailed, reactionType, sort],
   );
 
   const loadNextPage = useCallback(async () => {
@@ -160,7 +163,12 @@ export const useFetchReactions = ({
     listeners.push(
       client.on('offline_reactions.queried', (event) => {
         const { offlineReactions } = event;
-        if (offlineReactions) {
+        // The event does not say which message was queried.
+        const isForThisQuery = offlineReactions?.every(
+          (reaction) =>
+            reaction.message_id === messageId && (!reactionType || reaction.type === reactionType),
+        );
+        if (offlineReactions && isForThisQuery) {
           setReactions(offlineReactions);
           setLoading(false);
           setNext(undefined);
@@ -172,7 +180,7 @@ export const useFetchReactions = ({
       client.on('reaction.new', (event) => {
         const { reaction } = event;
 
-        if (reaction) {
+        if (reaction && reaction.message_id === messageId) {
           setReactions((prevReactions) =>
             upsertReactionInList({
               prevReactions,
@@ -188,7 +196,7 @@ export const useFetchReactions = ({
       client.on('reaction.updated', (event) => {
         const { reaction } = event;
 
-        if (reaction) {
+        if (reaction && reaction.message_id === messageId) {
           setReactions((prevReactions) =>
             reconcileUpdatedReactionInList({
               prevReactions,
@@ -204,7 +212,7 @@ export const useFetchReactions = ({
       client.on('reaction.deleted', (event) => {
         const { reaction } = event;
 
-        if (reaction) {
+        if (reaction && reaction.message_id === messageId) {
           setReactions((prevReactions) =>
             removeReactionFromList({
               prevReactions,
@@ -221,7 +229,7 @@ export const useFetchReactions = ({
         listener?.unsubscribe();
       });
     };
-  }, [client, reactionType]);
+  }, [client, messageId, reactionType]);
 
   return { loading, loadNextPage, reactions };
 };

package/src/components/Notifications/Notification.tsx

@@ -24,10 +24,15 @@ export type NotificationIconProps = {
   notification: NotificationType;
 };
 
-/** Visual variant resolved from notification severity. Notifications without severity use `default`. */
+/** Visual variant resolved from severity. Notifications without severity use `default`. */
 export type NotificationVariant = 'default' | NotificationSeverity;
 
-/** Resolves the visual variant used by the default notification renderer. */
+/**
+ * Resolves the visual variant used by the default notification renderer.
+ *
+ * @param notification The notification to render.
+ * @returns The variant of its severity, or `default` without one.
+ */
 export const getNotificationVariant = (notification: NotificationType): NotificationVariant =>
   notification.severity ?? 'default';
 
@@ -71,7 +76,7 @@ export type NotificationProps = {
   Icon?: React.ComponentType<NotificationIconProps>;
   /** Called instead of the default notification removal behavior. */
   onDismiss?: () => void;
-  /** Forces a dismiss button for transient notifications. Persistent notifications always show one. */
+  /** Forces a dismiss button on transient notifications. Persistent ones always show one. */
   showClose?: boolean;
   /** Reserved for custom animated notification implementations. */
   transitionState?: NotificationTransitionState;
@@ -136,7 +141,7 @@ export const Notification = ({
       ) : null}
       {closeVisible ? (
         <Pressable
-          accessibilityLabel={t('a11y/Dismiss notification')}
+          accessibilityLabel={t('notifications.dismiss.accessibilityLabel', 'Dismiss notification')}
           accessibilityRole='button'
           hitSlop={8}
           onPress={handleDismiss}

package/src/components/Notifications/NotificationList.tsx

@@ -28,7 +28,7 @@ export type NotificationListProps = {
   enterFrom?: NotificationListEnterFrom;
   /** Additional per-list filter applied after target filtering. */
   filter?: NotificationListFilter;
-  /** Exact notification host id. Use together with `panel` when rendering outside a target provider. */
+  /** Exact notification host ID. Use together with `panel` outside a target provider. */
   hostId?: string;
   /** Target panel consumed by this list. Defaults to the nearest `NotificationTargetProvider`. */
   panel?: NotificationTargetPanel;
@@ -90,7 +90,7 @@ export const NotificationList = ({
 
   return (
     <Animated.View
-      accessibilityLabel={t('a11y/Notifications')}
+      accessibilityLabel={t('notifications.list.accessibilityLabel', 'Notifications')}
       pointerEvents='box-none'
       layout={transitions.layout200}
       style={styles.container}

package/src/components/Notifications/NotificationTargetContext.tsx

@@ -22,10 +22,20 @@ export const NotificationTargetProvider = ({
   );
 };
 
-/** Returns the nearest notification target, if the caller is rendered inside a target provider. */
+/**
+ * Returns the nearest notification target, if the caller is rendered inside a target provider.
+ *
+ * @returns The target, or `undefined` outside a provider.
+ */
 export const useNotificationTargetContext = () => useContext(NotificationTargetContext);
 
-/** Resolves an explicit target or falls back to the nearest compatible target provider. */
+/**
+ * Resolves an explicit target or falls back to the nearest compatible target provider.
+ *
+ * @param params.hostId Exact host ID. Resolves only together with `panel`.
+ * @param params.panel Target panel. Without `hostId`, resolves only to the context target of it.
+ * @returns The resolved target, or `undefined` when none matches.
+ */
 export const useResolvedNotificationTarget = ({
   hostId,
   panel,

package/src/components/Notifications/__tests__/notificationTranslations.test.ts

@@ -0,0 +1,59 @@
+import { CORE_NOTIFICATION_TYPE } from 'stream-chat';
+import type { CommandSuggestionDisabledReason, Notification } from 'stream-chat';
+
+import type { StreamTFunction } from '../../../i18n/types';
+import { getNotificationDisplayMessage } from '../notificationTranslations';
+
+/** Resolves each key to its inline default, which is what an untranslated locale renders. */
+const t = ((key: string, defaultValue?: string) => defaultValue ?? key) as StreamTFunction;
+
+const buildNotification = (overrides: Partial<Notification> = {}): Notification =>
+  ({
+    createdAt: 0,
+    id: 'n1',
+    message: 'developer-facing fallback',
+    origin: { emitter: 'MessageComposer' },
+    ...overrides,
+  }) as Notification;
+
+describe('getNotificationDisplayMessage', () => {
+  /**
+   * `metadata.reason` is typed `CommandSuggestionDisabledReason` in `stream-chat`, so the branches
+   * here have to match the values it actually emits. They previously read `'replying'`, which the
+   * client never produces -- so the reply case fell through to the generic copy silently.
+   *
+   * The `satisfies` below is the guard that matters: rename a reason in core and this stops
+   * compiling, rather than quietly falling through again.
+   */
+  describe(CORE_NOTIFICATION_TYPE.commandDisabled, () => {
+    const reasons = {
+      editing: 'Command not available while editing',
+      quoted_message: 'Command not available while replying',
+    } satisfies Record<CommandSuggestionDisabledReason, string>;
+
+    it.each(Object.entries(reasons))('renders the copy for %s', (reason, expected) => {
+      const notification = buildNotification({
+        metadata: { command: 'giphy', reason },
+        type: CORE_NOTIFICATION_TYPE.commandDisabled,
+      });
+
+      expect(getNotificationDisplayMessage({ notification, t })).toBe(expected);
+    });
+
+    it('falls back to the generic copy when no reason is given', () => {
+      const notification = buildNotification({
+        metadata: { command: 'giphy' },
+        type: CORE_NOTIFICATION_TYPE.commandDisabled,
+      });
+
+      expect(getNotificationDisplayMessage({ notification, t })).toBe('Command not available');
+    });
+  });
+
+  /** An identifier no translator claims renders `message` verbatim rather than an empty toast. */
+  it('passes an unrecognized type through', () => {
+    const notification = buildNotification({ type: 'someone:elses:identifier' });
+
+    expect(getNotificationDisplayMessage({ notification, t })).toBe('developer-facing fallback');
+  });
+});

package/src/components/Notifications/hooks/__tests__/useNotificationApi.test.tsx

@@ -106,7 +106,7 @@ describe('useNotificationApi', () => {
       },
     };
     const { result } = renderHook(() => useNotificationApi(), {
-      wrapper: createWrapper(client, { threadList: true }),
+      wrapper: createWrapper(client),
     });
 
     const id = result.current.addSystemNotification({

package/src/components/Notifications/hooks/__tests__/useNotificationTarget.test.tsx

@@ -43,22 +43,10 @@ describe('useNotificationTarget', () => {
     expect(result.current).toBe('channel');
   });
 
-  it('targets thread when Channel is in thread-list mode', () => {
-    const wrapper = ({ children }: PropsWithChildren) => (
-      <ChannelProvider value={{ ...(channelContext as object), threadList: true } as never}>
-        {children}
-      </ChannelProvider>
-    );
-
-    const { result } = renderHook(() => useNotificationTarget(), { wrapper });
-
-    expect(result.current).toBe('thread');
-  });
-
   it('prioritizes thread over channel', () => {
     const wrapper = ({ children }: PropsWithChildren) => (
       <ChannelProvider value={channelContext}>
-        <ThreadProvider value={{ threadInstance: {} } as never}>{children}</ThreadProvider>
+        <ThreadProvider value={{ thread: {} } as never}>{children}</ThreadProvider>
       </ChannelProvider>
     );
 

package/src/components/Notifications/hooks/useNotificationApi.ts

@@ -16,7 +16,12 @@ import { useNotificationTargetContext } from '../NotificationTargetContext';
 
 export const SYSTEM_NOTIFICATION_TAG = 'system' as const;
 
-/** Returns whether a notification is reserved for system-level consumers instead of snackbars. */
+/**
+ * Returns whether a notification is reserved for system-level consumers instead of snackbars.
+ *
+ * @param notification The notification to test.
+ * @returns True when it carries the system tag.
+ */
 export const hasSystemNotificationTag = (notification: Notification) =>
   notification.tags?.includes(SYSTEM_NOTIFICATION_TAG) ?? false;
 
@@ -35,7 +40,7 @@ export type NotificationIncidentDescriptor = {
 export type AddNotificationOptions = {
   /** Incident metadata used to derive `options.type` when the payload does not provide one. */
   incident?: NotificationIncidentDescriptor;
-  /** Exact host target for this notification. Defaults to the nearest notification target provider. */
+  /** Exact host target for this notification. Defaults to the nearest target provider. */
   target?: NotificationTarget;
   /** Broad panel targets. Use for notifications that should appear in every host of a panel. */
   targetPanels?: NotificationTargetPanel[];
@@ -53,7 +58,7 @@ export type AddSystemNotification = (
   payload: AddNotificationPayload,
   options?: AddSystemNotificationOptions,
 ) => string;
-/** Removes a notification by id. */
+/** Removes a notification by ID. */
 export type RemoveNotification = (id: string) => void;
 /** Removes non-system notifications that belong to the current target provider. */
 export type RemoveNotificationsForCurrentPanel = () => void;
@@ -129,7 +134,11 @@ const mergeNotificationOptions = (
   };
 };
 
-/** Returns imperative helpers for dispatching, targeting and dismissing client notifications. */
+/**
+ * Returns imperative helpers for dispatching, targeting and dismissing client notifications.
+ *
+ * @returns The notification helpers.
+ */
 export const useNotificationApi = (): NotificationApi => {
   const { client } = useChatContext();
   const contextTarget = useNotificationTargetContext();

package/src/components/Notifications/hooks/useNotificationTarget.ts

@@ -27,8 +27,7 @@ export const useNotificationTarget = (): NotificationTargetPanel | undefined =>
   const threadContext = useContext(ThreadContext) as ThreadContextValue;
   const threadsContext = useContext(ThreadsContext) as ThreadsContextValue;
 
-  if (isProvided(channelContext) && channelContext.threadList) return 'thread';
-  if (isProvided(threadContext) && threadContext.threadInstance) return 'thread';
+  if (isProvided(threadContext) && threadContext.thread) return 'thread';
   if (isProvided(channelContext) && channelContext.channel) return 'channel';
   if (isProvided(threadsContext)) return 'thread-list';
   if (isProvided(channelsContext)) return 'channel-list';

package/src/components/Notifications/hooks/useNotifications.ts

@@ -17,7 +17,14 @@ export type UseNotificationsOptions = {
   target?: NotificationTarget;
 };
 
-/** Subscribes to the client notification store and returns matching non-system notifications. */
+/**
+ * Subscribes to the client notification store and returns matching non-system notifications.
+ *
+ * @param options.filter Additional filter applied after optional target filtering.
+ * @param options.requireTarget When true, returns an empty list unless `target` is provided.
+ * @param options.target Exact target used to select notifications for one host.
+ * @returns The matching notifications.
+ */
 export const useNotifications = (options?: UseNotificationsOptions): Notification[] => {
   const { client } = useChatContext();
   const selector = useCallback(

package/src/components/Notifications/hooks/useSystemNotifications.ts

@@ -14,7 +14,12 @@ export type UseSystemNotificationsOptions = {
   filter?: UseSystemNotificationsFilter;
 };
 
-/** Subscribes to notifications tagged as system notifications. */
+/**
+ * Subscribes to notifications tagged as system notifications.
+ *
+ * @param options.filter Additional filter applied to system-tagged notifications.
+ * @returns The matching notifications.
+ */
 export const useSystemNotifications = (options?: UseSystemNotificationsOptions): Notification[] => {
   const { client } = useChatContext();
   const selector = useCallback(

package/src/components/Notifications/notificationFilters.ts

@@ -4,23 +4,21 @@ import type { NotificationListFilter } from './NotificationList';
 
 const ATTACHMENT_UPLOAD_FAILED_TYPE = 'api:attachment:upload:failed';
 
-/**
- * A cancelled upload surfaces as an `api:attachment:upload:failed` notification
- * whose original error is an `AbortError` (fetch) or `CanceledError` (axios).
- * This is what happens when the user removes an attachment before its upload
- * has finished - the inflight request is aborted, not genuinely failed.
- */
+// Removing an attachment before its upload finishes aborts the request. That surfaces as an
+// `api:attachment:upload:failed` notification whose original error is an `AbortError` (fetch) or
+// `CanceledError` (axios).
 const isCanceledAttachmentUpload = (notification: Notification) =>
   notification.type === ATTACHMENT_UPLOAD_FAILED_TYPE &&
   (notification.originalError?.name === 'CanceledError' ||
     notification.originalError?.name === 'AbortError');
 
 /**
- * Notification list filter that keeps every notification except the spurious
- * "upload failed" one produced when a user removes an attachment mid-upload
- * (a filter returns `true` to keep a notification). Genuine upload failures
- * (network, server) are kept because their error is neither aborted nor
- * cancelled.
+ * Notification list filter that hides the "upload failed" notification produced when a user removes
+ * an attachment mid-upload. Genuine upload failures (network, server) stay, as their error is
+ * neither an abort nor a cancellation.
+ *
+ * @param notification The notification to test.
+ * @returns `false` for a canceled upload, `true` otherwise.
  */
 export const excludeCanceledUploadNotifications: NotificationListFilter = (notification) =>
   !isCanceledAttachmentUpload(notification);