fix: add error notification when loading members fails

Author: szuperaz

package/src/components/ChannelDetailsScreen/__tests__/members/useChannelAllMembers.test.tsx

@@ -1,10 +1,28 @@
+import React from 'react';
+
 import { act, renderHook, waitFor } from '@testing-library/react-native';
 import type { Channel, ChannelMemberResponse } from 'stream-chat';
 
+import { TranslationProvider } from '../../../../contexts/translationContext/TranslationContext';
 import { generateMember } from '../../../../mock-builders/generator/member';
 import { generateUser } from '../../../../mock-builders/generator/user';
+import { useNotificationApi } from '../../../Notifications/hooks/useNotificationApi';
 import { useChannelAllMembers } from '../../hooks/members/useChannelAllMembers';
 
+jest.mock('../../../Notifications/hooks/useNotificationApi', () => ({
+  useNotificationApi: jest.fn(() => ({ addNotification: jest.fn() })),
+}));
+
+const t = ((key: string) => key) as never;
+
+const translationWrapper = ({ children }: { children: React.ReactNode }) => (
+  <TranslationProvider
+    value={{ t, tDateTimeParser: ((input: unknown) => input) as never, userLanguage: 'en' }}
+  >
+    {children}
+  </TranslationProvider>
+);
+
 type QueryMembersMock = jest.Mock<
   Promise<{ members: ChannelMemberResponse[] }>,
   [unknown, unknown, unknown]
@@ -37,14 +55,11 @@ const buildMembers = (count: number, prefix = 'u') =>
   );
 
 describe('useChannelAllMembers', () => {
-  let warnSpy: jest.SpyInstance;
+  let addNotification: jest.Mock;
 
   beforeEach(() => {
-    warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => undefined);
-  });
-
-  afterEach(() => {
-    warnSpy.mockRestore();
+    addNotification = jest.fn();
+    (useNotificationApi as jest.Mock).mockReturnValue({ addNotification });
   });
 
   describe('local mode', () => {
@@ -192,21 +207,27 @@ describe('useChannelAllMembers', () => {
       await waitFor(() => expect(result.current.loading).toBe(false));
     });
 
-    it('recovers from a queryMembers rejection', async () => {
+    it('recovers from a queryMembers rejection and notifies the user', async () => {
       const queryMembers: QueryMembersMock = jest.fn().mockRejectedValue(new Error('boom'));
       const channel = buildChannel({
         memberCount: 200,
         members: buildMembers(25, 'loaded'),
         queryMembers,
       });
 
-      const { result } = renderHook(() => useChannelAllMembers({ channel }));
+      const { result } = renderHook(() => useChannelAllMembers({ channel }), {
+        wrapper: translationWrapper,
+      });
 
       await waitFor(() => expect(result.current.loading).toBe(false));
       expect(result.current.results).toEqual([]);
-      expect(warnSpy).toHaveBeenCalledWith(
-        '[useChannelAllMembers] queryMembers failed',
-        expect.any(Error),
+      expect(addNotification).toHaveBeenCalledWith(
+        expect.objectContaining({
+          options: expect.objectContaining({
+            severity: 'error',
+            type: 'api:channel:query-members:failed',
+          }),
+        }),
       );
     });
   });

package/src/components/ChannelDetailsScreen/components/members/ChannelAllMembersModal.tsx

@@ -6,6 +6,8 @@ import { useTranslationContext } from '../../../../contexts/translationContext/T
 import { useChannelMemberCount } from '../../../../hooks';
 import { useChannelOwnCapabilities } from '../../../../hooks/useChannelOwnCapabilities';
 import { UserAdd } from '../../../../icons/user-add';
+import { NotificationList } from '../../../Notifications/NotificationList';
+import { NotificationTargetProvider } from '../../../Notifications/NotificationTargetContext';
 import { Button } from '../../../ui/Button/Button';
 import { ChannelDetailsModal } from '../modal/Modal';
 import { ModalHeader } from '../modal/ModalHeader';
@@ -50,6 +52,7 @@ const ChannelAllMembersModalContent = ({
         title={t('{{count}} members', { count: total })}
       />
       <ChannelMemberList />
+      <NotificationList />
     </>
   );
 };
@@ -61,11 +64,20 @@ export const ChannelAllMembersModal = ({
   onAddMembersPress,
   onClose,
   visible,
-}: ChannelAllMembersModalProps) => (
+}: ChannelAllMembersModalProps) => {
+  const { channel } = useChannelDetailsContext();
+  const notificationHostId = channel?.cid ? `channel-member-list:${channel.cid}` : undefined;
+
   // The content lives in a child component so its hooks (member-state subscription,
   // member preview sort) only run while the modal is open. React Native's `Modal`
   // renders `null` when `visible` is false, so the child never mounts until then.
-  <ChannelDetailsModal onClose={onClose} visible={visible}>
-    <ChannelAllMembersModalContent onAddMembersPress={onAddMembersPress} onClose={onClose} />
-  </ChannelDetailsModal>
-);
+  return (
+    <ChannelDetailsModal onClose={onClose} visible={visible}>
+      {notificationHostId ? (
+        <NotificationTargetProvider hostId={notificationHostId} panel='channel-details'>
+          <ChannelAllMembersModalContent onAddMembersPress={onAddMembersPress} onClose={onClose} />
+        </NotificationTargetProvider>
+      ) : null}
+    </ChannelDetailsModal>
+  );
+};

package/src/components/ChannelDetailsScreen/hooks/members/useChannelAllMembers.ts

@@ -2,7 +2,10 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import type { Channel, ChannelMemberResponse, MemberFilters, MemberSort } from 'stream-chat';
 
+import { useTranslationContext } from '../../../../contexts';
+import { getNotificationErrorOptions } from '../../../../hooks/actions/useChannelActions';
 import { useChannelMembersState } from '../../../ChannelList/hooks/useChannelMembersState';
+import { useNotificationApi } from '../../../Notifications/hooks/useNotificationApi';
 
 const PAGE_SIZE = 25;
 
@@ -23,6 +26,8 @@ export const useChannelAllMembers = ({
 }: {
   channel: Channel;
 }): UseChannelAllMembersResult => {
+  const { addNotification } = useNotificationApi();
+  const { t } = useTranslationContext();
   const localMembers = useChannelMembersState(channel);
 
   // Mode is decided once on mount (per channel). If member_count is unknown or matches
@@ -75,15 +80,23 @@ export const useChannelAllMembers = ({
         }
       } catch (err) {
         if (requestId !== requestIdRef.current) return;
-        console.warn('[useChannelAllMembers] queryMembers failed', err);
+        addNotification({
+          message: t('Failed to load members'),
+          options: {
+            ...getNotificationErrorOptions(err),
+            severity: 'error',
+            type: 'api:channel:query-members:failed',
+          },
+          origin: { context: { channel }, emitter: 'ChannelAllMembers' },
+        });
       } finally {
         if (requestId === requestIdRef.current) {
           inFlightRef.current = false;
           setLoading(false);
         }
       }
     },
-    [channel],
+    [addNotification, channel, t],
   );
 
   const fetchPageRef = useRef(fetchPage);

package/src/i18n/ar.json

@@ -409,5 +409,6 @@
   "a11y/Double tap and hold to activate contextual menu": "انقر نقرًا مزدوجًا مع الاستمرار لتفعيل قائمة السياق",
   "a11y/Swipe right to go through different actions": "اسحب لليمين للتنقل بين الإجراءات المختلفة",
   "a11y/Bottom sheet opened. Activate the close action or use the escape gesture to dismiss.": "Bottom sheet opened. Activate the close action or use the escape gesture to dismiss.",
-  "Muted": "مكتوم"
+  "Muted": "مكتوم",
+  "Failed to load members": "فشل تحميل الأعضاء"
 }

