feat: review fixes

Author: szuperaz

package/src/components/ChannelDetailsScreen/__tests__/ChannelDetailsMemberSection.test.tsx

@@ -252,7 +252,7 @@ describe('ChannelDetailsMemberSection', () => {
       .reverse()
       .find((call) => call.member.user?.id === 'u-0');
     act(() => {
-      lastCallForFirstMember?.onPress?.();
+      lastCallForFirstMember?.onPress?.(lastCallForFirstMember.member);
     });
 
     expect(screen.getByTestId('member-actions-sheet-probe')).toBeTruthy();
@@ -271,7 +271,7 @@ describe('ChannelDetailsMemberSection', () => {
       .reverse()
       .find((call) => call.member.user?.id === 'u-1');
     act(() => {
-      lastCallForSecondMember?.onPress?.();
+      lastCallForSecondMember?.onPress?.(lastCallForSecondMember.member);
     });
 
     expect(onMemberPress).toHaveBeenCalledTimes(1);

package/src/components/ChannelDetailsScreen/__tests__/ChannelDetailsProfile.test.tsx

@@ -1,16 +1,14 @@
 import React from 'react';
 
 import { render, screen } from '@testing-library/react-native';
-import type { Channel, ChannelMemberResponse } from 'stream-chat';
+import type { Channel } from 'stream-chat';
 
 import { ChannelDetailsContextProvider } from '../../../contexts/channelDetailsContext/channelDetailsContext';
 import { ChatProvider } from '../../../contexts/chatContext/ChatContext';
 import { ThemeProvider } from '../../../contexts/themeContext/ThemeContext';
 import { defaultTheme } from '../../../contexts/themeContext/utils/theme';
 import { TranslationProvider } from '../../../contexts/translationContext/TranslationContext';
 import * as useChannelMuteActiveModule from '../../../hooks/useChannelMuteActive';
-import * as useIsDirectChatModule from '../../../hooks/useIsDirectChat';
-import * as useChannelMembersStateModule from '../../ChannelList/hooks/useChannelMembersState';
 import * as useChannelPreviewDisplayNameModule from '../../ChannelPreview/hooks/useChannelPreviewDisplayName';
 import { ChannelDetailsProfile } from '../components/ChannelDetailsProfile';
 import * as useChannelDetailsMemberStatusTextModule from '../hooks/useChannelDetailsMemberStatusText';
@@ -28,13 +26,6 @@ jest.mock('../../ui/Avatar/ChannelAvatar', () => {
 });
 
 const OWN_USER_ID = 'own-user';
-const OTHER_USER_ID = 'other-user';
-
-const buildMember = (id: string, online = false): ChannelMemberResponse =>
-  ({
-    user: { id, online },
-    user_id: id,
-  }) as unknown as ChannelMemberResponse;
 
 const buildChannel = () =>
   ({
@@ -64,20 +55,12 @@ const renderProfile = ({ channel = buildChannel() }: { channel?: Channel } = {})
   );
 
 describe('ChannelDetailsProfile', () => {
-  let useIsDirectChatSpy: jest.SpyInstance;
-  let useChannelMembersStateSpy: jest.SpyInstance;
   let useChannelPreviewDisplayNameSpy: jest.SpyInstance;
   let useChannelDetailsMemberStatusTextSpy: jest.SpyInstance;
   let useChannelMuteActiveSpy: jest.SpyInstance;
 
   beforeEach(() => {
     channelAvatarCalls.length = 0;
-    useIsDirectChatSpy = jest
-      .spyOn(useIsDirectChatModule, 'useIsDirectChat')
-      .mockReturnValue(false);
-    useChannelMembersStateSpy = jest
-      .spyOn(useChannelMembersStateModule, 'useChannelMembersState')
-      .mockReturnValue({});
     useChannelPreviewDisplayNameSpy = jest
       .spyOn(useChannelPreviewDisplayNameModule, 'useChannelPreviewDisplayName')
       .mockReturnValue('Display Name');
@@ -121,51 +104,20 @@ describe('ChannelDetailsProfile', () => {
     });
   });
 
-  describe('group chats', () => {
-    beforeEach(() => {
-      useIsDirectChatSpy.mockReturnValue(false);
-    });
-
-    it('renders the group status text as the subtitle', () => {
+  describe('subtitle', () => {
+    it('renders the status text returned by useChannelDetailsMemberStatusText', () => {
       renderProfile();
       expect(screen.getByText('12 members, 3 online')).toBeTruthy();
     });
 
-    it('does not render a subtitle when the group status text is empty', () => {
-      useChannelDetailsMemberStatusTextSpy.mockReturnValue('');
-      renderProfile();
-      expect(screen.queryByText('12 members, 3 online')).toBeNull();
-    });
-  });
-
-  describe('direct chats', () => {
-    beforeEach(() => {
-      useIsDirectChatSpy.mockReturnValue(true);
-    });
-
-    it('renders "Online" when the other member is online', () => {
-      useChannelMembersStateSpy.mockReturnValue({
-        [OWN_USER_ID]: buildMember(OWN_USER_ID, true),
-        [OTHER_USER_ID]: buildMember(OTHER_USER_ID, true),
-      });
+    it('renders a direct-chat status string from the hook', () => {
+      useChannelDetailsMemberStatusTextSpy.mockReturnValue('Online');
       renderProfile();
       expect(screen.getByText('Online')).toBeTruthy();
     });
 
-    it('does not render a subtitle when the other member is offline', () => {
-      useChannelMembersStateSpy.mockReturnValue({
-        [OWN_USER_ID]: buildMember(OWN_USER_ID, true),
-        [OTHER_USER_ID]: buildMember(OTHER_USER_ID, false),
-      });
-      renderProfile();
-      expect(screen.queryByText('Online')).toBeNull();
-    });
-
-    it('ignores the group status text in direct chats', () => {
-      useChannelMembersStateSpy.mockReturnValue({
-        [OWN_USER_ID]: buildMember(OWN_USER_ID, true),
-        [OTHER_USER_ID]: buildMember(OTHER_USER_ID, false),
-      });
+    it('does not render a subtitle when the status text is empty', () => {
+      useChannelDetailsMemberStatusTextSpy.mockReturnValue('');
       renderProfile();
       expect(screen.queryByText('12 members, 3 online')).toBeNull();
     });

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

@@ -221,7 +221,7 @@ describe('ChannelMemberList', () => {
     const captured = itemProbeCalls.find((p) => p.member.user?.id === 'bob');
 
     expect(list.queryByTestId('member-actions-sheet-probe')).toBeNull();
-    act(() => captured?.onPress?.());
+    act(() => captured?.onPress?.(bob));
     expect(list.getByTestId('member-actions-sheet-probe').props.children).toBe('bob');
 
     act(() => sheetProbeCalls[sheetProbeCalls.length - 1]?.onClose?.());
@@ -240,7 +240,7 @@ describe('ChannelMemberList', () => {
     render((renderItem as any)({ index: 0, item: alice, separators: {} as never }));
     const captured = itemProbeCalls.find((p) => p.member.user?.id === 'alice');
 
-    act(() => captured?.onPress?.());
+    act(() => captured?.onPress?.(alice));
 
     expect(onMemberPress).toHaveBeenCalledTimes(1);
     expect(onMemberPress.mock.calls[0][0].user?.id).toBe('alice');

package/src/components/ChannelDetailsScreen/__tests__/useChannelDetailsMemberStatusText.test.tsx

@@ -5,6 +5,7 @@ import type { Channel } from 'stream-chat';
 
 import { TranslationProvider } from '../../../contexts/translationContext/TranslationContext';
 import { useChannelMemberCount } from '../../../hooks/useChannelMemberCount';
+import { useIsDirectChat } from '../../../hooks/useIsDirectChat';
 import { useChannelMembersState } from '../../ChannelList/hooks/useChannelMembersState';
 import { useChannelOnlineMemberCount } from '../../ChannelList/hooks/useChannelOnlineMemberCount';
 import { useChannelDetailsMemberStatusText } from '../hooks/useChannelDetailsMemberStatusText';
@@ -13,6 +14,10 @@ jest.mock('../../../hooks/useChannelMemberCount', () => ({
   useChannelMemberCount: jest.fn(),
 }));
 
+jest.mock('../../../hooks/useIsDirectChat', () => ({
+  useIsDirectChat: jest.fn(() => false),
+}));
+
 jest.mock('../../ChannelList/hooks/useChannelMembersState', () => ({
   useChannelMembersState: jest.fn(() => ({})),
 }));
@@ -28,7 +33,11 @@ const t = ((key: string, options?: Record<string, unknown>) => {
   return key;
 }) as never;
 
-const channel = { cid: 'messaging:test' } as unknown as Channel;
+const OWN_USER_ID = 'own-user';
+const channel = {
+  cid: 'messaging:test',
+  getClient: () => ({ userID: OWN_USER_ID }),
+} as unknown as Channel;
 
 const renderStatusText = () => {
   const wrapper = ({ children }: { children: React.ReactNode }) => (
@@ -54,16 +63,6 @@ describe('useChannelDetailsMemberStatusText', () => {
     expect(result.current).toBe('5 members, 2 online');
   });
 
-  it('falls back to the loaded member map length when the reactive count is missing', () => {
-    (useChannelMemberCount as jest.Mock).mockReturnValue(0);
-    (useChannelOnlineMemberCount as jest.Mock).mockReturnValue(1);
-    (useChannelMembersState as jest.Mock).mockReturnValue({ a: {}, b: {}, c: {} });
-
-    const { result } = renderStatusText();
-
-    expect(result.current).toBe('3 members, 1 online');
-  });
-
   it('recomputes when the online count changes', () => {
     (useChannelMemberCount as jest.Mock).mockReturnValue(4);
     (useChannelOnlineMemberCount as jest.Mock).mockReturnValue(0);
@@ -77,4 +76,42 @@ describe('useChannelDetailsMemberStatusText', () => {
 
     expect(result.current).toBe('4 members, 3 online');
   });
+
+  describe('direct chats', () => {
+    beforeEach(() => {
+      (useIsDirectChat as jest.Mock).mockReturnValue(true);
+    });
+
+    it('returns "Online" when the other member is online', () => {
+      (useChannelMembersState as jest.Mock).mockReturnValue({
+        [OWN_USER_ID]: { user: { id: OWN_USER_ID, online: true } },
+        other: { user: { id: 'other-user', online: true } },
+      });
+
+      const { result } = renderStatusText();
+
+      expect(result.current).toBe('Online');
+    });
+
+    it('returns an empty string when the other member is offline', () => {
+      (useChannelMembersState as jest.Mock).mockReturnValue({
+        [OWN_USER_ID]: { user: { id: OWN_USER_ID, online: true } },
+        other: { user: { id: 'other-user', online: false } },
+      });
+
+      const { result } = renderStatusText();
+
+      expect(result.current).toBe('');
+    });
+
+    it('ignores the current user when resolving the other member', () => {
+      (useChannelMembersState as jest.Mock).mockReturnValue({
+        [OWN_USER_ID]: { user: { id: OWN_USER_ID, online: true } },
+      });
+
+      const { result } = renderStatusText();
+
+      expect(result.current).toBe('');
+    });
+  });
 });

package/src/components/ChannelDetailsScreen/components/ChannelDetailsMemberSection.tsx

@@ -113,11 +113,7 @@ export const ChannelDetailsMemberSection = () => {
         {visible.map((member) => {
           if (!member.user?.id) return null;
           return (
-            <ChannelMemberItem
-              key={member.user.id}
-              member={member}
-              onPress={() => handleMemberPress(member)}
-            />
+            <ChannelMemberItem key={member.user.id} member={member} onPress={handleMemberPress} />
           );
         })}
       </View>

package/src/components/ChannelDetailsScreen/components/ChannelDetailsProfile.tsx

@@ -6,10 +6,8 @@ import { useChannelDetailsContext } from '../../../contexts/channelDetailsContex
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
 import { useChannelMuteActive } from '../../../hooks/useChannelMuteActive';
-import { useIsDirectChat } from '../../../hooks/useIsDirectChat';
 import { Mute } from '../../../icons/mute';
 import { primitives } from '../../../theme';
-import { useChannelMembersState } from '../../ChannelList/hooks/useChannelMembersState';
 import { useChannelPreviewDisplayName } from '../../ChannelPreview/hooks/useChannelPreviewDisplayName';
 import { ChannelAvatar } from '../../ui/Avatar/ChannelAvatar';
 import { useChannelDetailsMemberStatusText } from '../hooks/useChannelDetailsMemberStatusText';
@@ -33,21 +31,11 @@ export const ChannelDetailsProfile = () => {
       semantics,
     },
   } = useTheme();
-  const isDirect = useIsDirectChat(channel);
-  const members = useChannelMembersState(channel);
   const displayName = useChannelPreviewDisplayName(channel);
-  const groupStatusText = useChannelDetailsMemberStatusText(channel);
+  const subtitle = useChannelDetailsMemberStatusText(channel);
   const muted = useChannelMuteActive(channel);
   const styles = useStyles();
 
-  const subtitle = useMemo(() => {
-    if (!isDirect) return groupStatusText;
-    const otherMember = Object.values(members).find(
-      (member) => member.user?.id !== channel.getClient().userID,
-    );
-    return otherMember?.user?.online ? t('Online') : '';
-  }, [channel, groupStatusText, isDirect, members, t]);
-
   return (
     <View style={[styles.container, containerOverride]}>
       <ChannelAvatar channel={channel} showBorder={false} size='2xl' />

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

@@ -4,9 +4,9 @@ import { useChannelDetailsContext } from '../../../../contexts/channelDetailsCon
 import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { useOwnCapabilitiesContext } from '../../../../contexts/ownCapabilitiesContext/OwnCapabilitiesContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
+import { useChannelMemberCount } from '../../../../hooks';
 import { UserAdd } from '../../../../icons/user-add';
 import { Button } from '../../../ui/Button/Button';
-import { useChannelDetailsMembersPreview } from '../../hooks/useChannelDetailsMembersPreview';
 import { ChannelDetailsModal } from '../modal/Modal';
 import { ModalHeader } from '../modal/ModalHeader';
 
@@ -16,22 +16,20 @@ export type ChannelAllMembersModalProps = {
   visible: boolean;
 };
 
-/**
- * @experimental This component is experimental and is subject to change.
- */
-export const ChannelAllMembersModal = ({
+type ChannelAllMembersModalContentProps = Omit<ChannelAllMembersModalProps, 'visible'>;
+
+const ChannelAllMembersModalContent = ({
   onAddMembersPress,
   onClose,
-  visible,
-}: ChannelAllMembersModalProps) => {
+}: ChannelAllMembersModalContentProps) => {
   const { channel } = useChannelDetailsContext();
   const { ChannelMemberList } = useComponentsContext();
   const { t } = useTranslationContext();
   const { updateChannelMembers } = useOwnCapabilitiesContext();
-  const { total } = useChannelDetailsMembersPreview(channel);
+  const total = useChannelMemberCount(channel);
 
   return (
-    <ChannelDetailsModal onClose={onClose} visible={visible}>
+    <>
       <ModalHeader
         onClose={onClose}
         rightAction={
@@ -51,6 +49,22 @@ export const ChannelAllMembersModal = ({
         title={t('{{count}} members', { count: total })}
       />
       <ChannelMemberList />
-    </ChannelDetailsModal>
+    </>
   );
 };
+
+/**
+ * @experimental This component is experimental and is subject to change.
+ */
+export const ChannelAllMembersModal = ({
+  onAddMembersPress,
+  onClose,
+  visible,
+}: ChannelAllMembersModalProps) => (
+  // 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>
+);

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

@@ -18,7 +18,7 @@ export type ChannelMemberItemSize = 'sm' | 'lg';
 
 export type ChannelMemberItemProps = {
   member: ChannelMemberResponse;
-  onPress?: () => void;
+  onPress?: (member: ChannelMemberResponse) => void;
   /**
    * Visual size of the row.
    * - `'sm'` (default) renders the compact list row with a small avatar, regular-weight name, and a trailing role label.
@@ -123,7 +123,7 @@ const ChannelMemberItemInner = ({
       <Pressable
         accessibilityLabel={accessibilityLabel}
         accessibilityRole='button'
-        onPress={onPress}
+        onPress={() => onPress(member)}
         style={({ pressed }) => [
           isLarge ? styles.containerLarge : styles.container,
           pressed ? { backgroundColor: semantics.backgroundUtilityPressed } : null,

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

@@ -46,7 +46,7 @@ export const ChannelMemberList = ({ additionalFlatListProps }: ChannelMemberList
 
   const renderItem = useCallback(
     ({ item }: { item: ChannelMemberResponse }) => (
-      <ChannelMemberItem member={item} onPress={() => handleMemberPress(item)} />
+      <ChannelMemberItem member={item} onPress={handleMemberPress} />
     ),
     [ChannelMemberItem, handleMemberPress],
   );