refactor: remove isCurrentUser from member item props

Author: szuperaz

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

@@ -7,6 +7,7 @@ import type { Channel, ChannelMemberResponse } from 'stream-chat';
 
 import { ThemeProvider } from '../../../../contexts';
 import { ChannelDetailsContextProvider } from '../../../../contexts/channelDetailsContext/channelDetailsContext';
+import { ChatContext } from '../../../../contexts/chatContext/ChatContext';
 import { defaultTheme } from '../../../../contexts/themeContext/utils/theme';
 import { TranslationProvider } from '../../../../contexts/translationContext/TranslationContext';
 import { generateMember } from '../../../../mock-builders/generator/member';
@@ -34,10 +35,12 @@ const defaultChannel = {
 
 const renderRow = ({
   channel = defaultChannel,
+  currentUserId,
   getMemberRoleLabel,
   ...props
 }: React.ComponentProps<typeof ChannelMemberItem> & {
   channel?: Channel;
+  currentUserId?: string;
   getMemberRoleLabel?: GetMemberRoleLabel;
 }) =>
   render(
@@ -54,9 +57,11 @@ const renderRow = ({
           userLanguage: 'en',
         }}
       >
-        <ChannelDetailsContextProvider value={{ channel, getMemberRoleLabel }}>
-          <ChannelMemberItem {...props} />
-        </ChannelDetailsContextProvider>
+        <ChatContext.Provider value={{ client: { userID: currentUserId } } as never}>
+          <ChannelDetailsContextProvider value={{ channel, getMemberRoleLabel }}>
+            <ChannelMemberItem {...props} />
+          </ChannelDetailsContextProvider>
+        </ChatContext.Provider>
       </TranslationProvider>
     </ThemeProvider>,
   );
@@ -73,7 +78,7 @@ describe('ChannelMemberItem accessibility', () => {
   });
 
   it('uses "You" when the row represents the current user', () => {
-    renderRow({ isCurrentUser: true, member: memberFor() });
+    renderRow({ currentUserId: 'alice', member: memberFor() });
     expect(screen.getByLabelText('You, Offline')).toBeTruthy();
   });
 

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

@@ -167,24 +167,6 @@ describe('ChannelMemberList', () => {
     expect(props?.keyExtractor?.(alice, 0)).toBe('alice');
   });
 
-  it('renders each item with the isCurrentUser flag derived from the chat client', () => {
-    const alice = generateMember({ user: generateUser({ id: 'alice', name: 'Alice' }) });
-    const bob = generateMember({ user: generateUser({ id: 'bob', name: 'Bob' }) });
-    mockHook({ results: [alice, bob] });
-
-    renderList({ currentUserId: 'alice' });
-
-    const { data, renderItem } = latestListProps() ?? {};
-    (data as ChannelMemberResponse[]).forEach((member, index) =>
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      render((renderItem as any)({ index, item: member, separators: {} as never })),
-    );
-
-    const byId = Object.fromEntries(itemProbeCalls.map((p) => [p.member.user?.id, p]));
-    expect(byId.alice.isCurrentUser).toBe(true);
-    expect(byId.bob.isCurrentUser).toBe(false);
-  });
-
   it('wires onEndReached to loadMore (with threshold) only when there is more to load', () => {
     const loadMore = jest.fn();
     mockHook({ hasMore: true, loadMore, results: [] });

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

@@ -7,7 +7,6 @@ import { ChannelAddMembersModal } from './members/ChannelAddMembersModal';
 import { ChannelAllMembersModal } from './members/ChannelAllMembersModal';
 
 import { useChannelDetailsContext } from '../../../contexts/channelDetailsContext/channelDetailsContext';
-import { useChatContext } from '../../../contexts/chatContext/ChatContext';
 import { useComponentsContext } from '../../../contexts/componentsContext/ComponentsContext';
 import { useTheme } from '../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../contexts/translationContext/TranslationContext';
@@ -20,7 +19,6 @@ import { useChannelDetailsMembersPreview } from '../hooks/useChannelDetailsMembe
 export const ChannelDetailsMemberSection = () => {
   const { channel, onAddMembersPress, onMemberPress, onViewAllMembersPress } =
     useChannelDetailsContext();
-  const { client } = useChatContext();
   const { t } = useTranslationContext();
   const ownCapabilities = useChannelOwnCapabilities(channel);
   const updateChannelMembers = ownCapabilities?.includes('update-channel-members') ?? false;
@@ -115,7 +113,6 @@ export const ChannelDetailsMemberSection = () => {
           if (!member.user?.id) return null;
           return (
             <ChannelMemberItem
-              isCurrentUser={member.user.id === client.userID}
               isMuted={mutedMemberIds.has(member.user.id)}
               key={member.user.id}
               member={member}

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

@@ -4,6 +4,7 @@ import { I18nManager, Pressable, StyleSheet, Text, View } from 'react-native';
 import type { ChannelMemberResponse } from 'stream-chat';
 
 import { composeAccessibilityLabel } from '../../../../a11y/a11yUtils';
+import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
 import { useTheme } from '../../../../contexts/themeContext/ThemeContext';
 import { useTranslationContext } from '../../../../contexts/translationContext/TranslationContext';
 import { Mute } from '../../../../icons';
@@ -16,7 +17,6 @@ export type ChannelMemberItemSize = 'sm' | 'lg';
 
 export type ChannelMemberItemProps = {
   member: ChannelMemberResponse;
-  isCurrentUser?: boolean;
   /**
    * Whether the current user has muted this member. Compute once at the list level
    * (see `useMutedMemberIds`) and pass it down — when `true` a muted
@@ -35,14 +35,14 @@ export type ChannelMemberItemProps = {
 };
 
 const ChannelMemberItemInner = ({
-  isCurrentUser,
   isMuted,
   member,
   onPress,
   size = 'sm',
   testID,
 }: ChannelMemberItemProps) => {
   const { t } = useTranslationContext();
+  const { client } = useChatContext();
   const {
     theme: {
       channelDetailsScreen: {
@@ -64,6 +64,7 @@ const ChannelMemberItemInner = ({
   if (!user) return null;
 
   const isLarge = size === 'lg';
+  const isCurrentUser = !!client?.userID && user.id === client.userID;
   const displayName = isCurrentUser ? t('You') : (user.name ?? user.id);
   const accessibilityLabel = composeAccessibilityLabel(
     displayName,
@@ -154,7 +155,6 @@ const ChannelMemberItemInner = ({
 };
 
 const areEqual = (prev: ChannelMemberItemProps, next: ChannelMemberItemProps) => {
-  if (prev.isCurrentUser !== next.isCurrentUser) return false;
   if (prev.isMuted !== next.isMuted) return false;
   if (prev.onPress !== next.onPress) return false;
   if (prev.size !== next.size) return false;

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

@@ -6,7 +6,6 @@ import type { ChannelMemberResponse } from 'stream-chat';
 import { MemberListLoadingSkeleton } from './MemberListLoadingSkeleton';
 
 import { useChannelDetailsContext } from '../../../../contexts/channelDetailsContext/channelDetailsContext';
-import { useChatContext } from '../../../../contexts/chatContext/ChatContext';
 import { useComponentsContext } from '../../../../contexts/componentsContext/ComponentsContext';
 import { useMutedMemberIds } from '../../../../hooks/useMutedMemberIds';
 import { useChannelAllMembers } from '../../hooks/members/useChannelAllMembers';
@@ -28,7 +27,6 @@ export type ChannelMemberListProps = {
  */
 export const ChannelMemberList = ({ additionalFlatListProps }: ChannelMemberListProps = {}) => {
   const { channel, onMemberPress } = useChannelDetailsContext();
-  const { client } = useChatContext();
   const { ChannelMemberActionsSheet, ChannelMemberItem } = useComponentsContext();
   const { hasMore, loading, loadingMore, loadMore, results } = useChannelAllMembers({ channel });
   const mutedMemberIds = useMutedMemberIds(channel);
@@ -50,13 +48,12 @@ export const ChannelMemberList = ({ additionalFlatListProps }: ChannelMemberList
   const renderItem = useCallback(
     ({ item }: { item: ChannelMemberResponse }) => (
       <ChannelMemberItem
-        isCurrentUser={item.user?.id === client.userID}
         isMuted={mutedMemberIds.has(item.user?.id ?? '')}
         member={item}
         onPress={() => handleMemberPress(item)}
       />
     ),
-    [ChannelMemberItem, client.userID, handleMemberPress, mutedMemberIds],
+    [ChannelMemberItem, handleMemberPress, mutedMemberIds],
   );
 
   const ListFooterComponent = useMemo(