stream-chat-react-native-core 10.0.0-rc.2 → 10.0.0-rc.4

package/src/components/ChannelDetails/__tests__/ChannelEditDetailsFormContent.test.tsx

@@ -80,7 +80,7 @@ const renderComponent = ({ channel }: { channel: Channel }) => {
       >
         <ChatContext.Provider
           value={
-            { client: { on: () => ({ unsubscribe: () => undefined }), userID: 'me' } } as never
+            { client: { on: () => ({ unsubscribe: () => undefined }), userId: 'me' } } as never
           }
         >
           <ChannelDetailsContextProvider channel={channel}>
@@ -128,7 +128,7 @@ describe('ChannelEditDetailsFormContent', () => {
         >
           <ChatContext.Provider
             value={
-              { client: { on: () => ({ unsubscribe: () => undefined }), userID: 'me' } } as never
+              { client: { on: () => ({ unsubscribe: () => undefined }), userId: 'me' } } as never
             }
           >
             <ChannelDetailsContextProvider channel={buildChannel()}>

package/src/components/ChannelDetails/__tests__/ChannelEditName.test.tsx

@@ -35,7 +35,7 @@ const renderComponent = ({ channel }: { channel: Channel }) => {
       >
         <ChatContext.Provider
           value={
-            { client: { on: () => ({ unsubscribe: () => undefined }), userID: 'me' } } as never
+            { client: { on: () => ({ unsubscribe: () => undefined }), userId: 'me' } } as never
           }
         >
           <ChannelEditDetailsContext.Provider value={{ store, submit: jest.fn() }}>

package/src/components/ChannelDetails/__tests__/members/ChannelAddMembersForm.test.tsx

@@ -102,7 +102,7 @@ const renderForm = ({
           }}
         >
           <ChatContext.Provider
-            value={{ client: { notifications: new NotificationManager(), userID: 'me' } } as never}
+            value={{ client: { notifications: new NotificationManager(), userId: 'me' } } as never}
           >
             <ChannelDetailsContextProvider channel={applyCapabilities(channel, capabilities)}>
               <WithComponents overrides={{ ChannelAddMembersFormContent: AddMembersProbe }}>

package/src/components/ChannelDetails/__tests__/members/ChannelMemberActionsSheet.test.tsx

@@ -76,7 +76,7 @@ const renderSheet = ({
               client: {
                 mutedUsers: [],
                 on: () => ({ unsubscribe: () => undefined }),
-                userID: 'me',
+                userId: 'me',
               },
             } as never
           }
@@ -156,7 +156,7 @@ describe('ChannelMemberActionsSheet', () => {
       <ChatContext.Provider
         value={
           {
-            client: { userID: 'me', mutedUsers: [], on: () => ({ unsubscribe: () => undefined }) },
+            client: { userId: 'me', mutedUsers: [], on: () => ({ unsubscribe: () => undefined }) },
           } as never
         }
       >

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

@@ -75,7 +75,7 @@ const renderRow = ({
                 // `useMutedUsers` reads the mutes reactively off `client.mutedUsersStore`.
                 mutedUsersStore: new StateStore({ mutedUsers }),
                 on: () => ({ unsubscribe: () => undefined }),
-                userID: currentUserId,
+                userId: currentUserId,
               },
             } as never
           }

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

@@ -55,7 +55,7 @@ const t = ((
 const OWN_USER_ID = 'own-user';
 const channel = {
   cid: 'messaging:test',
-  getClient: () => ({ userID: OWN_USER_ID }),
+  getClient: () => ({ userId: OWN_USER_ID }),
 } as unknown as Channel;
 
 const renderStatusText = () => {

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

@@ -60,7 +60,7 @@ export const ChannelMemberItem = ({
   if (!user) return null;
 
   const isLarge = size === 'lg';
-  const isCurrentUser = !!client?.userID && user.id === client.userID;
+  const isCurrentUser = !!client?.userId && user.id === client.userId;
   const displayName = isCurrentUser ? t('common.you.label', 'You') : (user.name ?? user.id);
   const accessibilityLabel = composeAccessibilityLabel(
     displayName,

package/src/components/ChannelDetails/hooks/useChannelDetailsMemberStatusText.ts

@@ -24,7 +24,7 @@ export const useChannelDetailsMemberStatusText = (channel: Channel): string => {
 
   return useMemo(() => {
     if (isDirect) {
-      const ownUserId = channel.getClient().userID;
+      const ownUserId = channel.getClient().userId;
       const otherMember = Object.values(members).find((member) => member.user?.id !== ownUserId);
       return otherMember?.user?.online ? t('common.presence.online.label', 'Online') : '';
     }

package/src/components/ChannelList/ChannelListView.tsx

@@ -36,7 +36,7 @@ export type ChannelListState = {
 
 export type ChannelListViewPropsWithContext = Omit<
   ChannelsContextValue,
-  'maxUnreadCount' | 'numberOfSkeletons' | 'onSelect'
+  'maxUnreadCount' | 'numberOfSkeletons' | 'onSelect' | 'paginator'
 > &
   ChannelListState;
 
@@ -163,7 +163,6 @@ export const ChannelListView = (props: ChannelListViewProps) => {
     additionalFlatListProps,
     loadMoreThreshold,
     loadNextPage,
-    paginator,
     refreshList,
     reloadList,
     setFlatListRef,
@@ -175,7 +174,6 @@ export const ChannelListView = (props: ChannelListViewProps) => {
         additionalFlatListProps,
         loadMoreThreshold,
         loadNextPage,
-        paginator,
         refreshList,
         reloadList,
         setFlatListRef,

package/src/components/ChannelList/__tests__/ChannelList.test.tsx

@@ -1084,6 +1084,50 @@ describe('ChannelList', () => {
       executeQuery.mockRestore();
     });
 
+    it('keeps the footer loading indicator while a next page loads', async () => {
+      useMockedApis(chatClient, [queryChannelsApi([testChannel1])]);
+      const paginator = createPaginator({ paginatorOptions: { pageSize: 1 } });
+      let loadNextPage: (() => Promise<void>) | undefined;
+      const LoadNextPageProbe = () => {
+        loadNextPage = useChannelsContext().loadNextPage;
+        return null;
+      };
+
+      render(
+        <Chat client={chatClient}>
+          <WithComponents overrides={{ ListHeaderComponent: LoadNextPageProbe }}>
+            <ChannelList paginator={paginator} />
+          </WithComponents>
+        </Chat>,
+      );
+      await waitFor(() => expect(paginator.hasMoreTail).toBe(true));
+
+      useMockedApis(chatClient, [queryChannelsApi([testChannel2])]);
+      const nextPage = new DeferredPromise<void>();
+      const queryChannels = chatClient.queryChannels.bind(chatClient);
+      jest.spyOn(chatClient, 'queryChannels').mockImplementation(async (...args) => {
+        await nextPage.promise;
+        return queryChannels(...args);
+      });
+      act(() => {
+        loadNextPage?.();
+      });
+      expect(screen.getByTestId('channel-list-footer-loading-indicator')).toBeTruthy();
+
+      // FlatList asks again when the footer changes the content length
+      await act(async () => {
+        await loadNextPage?.();
+      });
+      expect(screen.getByTestId('channel-list-footer-loading-indicator')).toBeTruthy();
+
+      await act(async () => {
+        nextPage.resolve();
+        await nextPage.promise;
+      });
+      await waitFor(() => expect(paginator.items).toHaveLength(2));
+      expect(screen.queryByTestId('channel-list-footer-loading-indicator')).toBeNull();
+    });
+
     it('shows the channels it already has when it mounts again, without a query', async () => {
       useMockedApis(chatClient, [queryChannelsApi([testChannel1])]);
 
@@ -1110,6 +1154,34 @@ describe('ChannelList', () => {
       expect(querySpy).not.toHaveBeenCalled();
     });
 
+    it('loads the first page when an event put a channel in the list before it was ever queried', async () => {
+      const seededChannel = chatClient.channel(testChannel1.channel.type, testChannel1.channel.id);
+      // What `message.new` / `member.updated` do for a channel matching a list nobody queried yet.
+      chatClient.channelManager.ingestChannel(seededChannel);
+      expect(props.paginator.items?.map((channel) => channel.id)).toEqual([
+        testChannel1.channel.id,
+      ]);
+      expect(props.paginator.isInitialized).toBe(false);
+
+      useMockedApis(chatClient, [queryChannelsApi([testChannel2, testChannel1])]);
+      const querySpy = jest.spyOn(chatClient, 'queryChannels');
+      render(
+        <Chat client={chatClient}>
+          <WithComponents overrides={{ ChannelPreview: ChannelPreviewComponent }}>
+            <ChannelList {...props} />
+          </WithComponents>
+        </Chat>,
+      );
+
+      // The seeded channel does not count as a loaded first page, so the list queries on mount.
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      });
+      expect(querySpy).toHaveBeenCalledTimes(1);
+      await waitFor(() => expect(screen.getByTestId(testChannel2.channel.id)).toBeTruthy());
+      expect(props.paginator.isInitialized).toBe(true);
+    });
+
     it('leaves the paginator registered and loaded when it unmounts', async () => {
       useMockedApis(chatClient, [queryChannelsApi([testChannel1])]);
 

package/src/components/ChannelList/hooks/usePaginatedChannels.ts

@@ -41,7 +41,7 @@ export const usePaginatedChannels = ({ paginator }: { paginator: ChannelPaginato
 
   const queryChannels = useStableCallback(
     async (queryType: QueryType = 'loadChannels'): Promise<void> => {
-      if (!client || !isMountedRef.current) {
+      if (!client || !isMountedRef.current || paginator.isLoading) {
         return;
       }
 
@@ -95,7 +95,7 @@ export const usePaginatedChannels = ({ paginator }: { paginator: ChannelPaginato
   // new paginator, and after `client.disconnectUser` resets it. A paginator that already has
   // channels is shown as is, and a load in flight is left alone.
   const userId = useClientUserId(client);
-  const isUnloaded = channels === undefined;
+  const isUnloaded = channels === undefined || !paginator.isInitialized;
   useEffect(() => {
     if (!isUnloaded || !userId || paginator.isLoading) return;
     reloadList();

package/src/components/ChannelPreview/ChannelDetailsBottomSheet.tsx

@@ -45,7 +45,7 @@ export const ChannelDetailsHeader = ({ channel }: ChannelDetailsHeaderProps) =>
   const isOtherMemberOnline = useMemo(
     () =>
       Object.values(members).some(
-        (member) => member.user?.id !== client.userID && member.user?.online,
+        (member) => member.user?.id !== client.userId && member.user?.online,
       ),
     [client, members],
   );

package/src/components/ChannelPreview/ChannelLastMessagePreview.tsx

@@ -29,7 +29,7 @@ export const ChannelLastMessagePreview = ({ message }: ChannelLastMessagePreview
           width={16}
         />
       ) : null}
-      <Text numberOfLines={1} style={[styles.subtitle]}>
+      <Text numberOfLines={1} style={[styles.subtitle]} testID='channel-preview-message'>
         {messagePreviewTitle}
       </Text>
     </View>

package/src/components/ChannelPreview/ChannelMessagePreviewDeliveryStatus.tsx

@@ -96,7 +96,11 @@ export const ChannelMessagePreviewDeliveryStatus = ({
   }
 
   if (!isLastMessageByCurrentUser) {
-    return <Text style={styles.username}>{message?.user?.name || message?.user?.id}:</Text>;
+    return (
+      <Text style={styles.username} testID='channel-preview-sender'>
+        {message?.user?.name || message?.user?.id}:
+      </Text>
+    );
   }
 
   return (
@@ -122,7 +126,9 @@ export const ChannelMessagePreviewDeliveryStatus = ({
         ) : status === MessageDeliveryStatus.SENT ? (
           <icons.Check stroke={semantics.chatTextTimestamp} height={16} width={16} {...checkIcon} />
         ) : null}
-        <Text style={styles.text}>{t('common.you.label', 'You')}:</Text>
+        <Text style={styles.text} testID='channel-preview-sender'>
+          {t('common.you.label', 'You')}:
+        </Text>
       </View>
     </CompositeAccessibilityProbe>
   );

package/src/components/ChannelPreview/ChannelPreviewTitle.tsx

@@ -19,7 +19,7 @@ export const ChannelPreviewTitle = ({ channel, title }: ChannelPreviewTitleProps
   const displayName = useChannelPreviewDisplayName(channel);
 
   return (
-    <Text numberOfLines={1} style={styles.title}>
+    <Text numberOfLines={1} style={styles.title} testID='channel-preview-title'>
       {title ?? displayName}
     </Text>
   );

package/src/components/ChannelPreview/ChannelPreviewView.tsx

@@ -77,7 +77,7 @@ const ChannelPreviewViewWithContext = (props: ChannelPreviewViewPropsWithContext
   } = useTheme();
   const styles = useStyles();
   const swipeRegistry = useSwipeRegistryContext();
-  const accessibilityHint = useA11yLabel('attachment.gallery.doubleTapToOpen.accessibilityLabel');
+  const accessibilityHint = useA11yLabel('channelPreview.doubleTapToOpen.accessibilityLabel');
 
   const onPress = useStableCallback(() => {
     if (swipeRegistry?.hasOpen()) {

package/src/components/ChannelPreview/__tests__/ChannelPreview.test.tsx

@@ -145,7 +145,7 @@ describe('ChannelPreview', () => {
   describe('notification.mark_read event', () => {
     it("should not update the unread count if the event's cid does not match the channel's cid", async () => {
       channel = await initChannelFromData(chatClient);
-      seedUnread(channel, chatClient.userID as string, 10);
+      seedUnread(channel, chatClient.userId as string, 10);
 
       const { getByTestId } = render(<TestComponent />);
 
@@ -167,7 +167,7 @@ describe('ChannelPreview', () => {
 
     it('should update the unread count to 0', async () => {
       channel = await initChannelFromData(chatClient);
-      seedUnread(channel, chatClient.userID as string, 10);
+      seedUnread(channel, chatClient.userId as string, 10);
 
       const { getByTestId } = render(<TestComponent />);
 
@@ -327,7 +327,7 @@ describe('ChannelPreview', () => {
         muteStatus: { createdAt: null, expiresAt: null, muted: true },
       });
     });
-    seedUnread(channel, chatClient.userID as string, 5);
+    seedUnread(channel, chatClient.userId as string, 5);
 
     const { getByTestId } = render(<TestComponent />);
 
@@ -360,7 +360,7 @@ describe('ChannelPreview', () => {
   it('should update the unread count on "message.new" event', async () => {
     const someOtherUser = generateUser({ id: 'not-me' });
     channel = await initChannelFromData(chatClient);
-    seedUnread(channel, chatClient.userID as string, 0);
+    seedUnread(channel, chatClient.userId as string, 0);
 
     const { getByTestId } = render(<TestComponent />);
 

package/src/components/ChannelPreview/__tests__/ChannelPreviewView.test.tsx

@@ -4,6 +4,8 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react-nativ
 import truncate from 'lodash/truncate';
 import type { Channel as ChannelType, StreamChat } from 'stream-chat';
 
+import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
+import type { TranslationDictionary } from '../../../i18n/types';
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
 import { useMockedApis } from '../../../mock-builders/api/useMockedApis';
 import { generateChannelResponse } from '../../../mock-builders/generator/channel';
@@ -11,6 +13,7 @@ import { generateMember } from '../../../mock-builders/generator/member';
 import { generateMessage } from '../../../mock-builders/generator/message';
 import { generateUser } from '../../../mock-builders/generator/user';
 import { getTestClientWithUser } from '../../../mock-builders/mock';
+import { Streami18n } from '../../../utils/i18n/Streami18n';
 import { Chat } from '../../Chat/Chat';
 import { ChannelPreviewView } from '../ChannelPreviewView';
 
@@ -56,6 +59,43 @@ describe('ChannelPreviewView', () => {
     });
   });
 
+  it("takes its accessibility hint from its own key, not the gallery's", async () => {
+    await initializeChannel(generateChannelResponse());
+    const i18nInstance = new Streami18n({ logger: () => {} });
+    i18nInstance.registerTranslation('en', {
+      'attachment.gallery.doubleTapToOpen.accessibilityLabel': 'Double tap to view the photo',
+    } as TranslationDictionary);
+
+    const { rerender } = render(
+      <OverlayProvider accessibility={{ enabled: true }}>
+        <Chat client={chatClient} i18nInstance={i18nInstance}>
+          <ChannelPreviewView channel={channel as ChannelType} onSelect={jest.fn()} />
+        </Chat>
+      </OverlayProvider>,
+    );
+    await waitFor(() =>
+      expect(screen.getByTestId('channel-preview-button').props.accessibilityHint).toBe(
+        'Double tap to open',
+      ),
+    );
+
+    i18nInstance.registerTranslation('en', {
+      'channelPreview.doubleTapToOpen.accessibilityLabel': 'Double tap to open the channel',
+    } as TranslationDictionary);
+    rerender(
+      <OverlayProvider accessibility={{ enabled: true }}>
+        <Chat client={chatClient} i18nInstance={i18nInstance}>
+          <ChannelPreviewView channel={channel as ChannelType} onSelect={jest.fn()} />
+        </Chat>
+      </OverlayProvider>,
+    );
+    await waitFor(() =>
+      expect(screen.getByTestId('channel-preview-button').props.accessibilityHint).toBe(
+        'Double tap to open the channel',
+      ),
+    );
+  });
+
   it('should render name of channel', async () => {
     const channelName = Date.now().toString();
     await initializeChannel(

package/src/components/ChannelPreview/hooks/__tests__/useChannelPreviewData.test.tsx

@@ -0,0 +1,51 @@
+import { StateStore } from '@stream-io/state-store';
+import { act, renderHook } from '@testing-library/react-native';
+import { Channel, ChannelMemberResponse, StreamChat } from 'stream-chat';
+
+import { convertDateToTimestamp } from '../../../../mock-builders/generator/time';
+import { useChannelPreviewData } from '../useChannelPreviewData';
+
+describe('useChannelPreviewData', () => {
+  const buildMockChannel = (membership: Record<string, unknown>) =>
+    ({
+      messageComposer: { registerDraftEventSubscriptions: () => () => undefined },
+      messagePaginator: { aggregateState: new StateStore({ latestMessage: null }) },
+      state: new StateStore({ membership, muteStatus: { muted: false }, read: {} }),
+    }) as unknown as Channel;
+  const client = { userId: 'me' } as unknown as StreamChat;
+
+  it('does not re-render when re-hydration replaces membership with an equal copy', () => {
+    const channel = buildMockChannel({ pinned_at: null, user_id: 'me' });
+    let renders = 0;
+    const { result } = renderHook(() => {
+      renders++;
+      return useChannelPreviewData(channel, client);
+    });
+    const rendersBefore = renders;
+
+    act(() => {
+      channel.state.partialNext({
+        membership: { pinned_at: null, user_id: 'me' } as unknown as ChannelMemberResponse,
+      });
+    });
+
+    expect(renders).toBe(rendersBefore);
+    expect(result.current.pinned).toBe(false);
+  });
+
+  it('updates when the channel is pinned', () => {
+    const channel = buildMockChannel({ pinned_at: null, user_id: 'me' });
+    const { result } = renderHook(() => useChannelPreviewData(channel, client));
+
+    act(() => {
+      channel.state.partialNext({
+        membership: {
+          pinned_at: convertDateToTimestamp('2026-06-15T08:00:00.000Z'),
+          user_id: 'me',
+        } as unknown as ChannelMemberResponse,
+      });
+    });
+
+    expect(result.current.pinned).toBe(true);
+  });
+});

package/src/components/ChannelPreview/hooks/__tests__/useChannelPreviewDisplayName.test.tsx

@@ -24,7 +24,7 @@ describe('useChannelPreviewDisplayName', () => {
     jest
       .spyOn(ChatContext, 'useChatContext')
       .mockImplementation(
-        () => ({ client: { userID: OWN_USER_ID } }) as unknown as ChatContextValue,
+        () => ({ client: { userId: OWN_USER_ID } }) as unknown as ChatContextValue,
       );
     jest.spyOn(useChannelNameModule, 'useChannelName').mockReturnValue(undefined);
   });

package/src/components/ChannelPreview/hooks/__tests__/useChannelPreviewDisplayPresence.test.tsx

@@ -18,7 +18,7 @@ describe('useChannelPreviewDisplayPresence', () => {
     jest.clearAllMocks();
     chatClient = await getTestClientWithUser({
       id: currentUserId,
-      userID: currentUserId,
+      userId: currentUserId,
     } as unknown as Parameters<typeof getTestClientWithUser>[0]);
 
     // Create mock channel

package/src/components/ChannelPreview/hooks/__tests__/useChannelPreviewPollLabel.test.tsx

@@ -0,0 +1,87 @@
+import React, { PropsWithChildren } from 'react';
+
+import { act, renderHook } from '@testing-library/react-native';
+import { Poll, PollResponseData, PollVoteResponseData, StreamChat } from 'stream-chat';
+
+import { ChatProvider } from '../../../../contexts/chatContext/ChatContext';
+import { useChannelPreviewPollLabel } from '../useChannelPreviewPollLabel';
+
+const OWN_USER = { id: 'own-user' };
+const MESSAGE_ID = 'message-id';
+const POLL_ID = 'poll-id';
+
+const generateVote = (id: string, optionId: string, createdAt: string) =>
+  ({
+    created_at: new Date(createdAt).getTime(),
+    id,
+    option_id: optionId,
+    poll_id: POLL_ID,
+    updated_at: new Date(createdAt).getTime(),
+    user: OWN_USER,
+    user_id: OWN_USER.id,
+  }) as unknown as PollVoteResponseData;
+
+const setup = (ownVotes: PollVoteResponseData[]) => {
+  const client = {
+    deletePollVote: jest.fn(() => new Promise(() => {})),
+    user: OWN_USER,
+    userID: OWN_USER.id,
+  } as unknown as StreamChat;
+  const latestVotesByOption: Record<string, PollVoteResponseData[]> = {};
+  const voteCountsByOption: Record<string, number> = {};
+  ownVotes.forEach((vote) => {
+    latestVotesByOption[vote.option_id as string] = [vote];
+    voteCountsByOption[vote.option_id as string] = 1;
+  });
+  const poll = new Poll({
+    client,
+    poll: {
+      enforce_unique_vote: false,
+      id: POLL_ID,
+      latest_answers: [],
+      latest_votes_by_option: latestVotesByOption,
+      name: 'Poll',
+      options: [
+        { id: 'option-a', text: 'A' },
+        { id: 'option-b', text: 'B' },
+      ],
+      own_votes: ownVotes,
+      vote_count: ownVotes.length,
+      vote_counts_by_option: voteCountsByOption,
+    } as unknown as PollResponseData,
+  });
+  (client as unknown as { polls: unknown }).polls = { fromState: () => poll };
+
+  const wrapper = ({ children }: PropsWithChildren) => (
+    <ChatProvider value={{ client } as never}>{children}</ChatProvider>
+  );
+  const hook = renderHook(() => useChannelPreviewPollLabel({ pollId: POLL_ID }), { wrapper });
+  return { ...hook, poll };
+};
+
+describe('useChannelPreviewPollLabel', () => {
+  it('returns no label once the only vote is removed', () => {
+    const vote = generateVote('vote-a', 'option-a', '2026-10-27T10:00:00.000Z');
+    const { poll, result } = setup([vote]);
+    expect(result.current).toBe('You voted: A');
+
+    act(() => {
+      poll.removeVote(vote.id, MESSAGE_ID);
+    });
+
+    expect(result.current).toBeUndefined();
+  });
+
+  it('labels the remaining latest vote once another option loses its only vote', () => {
+    const voteA = generateVote('vote-a', 'option-a', '2026-10-27T10:00:00.000Z');
+    const voteB = generateVote('vote-b', 'option-b', '2026-10-27T09:00:00.000Z');
+    const { poll, result } = setup([voteA, voteB]);
+
+    act(() => {
+      poll.removeVote(voteA.id, MESSAGE_ID);
+    });
+
+    expect(poll.data.latest_votes_by_option['option-a'] ?? []).toEqual([]);
+    expect(result.current).toBe('You voted: B');
+  });
+});

package/src/components/ChannelPreview/hooks/useChannelPreviewData.ts

@@ -22,7 +22,7 @@ const lastMessageSelector = (state: MessagePaginatorAggregateState) => ({
 });
 
 export const useChannelPreviewData = (channel: Channel, client: StreamChat) => {
-  const userId = client.userID;
+  const userId = client.userId;
   const { lastMessage } =
     useStateStore(channel.messagePaginator.aggregateState, lastMessageSelector) ?? {};
 
@@ -30,20 +30,19 @@ export const useChannelPreviewData = (channel: Channel, client: StreamChat) => {
   // rather than one subscription per concern.
   const previewStateSelector = useCallback(
     (state: MembershipState & MuteStatusState & ReadState) => ({
-      membership: state.membership,
       muteStatus: state.muteStatus,
+      pinned: state.membership?.pinned_at != null,
       unread: userId ? (state.read[userId]?.unread_messages ?? 0) : 0,
     }),
     [userId],
   );
   const {
-    membership,
     muteStatus,
+    pinned = false,
     unread: reactiveUnread,
   } = useStateStore(channel.state, previewStateSelector) ?? {};
 
   const muted = muteStatus?.muted ?? false;
-  const pinned = membership?.pinned_at != null;
   // Muted channels show no unread count.
   const unread = muted ? 0 : (reactiveUnread ?? 0);
 

package/src/components/ChannelPreview/hooks/useChannelPreviewDisplayName.ts

@@ -18,7 +18,7 @@ const pickName = (member: ChannelMemberResponse) => ({
 export const useChannelPreviewDisplayName = (channel?: Channel) => {
   const { client } = useChatContext();
   const { t } = useTranslationContext();
-  const currentUserId = client?.userID;
+  const currentUserId = client?.userId;
   const members = useChannelMembersState(channel, pickName);
   const channelName = useChannelName(channel);
 

package/src/components/ChannelPreview/hooks/useChannelPreviewDisplayPresence.ts

@@ -11,7 +11,7 @@ import { useSyncClientEventsToChannel } from '../../../hooks/useSyncClientEvents
 const selector = (channel: Channel, client: StreamChat) => {
   const members = channel.state.members;
   const membersCount = Object.keys(members).length;
-  const otherMember = Object.values(members).find((member) => member.user?.id !== client.userID);
+  const otherMember = Object.values(members).find((member) => member.user?.id !== client.userId);
 
   if (membersCount !== 2) return false;
   return otherMember?.user?.online ?? false;

package/src/components/ChannelPreview/hooks/useChannelPreviewPollLabel.ts

@@ -32,7 +32,7 @@ export const useChannelPreviewPollLabel = ({ pollId }: UseChannelPreviewPollLabe
     () =>
       latestVotesByOption
         ? Object.values(latestVotesByOption)
-            .map((votes) => votes?.[0])
+            .flatMap((votes) => votes?.[0] ?? [])
             .sort((a, b) => b.created_at - a.created_at)
         : [],
     [latestVotesByOption],