package/src/i18n/en.json

@@ -379,6 +379,7 @@
   "Failed to block user": "Failed to block user",
   "Failed to delete channel": "Failed to delete channel",
   "Failed to leave channel": "Failed to leave channel",
+  "Failed to load members": "Failed to load members",
   "Failed to load users": "Failed to load users",
   "Failed to play the recording": "Failed to play the recording",
   "Failed to update channel archive status": "Failed to update channel archive status",

package/src/i18n/es.json

@@ -409,5 +409,6 @@
   "a11y/Double tap and hold to activate contextual menu": "Toca dos veces y mantén pulsado para activar el menú contextual",
   "a11y/Swipe right to go through different actions": "Desliza a la derecha para recorrer las diferentes acciones",
   "a11y/Bottom sheet opened. Activate the close action or use the escape gesture to dismiss.": "Bottom sheet opened. Activate the close action or use the escape gesture to dismiss.",
-  "Muted": "Silenciado"
+  "Muted": "Silenciado",
+  "Failed to load members": "No se pudieron cargar los miembros"
 }

package/src/i18n/fr.json

@@ -409,5 +409,6 @@
   "a11y/Double tap and hold to activate contextual menu": "Appuyez deux fois et maintenez pour activer le menu contextuel",
   "a11y/Swipe right to go through different actions": "Glissez vers la droite pour parcourir les différentes actions",
   "a11y/Bottom sheet opened. Activate the close action or use the escape gesture to dismiss.": "Bottom sheet opened. Activate the close action or use the escape gesture to dismiss.",
-  "Muted": "En sourdine"
+  "Muted": "En sourdine",
+  "Failed to load members": "Échec du chargement des membres"
 }

package/src/i18n/he.json

@@ -409,5 +409,6 @@
   "a11y/Double tap and hold to activate contextual menu": "הקש פעמיים והחזק כדי להפעיל את התפריט ההקשרי",
   "a11y/Swipe right to go through different actions": "החלק ימינה כדי לעבור בין הפעולות השונות",
   "a11y/Bottom sheet opened. Activate the close action or use the escape gesture to dismiss.": "Bottom sheet opened. Activate the close action or use the escape gesture to dismiss.",
-  "Muted": "מושתק"
+  "Muted": "מושתק",
+  "Failed to load members": "טעינת החברים נכשלה"
 }

package/src/i18n/hi.json

@@ -409,5 +409,6 @@
   "a11y/Double tap and hold to activate contextual menu": "संदर्भ मेनू सक्रिय करने के लिए दो बार टैप करें और होल्ड करें",
   "a11y/Swipe right to go through different actions": "विभिन्न क्रियाओं के बीच जाने के लिए दाएं स्वाइप करें",
   "a11y/Bottom sheet opened. Activate the close action or use the escape gesture to dismiss.": "Bottom sheet opened. Activate the close action or use the escape gesture to dismiss.",
-  "Muted": "म्यूट किया गया"
+  "Muted": "म्यूट किया गया",
+  "Failed to load members": "सदस्यों को लोड करने में विफल"
 }

package/src/i18n/it.json

@@ -409,5 +409,6 @@
   "a11y/Double tap and hold to activate contextual menu": "Tocca due volte e tieni premuto per attivare il menu contestuale",
   "a11y/Swipe right to go through different actions": "Scorri a destra per passare in rassegna le diverse azioni",
   "a11y/Bottom sheet opened. Activate the close action or use the escape gesture to dismiss.": "Bottom sheet opened. Activate the close action or use the escape gesture to dismiss.",
-  "Muted": "Silenziato"
+  "Muted": "Silenziato",
+  "Failed to load members": "Impossibile caricare i membri"
 }