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

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

@@ -4,7 +4,7 @@ import { View } from 'react-native';
 import NetInfo from '@react-native-community/netinfo';
 import { act, cleanup, render, screen, waitFor } from '@testing-library/react-native';
 
-import type { StreamChat } from 'stream-chat';
+import { StreamChat } from 'stream-chat';
 
 import type { ChatContextValue } from '../../../contexts/chatContext/ChatContext';
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
@@ -136,6 +136,36 @@ describe('Chat', () => {
     expect(chatClient.networkConnection.isOnline).toBe(true);
   });
 
+  it('keeps a reporter the app registered before mounting', async () => {
+    const statusReporter = jest.fn(() => () => undefined);
+    chatClient.config.set({ client: { networkConnection: { statusReporter } } });
+
+    const { getByTestId } = render(
+      <Chat client={chatClient}>
+        <View testID='children' />
+      </Chat>,
+    );
+    await waitFor(() => expect(getByTestId('children')).toBeTruthy());
+
+    expect(chatClient.networkConnection.config.statusReporter).toBe(statusReporter);
+    expect(NetInfo.addEventListener).not.toHaveBeenCalled();
+  });
+
+  it('keeps a reporter passed to the client constructor', async () => {
+    const statusReporter = jest.fn(() => () => undefined);
+    const client = new StreamChat('key', { client: { networkConnection: { statusReporter } } });
+
+    const { getByTestId } = render(
+      <Chat client={client}>
+        <View testID='children' />
+      </Chat>,
+    );
+    await waitFor(() => expect(getByTestId('children')).toBeTruthy());
+
+    expect(client.networkConnection.config.statusReporter).toBe(statusReporter);
+    expect(NetInfo.addEventListener).not.toHaveBeenCalled();
+  });
+
   it('keeps the NetInfo listener alive after unmount, because the client outlives <Chat>', async () => {
     // The reporter's lifetime is the CLIENT's, not this component's. Releasing it here would leave
     // `isOnline` frozen at a stale value (`setStatusReporter(null)` keeps the last status by design),

package/src/components/Chat/hooks/useConnectionLifecycle.ts

@@ -9,9 +9,9 @@ import type { NetworkStatusReporter, StreamChat } from 'stream-chat';
 import { useAppStateListener } from '../../../hooks/useAppStateListener';
 
 /**
- * Installs the NetInfo network status reporter on the client and closes the WebSocket while the app
- * is in the background, reopening it in the foreground (push notifications are only delivered while
- * no socket is active).
+ * Installs the NetInfo network status reporter on the client, unless the app registered one, and
+ * closes the WebSocket while the app is in the background, reopening it in the foreground (push
+ * notifications are only delivered while no socket is active).
  *
  * Read the results with `useNetworkConnectionState()` and `useWSConnectionState()`.
  *
@@ -32,7 +32,7 @@ export const useConnectionLifecycle = (client: StreamChat, closeConnectionOnBack
 
   const onForeground = useCallback(() => {
     // Without a user ID, opening the connection would raise an unneeded error.
-    if (!clientExists || !client.userID) {
+    if (!clientExists || !client.userId) {
       return;
     }
 
@@ -44,7 +44,7 @@ export const useConnectionLifecycle = (client: StreamChat, closeConnectionOnBack
   // A `<Chat>` mounted while the app is already active (Android recreating the activity) never sees
   // the background-to-foreground change that reopens a socket its predecessor closed.
   useEffect(() => {
-    if (!closeConnectionOnBackground || !clientExists || !client.userID) return;
+    if (!closeConnectionOnBackground || !clientExists || !client.userId) return;
     if (AppState.currentState === 'active' && client.wsConnection.connection?.isDisconnected) {
       client.openConnection();
     }
@@ -55,6 +55,11 @@ export const useConnectionLifecycle = (client: StreamChat, closeConnectionOnBack
       return;
     }
 
+    // a reporter the app registered, through `client.config` or the client's constructor wins
+    if (client.config.getConfig('client')?.networkConnection?.statusReporter) {
+      return;
+    }
+
     // Set through the client config so `client.config.get('client')` shows the installed reporter.
     // Required on React Native: the client's fallback mirrors its own WebSocket and cannot report
     // the network returning before the socket notices.
@@ -74,7 +79,8 @@ export const useConnectionLifecycle = (client: StreamChat, closeConnectionOnBack
 };
 
 /**
- * Subscribes to NetInfo and reports every change to the client. `<Chat>` installs it in an effect.
+ * Subscribes to NetInfo and reports every change to the client. `<Chat>` installs it in an effect,
+ * unless a reporter is registered in `client.config`.
  *
  * When you build the client yourself, install it at construction instead:
  *

package/src/components/Indicators/LoadingErrorIndicator.tsx

@@ -33,7 +33,7 @@ const LoadingErrorWrapper = (props: React.PropsWithChildren<LoadingErrorWrapperP
 
 export type LoadingErrorProps = {
   error?: Error;
-  listType?: 'channel' | 'message' | 'default';
+  listType?: 'channel' | 'message' | 'thread' | 'default';
   loadNextPage?: () => Promise<void>;
   retry?: () => void;
 };
@@ -64,6 +64,13 @@ export const LoadingErrorIndicator = (props: LoadingErrorProps) => {
           )}
         />
       );
+    case 'thread':
+      return (
+        <LoadingErrorWrapper
+          onPress={retry}
+          text={t('indicators.loading.replies.error', 'Error loading replies...')}
+        />
+      );
     default:
       return <LoadingErrorWrapper text={t('indicators.loading.error', 'Error loading')} />;
   }

package/src/components/Message/Message.tsx

@@ -343,7 +343,7 @@ const MessageWithContext = (props: MessagePropsWithContext) => {
   const actionsEnabled =
     message.type === 'regular' && message.status === MessageStatusTypes.RECEIVED;
 
-  const isMyMessage = client && message && client.userID === message.user?.id;
+  const isMyMessage = client && message && client.userId === message.user?.id;
 
   const handleAction = async (name: string, value: string) => {
     if (message.id) {

package/src/components/Message/MessageItemView/MessageStatus.tsx

@@ -71,6 +71,7 @@ const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
           <icons.CheckAll
             height={16}
             stroke={styles.readCheck.color}
+            testID='message-status-read'
             width={16}
             {...checkAllIcon}
           />
@@ -78,13 +79,26 @@ const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
           <icons.CheckAll
             stroke={styles.deliveredCheck.color}
             height={16}
+            testID='message-status-delivered'
             width={16}
             {...checkAllIcon}
           />
         ) : sending ? (
-          <icons.Time stroke={styles.sendingCheck.color} height={16} width={16} {...timeIcon} />
+          <icons.Time
+            stroke={styles.sendingCheck.color}
+            height={16}
+            testID='message-status-sending'
+            width={16}
+            {...timeIcon}
+          />
         ) : sent ? (
-          <icons.Check stroke={styles.sentCheck.color} height={16} width={16} {...checkIcon} />
+          <icons.Check
+            stroke={styles.sentCheck.color}
+            height={16}
+            testID='message-status-sent'
+            width={16}
+            {...checkIcon}
+          />
         ) : null}
       </View>
     </>

package/src/components/Message/MessageItemView/MessageWrapper.tsx

@@ -57,8 +57,9 @@ export const MessageWrapper = React.memo(function MessageWrapper(props: MessageW
   const createdAtTimestamp = message.created_at;
   const messageId = message.id;
   const nextMessageId = nextMessage?.id;
-  const nextMessageIsOwn = nextMessage?.user?.id === client.userID;
+  const nextMessageIsOwn = nextMessage?.user?.id === client.userId;
   const nextMessageCreatedAt = nextMessage?.created_at ?? undefined;
+  const isThreadList = !!messagePaginator.parentMessageId;
 
   // The unread separator goes on the row above the first unread message from another user. It is
   // located per message inside the selector, so the flag stays `false` for every other row and a
@@ -66,7 +67,9 @@ export const MessageWrapper = React.memo(function MessageWrapper(props: MessageW
   const showUnreadSeparatorSelector = useCallback(
     (snapshot: UnreadSnapshotState) => {
       let showUnreadSeparator: boolean;
-      if (snapshot.firstUnreadMessageId) {
+      if (isThreadList) {
+        showUnreadSeparator = false;
+      } else if (snapshot.firstUnreadMessageId) {
         // Frozen boundary (channel open or mark-unread): anchor to the known first unread ID.
         showUnreadSeparator = nextMessageId === snapshot.firstUnreadMessageId;
       } else if (snapshot.unreadCount) {
@@ -103,7 +106,14 @@ export const MessageWrapper = React.memo(function MessageWrapper(props: MessageW
         unreadCount: showUnreadSeparator ? snapshot.unreadCount : undefined,
       };
     },
-    [createdAtTimestamp, messageId, nextMessageCreatedAt, nextMessageId, nextMessageIsOwn],
+    [
+      createdAtTimestamp,
+      isThreadList,
+      messageId,
+      nextMessageCreatedAt,
+      nextMessageId,
+      nextMessageIsOwn,
+    ],
   );
   const { showUnreadSeparator, unreadCount } = useStateStore(
     messagePaginator.unreadStateSnapshot,
@@ -119,7 +129,7 @@ export const MessageWrapper = React.memo(function MessageWrapper(props: MessageW
 
   const showUnreadUnderlay = !!shouldShowUnreadUnderlay && showUnreadSeparator;
 
-  const wrapMessageInTheme = client.userID === message.user?.id && !!myMessageTheme;
+  const wrapMessageInTheme = client.userId === message.user?.id && !!myMessageTheme;
   const renderDateSeperator = dateSeparatorDate ? (
     <View style={styles.dateSeparatorContainer}>
       <InlineDateSeparator date={dateSeparatorDate} />

package/src/components/Message/MessageItemView/__tests__/MessageStatus.test.tsx

@@ -184,4 +184,25 @@ describe('MessageStatus', () => {
       });
     });
   });
+
+  it.each([
+    [false, false, 'sending', 'message-status-sending'],
+    [true, true, 'received', 'message-status-read'],
+    [false, false, 'received', 'message-status-sent'],
+    [true, false, 'received', 'message-status-delivered'],
+  ] as [boolean, boolean, string, string][])(
+    'exposes a status testID when delivered is %s, read is %s and status is %s',
+    async (delivered, read, status, testID) => {
+      const message = generateMessage({ user: generateUser() });
+      const { getByTestId } = renderMessageStatus({
+        delivered,
+        message: { ...message, status },
+        read,
+      });
+      // The icon row is hidden from screen readers in favour of the hidden text label.
+      await waitFor(() => {
+        expect(getByTestId(testID, { includeHiddenElements: true })).toBeTruthy();
+      });
+    },
+  );
 });

package/src/components/Message/hooks/__tests__/useCreateMessageActionHandlers.test.tsx

@@ -22,7 +22,7 @@ const createClient = (mutedUsers: UserMuteResponse[] = []) =>
     on: jest.fn(() => ({ unsubscribe: jest.fn() })),
     pinMessage: jest.fn(),
     unpinMessage: jest.fn(),
-    userID: 'current-user-id',
+    userId: 'current-user-id',
   }) as unknown as StreamChat & {
     moderation: { mute: jest.Mock; unmute: jest.Mock };
     notifications: { add: jest.Mock; remove: jest.Mock; startTimeout: jest.Mock };

package/src/components/Message/hooks/__tests__/useUserMuteActive.test.tsx

@@ -13,7 +13,7 @@ const muteOf = (targetId: string) =>
 const createClient = () =>
   ({
     mutedUsersStore: new StateStore<{ mutedUsers: UserMuteResponse[] }>({ mutedUsers: [] }),
-    userID: 'current-user-id',
+    userId: 'current-user-id',
   }) as unknown as StreamChat;
 
 describe('useUserMuteActive', () => {

package/src/components/Message/hooks/useCreateMessageActionHandlers.ts

@@ -197,7 +197,7 @@ export const useCreateMessageActionHandlers = ({
 
     const isMuted = isUserMuted(
       client.mutedUsersStore.getLatestValue().mutedUsers,
-      client.userID,
+      client.userId,
       message.user.id,
     );
 
@@ -371,9 +371,9 @@ export const useCreateMessageActionHandlers = ({
     const userExistingReaction = own_reactions.find((reaction) => {
       // `own_reactions` should only hold the current user's reactions; checked anyway so a bad
       // message update cannot break toggling.
-      if (reaction.user && client.userID === reaction.user.id && reaction.type === reactionType) {
+      if (reaction.user && client.userId === reaction.user.id && reaction.type === reactionType) {
         return true;
-      } else if (reaction.user && client.userID !== reaction.user.id) {
+      } else if (reaction.user && client.userId !== reaction.user.id) {
         console.warn(
           'message.own_reactions contained reactions from a different user, this indicates a bug',
         );

package/src/components/Message/hooks/useProcessReactions.ts

@@ -113,7 +113,7 @@ export const useProcessReactions = (props: UseProcessReactionsParams) => {
           Icon: getEmojiByReactionType(reactionType, supportedReactions),
           lastReactionAt: convertTimestampToDate(last_reaction_at) ?? null,
           latestReactedUserNames,
-          own: isOwnReaction(reactionType, own_reactions, latest_reactions, client.userID),
+          own: isOwnReaction(reactionType, own_reactions, latest_reactions, client.userId),
           type: reactionType,
           unlistedReactedUserCount: count - latestReactedUserNames.length,
         };
@@ -126,7 +126,7 @@ export const useProcessReactions = (props: UseProcessReactionsParams) => {
       totalReactionCount: unsortedReactions.reduce((total, { count }) => total + count, 0),
     };
   }, [
-    client.userID,
+    client.userId,
     reaction_groups,
     own_reactions,
     latest_reactions,

package/src/components/Message/hooks/useUserMuteActive.ts

@@ -32,7 +32,7 @@ export const isUserMuted = (
  */
 export const useUserMuteActive = (user: UserResponse | null | undefined) => {
   const { client } = useChatContext();
-  const currentUserId = client?.userID;
+  const currentUserId = client?.userId;
   const userId = user?.id;
 
   const selector = useCallback(

package/src/components/MessageInput/MessageComposer.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
 
 import Animated, {
   Extrapolation,
@@ -328,7 +328,9 @@ const MessageComposerWithContext = (props: MessageComposerPropsWithContext) => {
   }));
   const { bottom } = useSafeAreaInsets();
 
-  const BOTTOM_OFFSET = isKeyboardVisible || selectedPicker ? 16 : bottom ? bottom : 16;
+  const safeAreaBottomOffset = Platform.OS === 'android' ? bottom + 16 : bottom;
+  const BOTTOM_OFFSET =
+    isKeyboardVisible || selectedPicker ? 16 : bottom ? safeAreaBottomOffset : 16;
 
   const micPositionContextValue = useMemo(
     () => ({ micPositionX, micPositionY }),

package/src/components/MessageList/MessageFlashList.tsx

@@ -321,7 +321,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
       channel,
       markRead,
       readEvents,
-      userId: client.userID,
+      userId: client.userId,
     });
 
   const renderItem = useCallback(
@@ -343,7 +343,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
 
   const shouldScrollToRecentOnNewOwnMessageRef = useShouldScrollToRecentOnNewOwnMessage(
     rawMessageList,
-    client.userID,
+    client.userId,
   );
 
   const [autoscrollToRecent, setAutoscrollToRecent] = useState(true);

package/src/components/MessageList/MessageList.tsx

@@ -321,7 +321,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
       channel,
       markRead,
       readEvents,
-      userId: client.userID,
+      userId: client.userId,
     });
 
   const previousDerivedItemsRef = useRef<Map<string, MessageListItemWithNeighbours>>(undefined);
@@ -355,7 +355,7 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
 
   const shouldScrollToRecentOnNewOwnMessageRef = useShouldScrollToRecentOnNewOwnMessage(
     rawMessageList,
-    client.userID,
+    client.userId,
   );
 
   const [autoscrollToRecent, setAutoscrollToRecent] = useState(false);

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import { FlatList, StyleSheet } from 'react-native';
 
@@ -8,6 +8,9 @@ import type { LocalMessage, StreamChat as StreamChatClient, UserResponse } from
 import { msToNs, Thread } from 'stream-chat';
 
 import { WithComponents } from '../../../contexts/componentsContext/ComponentsContext';
+import { useMessageComposerAPIContext } from '../../../contexts/messageComposerContext/MessageComposerAPIContext';
+import { useMessageComposer } from '../../../contexts/messageInputContext/hooks/useMessageComposer';
+import { useMessageInputContext } from '../../../contexts/messageInputContext/MessageInputContext';
 import { OverlayProvider } from '../../../contexts/overlayContext/OverlayProvider';
 import { getOrCreateChannelApi } from '../../../mock-builders/api/getOrCreateChannel';
 
@@ -22,6 +25,7 @@ import { getTestClientWithUser } from '../../../mock-builders/mock';
 import { primitives } from '../../../theme';
 import { Channel } from '../../Channel/Channel';
 import { Chat } from '../../Chat/Chat';
+import { MessageComposer } from '../../MessageInput/MessageComposer';
 
 import { Thread as ThreadComponent } from '../../Thread/Thread';
 import { SCROLL_TO_BOTTOM_ACCESSIBILITY_ACTION_NAME } from '../hooks/useScrollToBottomAccessibilityAction';
@@ -1290,12 +1294,12 @@ describe('MessageList in a thread', () => {
         generateMessage({ parent_id: parentMessage.id, text: `reply-${i}` }),
       ),
     ) as LocalMessage[];
+    // Seeded as the thread seeds `latest_replies`: one complete page, which is the newest one.
     act(() =>
-      threadInstance.messagePaginator.state.partialNext({
-        hasMoreHead: false,
-        hasMoreTail: false,
-        isLoading: false,
-        items: replies,
+      threadInstance.messagePaginator.setItems({
+        valueOrFactory: replies,
+        isFirstPage: true,
+        isLastPage: true,
       }),
     );
 
@@ -1375,7 +1379,9 @@ describe('MessageList in a thread', () => {
     expect(markReadLocally).not.toHaveBeenCalled();
   });
 
-  it("places the unread separator from the thread's unread state, not the channel's", async () => {
+  // The LLC seeds the thread's snapshot from the channel's read state, which says nothing about the
+  // replies, so a thread draws no separator from either snapshot.
+  it('draws no unread separator in a thread', async () => {
     const { channel, queryAllByLabelText, replies, threadInstance } = await setup();
 
     act(() =>
@@ -1386,12 +1392,107 @@ describe('MessageList in a thread', () => {
     );
     expect(queryAllByLabelText('Inline unread indicator')).toHaveLength(0);
 
-    act(() =>
-      threadInstance.messagePaginator.unreadStateSnapshot.partialNext({
-        firstUnreadMessageId: replies[3].id,
-        unreadCount: 2,
-      }),
-    );
-    await waitFor(() => expect(queryAllByLabelText('Inline unread indicator')).toHaveLength(1));
+    // The first reply too, whose separator row would be the parent message.
+    for (const firstUnread of [replies[0], replies[3]]) {
+      await act(async () => {
+        threadInstance.messagePaginator.unreadStateSnapshot.partialNext({
+          firstUnreadMessageId: firstUnread.id,
+          unreadCount: 2,
+        });
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      });
+      expect(queryAllByLabelText('Inline unread indicator')).toHaveLength(0);
+    }
+
+    // The live boundary, from the read time rather than a frozen first-unread ID.
+    await act(async () => {
+      threadInstance.messagePaginator.unreadStateSnapshot.next({
+        firstUnreadMessageId: null,
+        lastReadAt: replies[1].created_at,
+        lastReadMessageId: replies[1].id,
+        unreadCount: 3,
+      });
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+    expect(queryAllByLabelText('Inline unread indicator')).toHaveLength(0);
   });
 });
+
+describe('MessageList optimistic edit', () => {
+  afterEach(() => {
+    cleanup();
+    jest.restoreAllMocks();
+  });
+
+  // A UI renders `i18n.<language>_text` in place of `text`, so an optimistic edit that kept the
+  // translations of the old text showed the "Edited" label over the old message until the server
+  // responded (or, offline, until the edit was replayed).
+  it('shows an edit of an auto-translated message before the request resolves', async () => {
+    const me = generateUser({ id: 'testID' });
+    const mine = generateMessage({
+      i18n: { en_text: 'before edit', es_text: 'antes de editar', language: 'en' },
+      text: 'before edit',
+      user: me,
+    });
+    const mockedChannel = generateChannelResponse({
+      members: [generateMember({ user: me })],
+      messages: [mine],
+    });
+    mine.cid = mockedChannel.channel.cid;
+
+    const chatClient = await getTestClientWithUser(me);
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    const channel = chatClient.channel('messaging', mockedChannel.channel.id);
+    await channel.watch();
+    // Never settles, so whatever is on screen is the optimistic state.
+    const updateMessage = jest
+      .spyOn(chatClient, 'updateMessage')
+      .mockImplementation(() => new Promise(() => undefined));
+
+    let startEditing: (message: LocalMessage) => void = () => undefined;
+    let submit: () => Promise<void> = () => Promise.resolve();
+    let composer: ReturnType<typeof useMessageComposer> | undefined;
+    const EditDriver = () => {
+      const { setEditingState } = useMessageComposerAPIContext();
+      const { sendMessage } = useMessageInputContext();
+      const messageComposer = useMessageComposer();
+      useEffect(() => {
+        startEditing = setEditingState;
+        submit = sendMessage;
+        composer = messageComposer;
+      });
+      return null;
+    };
+
+    const { getByTestId } = render(
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel}>
+            <MessageList />
+            <MessageComposer />
+            <EditDriver />
+          </Channel>
+        </Chat>
+      </OverlayProvider>,
+    );
+    await waitFor(() =>
+      expect(
+        within(getByTestId(`message-list-item-${mine.id}`)).getByText('before edit'),
+      ).toBeTruthy(),
+    );
+
+    act(() => startEditing(channel.messagePaginator.getItem(mine.id) as LocalMessage));
+    await waitFor(() => expect(composer?.editedMessage?.id).toBe(mine.id));
+    act(() => composer?.textComposer.setText('after edit'));
+    act(() => {
+      void submit();
+    });
+
+    await waitFor(() => expect(updateMessage).toHaveBeenCalled());
+    await waitFor(() => {
+      const row = within(getByTestId(`message-list-item-${mine.id}`));
+      expect(row.getByText('after edit')).toBeTruthy();
+      expect(row.queryByText('before edit')).toBeNull();
+    });
+  }, 15000);
+});

package/src/components/MessageList/__tests__/ScrollToBottomButton.test.tsx

@@ -75,7 +75,7 @@ describe('ScrollToBottomButton', () => {
     const i18nInstance = new Streami18n();
     const translators = await i18nInstance.init();
     // The button reads OUR user's count from `channel.state` (a v10 reactive StateStore) via
-    // `useStateStore`, keyed by the chat client's userID. Seed the `read` slice with 3 unread
+    // `useStateStore`, keyed by the chat client's `userId`. Seed the `read` slice with 3 unread
     // for that user.
     const channel = {
       state: generateChannelState({
@@ -91,7 +91,7 @@ describe('ScrollToBottomButton', () => {
     const { getByTestId, getByText } = render(
       <ThemeProvider>
         <TranslationProvider value={{ ...translators, t } as unknown as TranslationContextValue}>
-          <ChatProvider value={{ client: { userID: 'me' } } as unknown as ChatContextValue}>
+          <ChatProvider value={{ client: { userId: 'me' } } as unknown as ChatContextValue}>
             <ChannelProvider value={{ channel } as unknown as ChannelContextValue}>
               <ScrollToBottomButton onPress={() => null} showNotification={true} />
             </ChannelProvider>
@@ -139,7 +139,7 @@ describe('ScrollToBottomButton', () => {
       <ThemeProvider>
         <AccessibilityProvider value={{ enabled: true }}>
           <TranslationProvider value={{ ...translators, userLanguage: 'en' }}>
-            <ChatProvider value={{ client: { userID: 'me' } } as unknown as ChatContextValue}>
+            <ChatProvider value={{ client: { userId: 'me' } } as unknown as ChatContextValue}>
               <ChannelProvider value={{ channel } as unknown as ChannelContextValue}>
                 <ScrollToBottomButton onPress={() => null} showNotification={true} />
               </ChannelProvider>

package/src/components/MessageList/hooks/useOwnUnreadCount.ts

@@ -14,7 +14,7 @@ import { useStateStore } from '../../../hooks/useStateStore';
  */
 export const useOwnUnreadCount = (channel: Channel | undefined) => {
   const { client } = useChatContext();
-  const userId = client?.userID;
+  const userId = client?.userId;
   const selector = useMemo(
     () => (state: ReadState) => ({
       unreadCount: userId ? (state.read[userId]?.unread_messages ?? 0) : 0,

package/src/components/MessageMenu/MessageUserReactionsItem.tsx

@@ -36,7 +36,7 @@ export const MessageUserReactionsItem = ({
   const styles = useStyles();
 
   const { client } = useChatContext();
-  const isOwnReaction = client.userID === id;
+  const isOwnReaction = client.userId === id;
   const { t } = useTranslationContext();
 
   const { handleReaction } = useMessageContext();

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

@@ -10,9 +10,9 @@ export const useMessageOwnReactions = () => {
     const ownReactionTypes = message?.own_reactions?.map((reaction) => reaction.type) || [];
     const latestReactionTypesByCurrentUser =
       message?.latest_reactions
-        ?.filter((reaction) => reaction.user?.id === client.userID)
+        ?.filter((reaction) => reaction.user?.id === client.userId)
         .map((reaction) => reaction.type) || [];
 
     return Array.from(new Set([...ownReactionTypes, ...latestReactionTypesByCurrentUser]));
-  }, [client.userID, message?.latest_reactions, message?.own_reactions]);
+  }, [client.userId, message?.latest_reactions, message?.own_reactions]);
 };

package/src/components/Poll/components/PollAnswersList.tsx

@@ -96,7 +96,7 @@ export const PollAnswerListItem = ({ answer }: { answer: PollVoteResponseData })
     [answer.updated_at, t, tDateTimeParser],
   );
 
-  const isMyAnswer = client.userID === answer.user?.id;
+  const isMyAnswer = client.userId === answer.user?.id;
 
   const isAnonymous = useMemo(
     () => votingVisibility === 'anonymous' && !isMyAnswer,

package/src/components/Poll/components/PollButtons.tsx

@@ -229,7 +229,7 @@ export const EndVoteButton = () => {
   const { client } = useChatContext();
   const styles = useStyles();
 
-  return !isClosed && createdBy?.id === client.userID ? (
+  return !isClosed && createdBy?.id === client.userId ? (
     <GenericPollButton
       label={t('poll.endVote.label', 'End Vote')}
       onPress={endVote}

package/src/components/Poll/hook/useIsPollCreatedByCurrentUser.ts

@@ -10,5 +10,5 @@ export const useIsPollCreatedByCurrentUser = () => {
   const { createdBy } = usePollState();
   const { client } = useChatContext();
 
-  return createdBy?.id === client.userID;
+  return createdBy?.id === client.userId;
 };

package/src/components/Thread/Thread.tsx

@@ -138,7 +138,7 @@ export const Thread = (props: PropsWithChildren<ThreadProps>) => {
         .toTail()
         .catch((err: unknown) => console.warn('Reloading the thread replies failed:', err));
 
-    return <LoadingErrorIndicator error={lastQueryError} listType='message' retry={retry} />;
+    return <LoadingErrorIndicator error={lastQueryError} listType='thread' retry={retry} />;
   }
 
   return (