stream-chat-react-native-core 9.11.0-beta.3 → 9.11.1-beta.1

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

@@ -73,6 +73,7 @@ const MessageStatusWithContext = (props: MessageStatusPropsWithContext) => {
           <icons.CheckAll
             height={16}
             stroke={styles.readCheck.color}
+            testID='message-status-read'
             width={16}
             {...checkAllIcon}
           />
@@ -80,13 +81,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/__tests__/MessageStatus.test.tsx

@@ -125,4 +125,25 @@ describe('MessageStatus', () => {
       });
     },
   );
+
+  it.each([
+    [1, 1, 'sending', 'message-status-sending'],
+    [2, 2, 'received', 'message-status-read'],
+    [1, 1, 'received', 'message-status-sent'],
+    [2, 1, 'received', 'message-status-delivered'],
+  ] as [number, number, string, string][])(
+    'should expose a status testID when deliveredToCount is %s, readBy is %s and status is %s',
+    async (deliveredToCount, readBy, status, testID) => {
+      const message = generateMessage({ user: generateUser() });
+      const { getByTestId } = renderMessageStatus({
+        deliveredToCount,
+        message: { ...message, status },
+        readBy,
+      });
+      // 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/MessageList/MessageFlashList.tsx

@@ -4,6 +4,7 @@ import { LayoutChangeEvent, ScrollViewProps, StyleSheet, View, useColorScheme }
 import Animated from 'react-native-reanimated';
 
 import type { FlashListProps, FlashListRef } from '@shopify/flash-list';
+import debounce from 'lodash/debounce';
 import type { Channel, Event, LocalMessage, MessageResponse } from 'stream-chat';
 
 import { useMessageList } from './hooks/useMessageList';
@@ -147,7 +148,7 @@ type MessageFlashListPropsWithContext = Pick<
   > &
   Pick<
     ThreadContextValue,
-    'loadMoreRecentThread' | 'loadMoreThread' | 'thread' | 'threadInstance'
+    'loadMoreRecentThread' | 'loadMoreThread' | 'thread' | 'threadHasMore' | 'threadInstance'
   > & {
     /**
      * Besides existing (default) UX behavior of underlying FlatList of MessageList component, if you want
@@ -346,6 +347,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     hasPendingInitialTargetLoad,
     targetedMessage,
     thread,
+    threadHasMore,
     threadInstance,
     threadList = false,
   } = props;
@@ -835,6 +837,16 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
    * once per content length.
    */
 
+  /**
+   * How many messages the list pages through are loaded: the thread's replies in a thread list, the
+   * channel's messages otherwise.
+   */
+  const getLoadedMessageCount = useStableCallback(() =>
+    threadList && thread?.id
+      ? (channel?.state.threads[thread.id]?.length ?? 0)
+      : (channel?.state.messages.length ?? 0),
+  );
+
   /**
    * 1. Makes a call to `loadMore` function, which queries more older messages.
    * 2. Ensures that we call `loadMore`, once per content length
@@ -853,8 +865,11 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
       onStartReachedTracker.current[processedMessageList.length] = true;
     }
 
-    const callback = () => {
+    const callback = (loadedMessageCount: number) => {
       onStartReachedInPromise.current = null;
+      if (getLoadedMessageCount() === loadedMessageCount) {
+        onError();
+      }
       return Promise.resolve();
     };
 
@@ -869,12 +884,13 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     if (onEndReachedInPromise.current) {
       await onEndReachedInPromise.current;
     }
+    const loadedMessageCount = getLoadedMessageCount();
     onStartReachedInPromise.current = (
       threadList && !!threadInstance && loadMoreRecentThread
         ? loadMoreRecentThread({})
         : loadMoreRecent()
     )
-      .then(callback)
+      .then(() => callback(loadedMessageCount))
       .catch(onError);
   });
 
@@ -885,7 +901,10 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
    */
   const maybeCallOnEndReached = useStableCallback(async () => {
     // If onStartReached has already been called for given data length, then ignore.
-    if (processedMessageList?.length && onEndReachedTracker.current[processedMessageList.length]) {
+    if (
+      (processedMessageList?.length && onEndReachedTracker.current[processedMessageList.length]) ||
+      (threadList && !threadHasMore)
+    ) {
       return;
     }
 
@@ -893,9 +912,11 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
       onEndReachedTracker.current[processedMessageList.length] = true;
     }
 
-    const callback = () => {
+    const callback = (loadedMessageCount: number) => {
       onEndReachedInPromise.current = null;
-
+      if (getLoadedMessageCount() === loadedMessageCount) {
+        onError();
+      }
       return Promise.resolve();
     };
 
@@ -911,8 +932,9 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
       await onStartReachedInPromise.current;
     }
 
+    const loadedMessageCount = getLoadedMessageCount();
     onEndReachedInPromise.current = (threadList ? loadMoreThread() : loadMore())
-      .then(callback)
+      .then(() => callback(loadedMessageCount))
       .catch(onError);
   });
 
@@ -1100,6 +1122,31 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
     currentListHeightRef.current = height;
   });
 
+  const debouncedPrefillMessages = useMemo(
+    () =>
+      debounce(
+        (viewportHeight: number, contentHeight: number) => {
+          if (viewportHeight >= contentHeight) {
+            maybeCallOnEndReached();
+          }
+        },
+        500,
+        {
+          leading: false,
+          trailing: true,
+        },
+      ),
+    [maybeCallOnEndReached],
+  );
+
+  const onContentSizeChange = useStableCallback((width: number, height: number) => {
+    if (additionalFlashListProps?.onContentSizeChange) {
+      additionalFlashListProps.onContentSizeChange(width, height);
+    }
+
+    debouncedPrefillMessages(currentListHeightRef.current ?? 0, height);
+  });
+
   const ListFooterComponent = useCallback(() => {
     if (FooterComponent) {
       return <FooterComponent />;
@@ -1172,6 +1219,7 @@ const MessageFlashListWithContext = (props: MessageFlashListPropsWithContext) =>
             {...additionalFlashListPropsExcludingStyle}
             accessibilityActions={messageListAccessibilityActions}
             onAccessibilityAction={messageListOnAccessibilityAction}
+            onContentSizeChange={onContentSizeChange}
           />
         </MessageListItemProvider>
       )}
@@ -1313,7 +1361,8 @@ export const MessageFlashList = (props: MessageFlashListProps) => {
   const { disableTypingIndicator, FlatList, myMessageTheme, shouldShowUnreadUnderlay } =
     useMessagesContext();
   const { loadMore, loadMoreRecent } = usePaginatedMessageListContext();
-  const { loadMoreRecentThread, loadMoreThread, thread, threadInstance } = useThreadContext();
+  const { loadMoreRecentThread, loadMoreThread, thread, threadHasMore, threadInstance } =
+    useThreadContext();
   const { readEvents } = useOwnCapabilitiesContext();
   const { allowSendBeforeAttachmentsUpload, messageInputFloating, messageInputHeightStore } =
     useMessageInputContext();
@@ -1355,6 +1404,7 @@ export const MessageFlashList = (props: MessageFlashListProps) => {
         shouldShowUnreadUnderlay,
         targetedMessage,
         thread,
+        threadHasMore,
         threadInstance,
         threadList,
       }}

package/src/components/MessageList/MessageList.tsx

@@ -932,6 +932,16 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
    * once per content length.
    */
 
+  /**
+   * How many messages the list pages through are loaded: the thread's replies in a thread list, the
+   * channel's messages otherwise.
+   */
+  const getLoadedMessageCount = useStableCallback(() =>
+    threadList && thread?.id
+      ? (channel?.state.threads[thread.id]?.length ?? 0)
+      : (channel?.state.messages.length ?? 0),
+  );
+
   /**
    * 1. Makes a call to `loadMoreRecent` function, which queries more recent messages.
    * 2. Ensures that we call `loadMoreRecent`, once per content length
@@ -950,9 +960,11 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
       onStartReachedTracker.current[processedMessageList.length] = true;
     }
 
-    const callback = () => {
+    const callback = (loadedMessageCount: number) => {
       onStartReachedInPromise.current = null;
-
+      if (getLoadedMessageCount() === loadedMessageCount) {
+        onError();
+      }
       return Promise.resolve();
     };
 
@@ -967,12 +979,13 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     if (onEndReachedInPromise.current) {
       await onEndReachedInPromise.current;
     }
+    const loadedMessageCount = getLoadedMessageCount();
     onStartReachedInPromise.current = (
       threadList && !!threadInstance && loadMoreRecentThread
         ? loadMoreRecentThread({})
         : loadMoreRecent()
     )
-      .then(callback)
+      .then(() => callback(loadedMessageCount))
       .catch(onError);
   });
 
@@ -995,8 +1008,11 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
       onEndReachedTracker.current[processedMessageList.length] = true;
     }
 
-    const callback = () => {
+    const callback = (loadedMessageCount: number) => {
       onEndReachedInPromise.current = null;
+      if (getLoadedMessageCount() === loadedMessageCount) {
+        onError();
+      }
       return Promise.resolve();
     };
 
@@ -1011,8 +1027,9 @@ const MessageListWithContext = (props: MessageListPropsWithContext) => {
     if (onStartReachedInPromise.current) {
       await onStartReachedInPromise.current;
     }
+    const loadedMessageCount = getLoadedMessageCount();
     onEndReachedInPromise.current = (threadList ? loadMoreThread() : loadMore())
-      .then(callback)
+      .then(() => callback(loadedMessageCount))
       .catch(onError);
   });
 

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

@@ -650,6 +650,57 @@ describe('MessageList pagination', () => {
     });
   });
 
+  it('tries loading older messages again after a load that loaded nothing', async () => {
+    const user1 = generateUser();
+    const mockedChannel = generateChannelResponse({
+      members: [generateMember({ user: user1 })],
+      messages: Array.from({ length: 100 }, (_, i) => generateMessage({ text: `message-${i}` })),
+    });
+
+    const chatClient = await getTestClientWithUser({ id: 'testID' });
+    useMockedApis(chatClient, [getOrCreateChannelApi(mockedChannel)]);
+    const channel = chatClient.channel('messaging', mockedChannel.channel.id);
+    await channel.watch();
+
+    // resolves without loading anything, as `loadMore` does when its request fails, e.g. offline
+    const loadMore = jest.fn(() => Promise.resolve());
+    mockedHook({ loadMore });
+
+    const { getByTestId } = render(
+      <OverlayProvider>
+        <Chat client={chatClient}>
+          <Channel channel={channel}>
+            <MessageList />
+          </Channel>
+        </Chat>
+      </OverlayProvider>,
+    );
+
+    const scrollToEnd = () =>
+      act(() => {
+        fireEvent(getByTestId('message-flat-list'), 'momentumScrollEnd', {
+          nativeEvent: {
+            contentOffset: { y: 1900 },
+            contentSize: { height: 2000, width: 200 },
+            layoutMeasurement: { height: 400, width: 200 },
+          },
+        });
+      });
+
+    scrollToEnd();
+    await waitFor(() => {
+      expect(loadMore).toHaveBeenCalledTimes(1);
+    });
+
+    // released after the same 2 second backoff as a rejected load
+    await act(() => new Promise((resolve) => setTimeout(resolve, 2100)));
+    scrollToEnd();
+
+    await waitFor(() => {
+      expect(loadMore).toHaveBeenCalledTimes(2);
+    });
+  });
+
   it('should call load latest messages when the scroll to bottom button is pressed', async () => {
     const user1 = generateUser();
     const messages = Array.from({ length: 10 }, (_, i) =>

package/src/store/__tests__/selectMessagesForChannels.test.ts

@@ -0,0 +1,63 @@
+import type { ChannelAPIResponse } from 'stream-chat';
+
+import { generateChannelResponse } from '../../mock-builders/generator/channel';
+import { generateMessage } from '../../mock-builders/generator/message';
+import { BetterSqlite } from '../../test-utils/BetterSqlite';
+import { getChannels } from '../apis/getChannels';
+import { selectMessagesForChannels } from '../apis/queries/selectMessagesForChannels';
+import { upsertChannels } from '../apis/upsertChannels';
+import { SqliteClient } from '../SqliteClient';
+
+/**
+ * The client reads the cached page as a channel list page of `message_limit` messages, so a page of
+ * a different size makes it guess wrongly whether older messages exist, for example that a channel
+ * with a long history starts at its cached messages.
+ */
+describe('selectMessagesForChannels', () => {
+  let cid: string;
+  let messages: ReturnType<typeof generateMessage>[];
+
+  beforeEach(async () => {
+    await SqliteClient.initializeDatabase();
+    await BetterSqlite.openDB();
+
+    const channelResponse = generateChannelResponse({ members: [], messages: [] });
+    cid = channelResponse.channel.cid as string;
+    messages = Array.from({ length: 30 }, (_, i) =>
+      generateMessage({ cid, timestamp: new Date(Date.UTC(2020, 0, 1, 0, i)) }),
+    );
+    channelResponse.messages = messages as unknown as typeof channelResponse.messages;
+    await upsertChannels({
+      channels: [channelResponse] as unknown as ChannelAPIResponse[],
+      isLatestMessagesSet: true,
+    });
+  });
+
+  afterEach(() => {
+    BetterSqlite.dropAllTables();
+    BetterSqlite.closeDB();
+  });
+
+  const ids = (rows: { id: string }[]) => rows.map((row) => row.id);
+
+  it("returns a channel's newest 25 messages, oldest first, by default", async () => {
+    const rows = await selectMessagesForChannels([cid]);
+
+    expect(ids(rows)).toEqual(ids(messages.slice(-25)));
+  });
+
+  it("returns a channel's newest `messageLimit` messages", async () => {
+    expect(ids(await selectMessagesForChannels([cid], 10))).toEqual(ids(messages.slice(-10)));
+    expect(ids(await selectMessagesForChannels([cid], 50))).toEqual(ids(messages));
+  });
+
+  it('applies the limit that getChannels is given', async () => {
+    const [channel] = await getChannels({
+      channelIds: [cid],
+      currentUserId: 'some-user',
+      messageLimit: 10,
+    });
+
+    expect(ids(channel.messages)).toEqual(ids(messages.slice(-10)));
+  });
+});

package/src/store/apis/getChannelMessages.ts

@@ -12,15 +12,18 @@ import type { TableRow, TableRowJoinedUser } from '../types';
 export const getChannelMessages = async ({
   channelIds,
   currentUserId,
+  messageLimit,
 }: {
   channelIds: string[];
   currentUserId: string;
+  messageLimit?: number;
 }) => {
   SqliteClient.logger?.('info', 'getChannelMessages', {
     channelIds,
     currentUserId,
+    messageLimit,
   });
-  const messageRows = await selectMessagesForChannels(channelIds);
+  const messageRows = await selectMessagesForChannels(channelIds, messageLimit);
   const messageIds = messageRows.map(({ id }) => id);
 
   // Populate the message reactions.

package/src/store/apis/getChannels.ts

@@ -16,17 +16,20 @@ import { SqliteClient } from '../SqliteClient';
  * @param {Object} param
  * @param {Array} param.channelIds List of channel ids to fetch.
  * @param {Array} param.currentUserId Id of the current logged in user.
+ * @param {number} param.messageLimit How many of each channel's newest messages to return, 25 by default.
  *
  * @returns {Array} Channels with enriched state.
  */
 export const getChannels = async ({
   channelIds,
   currentUserId,
+  messageLimit,
 }: {
   channelIds: string[];
   currentUserId: string;
+  messageLimit?: number;
 }): Promise<Omit<ChannelAPIResponse, 'duration'>[]> => {
-  SqliteClient.logger?.('info', 'getChannels', { channelIds, currentUserId });
+  SqliteClient.logger?.('info', 'getChannels', { channelIds, currentUserId, messageLimit });
 
   const [channels, cidVsDraft, cidVsMembers, cidVsReads, cidVsMessages, cidVsActiveLocations] =
     await Promise.all([
@@ -37,6 +40,7 @@ export const getChannels = async ({
       getChannelMessages({
         channelIds,
         currentUserId,
+        messageLimit,
       }),
       getChannelActiveLocations({ channelIds }),
     ]);

package/src/store/apis/getChannelsForFilterSort.ts

@@ -48,5 +48,6 @@ export const getChannelsForFilterSort = async ({
   return await getChannels({
     channelIds,
     currentUserId,
+    messageLimit: options?.message_limit,
   });
 };

package/src/store/apis/queries/selectMessagesForChannels.ts

@@ -2,8 +2,12 @@ import { tables } from '../../schema';
 import { SqliteClient } from '../../SqliteClient';
 import type { TableRowJoinedUser } from '../../types';
 
+/** The `message_limit` the client assumes for a channel list query that sets none. */
+export const DEFAULT_CHANNEL_LIST_MESSAGE_LIMIT = 25;
+
 export const selectMessagesForChannels = async (
   cids: string[],
+  messageLimit: number = DEFAULT_CHANNEL_LIST_MESSAGE_LIMIT,
 ): Promise<TableRowJoinedUser<'messages'>[]> => {
   const questionMarks = Array(cids.length).fill('?').join(',');
   const messagesColumnNames = Object.keys(tables.messages.columns)
@@ -15,6 +19,7 @@ export const selectMessagesForChannels = async (
 
   SqliteClient.logger?.('info', 'selectMessagesForChannels', {
     cids,
+    messageLimit,
   });
 
   const result = await SqliteClient.executeSql(
@@ -38,9 +43,9 @@ export const selectMessagesForChannels = async (
     LEFT JOIN
       users b
     ON b.id = a.userId
-    WHERE RowNum < 25
+    WHERE RowNum <= ?
     ORDER BY a.createdAt ASC`,
-    cids,
+    [...cids, messageLimit],
   );
 
   return result.map((r) => JSON.parse(r.value));

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "9.11.0-beta.3"
+  "version": "9.11.1-beta.1"
 }