Merge pull request #79 from pubnub/fix/ui-1537

fix(lib): fix infinite scrolling on MessageList not working when limit is set over 25

Author: Salet

.pubnub.yml

@@ -1,12 +1,17 @@
 ---
 name: pubnub-react-chat-components
-version: v0.14.0
+version: v0.15.0
 scm: github.com/pubnub/react-chat-components
 schema: 1
 files:
   - lib/dist/index.js
   - lib/dist/index.es.js
 changelog:
+  - date: 2022-11-09
+    version: v0.15.0
+    changes:
+      - type: bug
+        text: "MessageList - infinite scrolling breaks if history limit is set over 25."
   - date: 2022-10-18
     version: v0.14.0
     changes:
@@ -37,12 +42,9 @@ changelog:
     version: v0.10.0
     changes:
       - type: fix
-        text:
-          "MessageInput - user metadata not attached to File messages with senderInfo option
-          enabled."
+        text: "MessageInput - user metadata not attached to File messages with senderInfo option enabled."
       - type: fix
-        text:
-          "Channel/MemberList - disable default flex shrinking of some UI elements (e.g. avatars)."
+        text: "Channel/MemberList - disable default flex shrinking of some UI elements (e.g. avatars)."
   - changes:
       - text: Channel/MemberList - added option for custom sorting
         type: feature

packages/common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubnub/common-chat-components",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "main": "src/index.ts",
   "license": "MIT",
   "scripts": {

packages/common/src/message-list/message-list.tsx

@@ -7,6 +7,7 @@ import {
   MessageEnvelope,
   EmojiPickerElementProps,
   FileAttachment,
+  ProperFetchMessagesResponse,
 } from "../types";
 import { usePrevious } from "../helpers";
 import {
@@ -29,7 +30,7 @@ export interface MessageRendererProps {
 
 export interface CommonMessageListProps {
   children?: ReactNode;
-  /** Option to fetch past messages from storage and display them on a channel. Set a number from "0" to "100". Defaults to "0" to fetch no messages from storage. */
+  /** Set this option to a non-zero value to enable fetching messages from the History API. This feature uses the infinite scrolling pattern and takes a maximum value of 25. */
   fetchMessages?: number;
   /** Option to enable rendering reactions that were added to messages. Make sure to also set up reactionsPicker when this option is enabled. */
   enableReactions?: boolean;
@@ -45,7 +46,7 @@ export interface CommonMessageListProps {
   bubbleRenderer?: (props: MessageRendererProps) => JSX.Element;
   /** Option to provide a custom file renderer to change how images and other files are shown. */
   fileRenderer?: (file: FileAttachment) => JSX.Element;
-  /** Option to render only selected messages. */
+  /** This option only works when you use either `messageRenderer` or `bubbleRenderer`. It allows you to apply one of the custom renderers only to the messages selected by the filter. */
   filter?: (message: MessageEnvelope) => boolean;
 }
 
@@ -131,15 +132,19 @@ export const useMessageListCore = (props: CommonMessageListProps) => {
         start: (messages?.[0]?.timetoken as number) || undefined,
         includeMessageActions: true,
       };
-      const response = await retry(() => pubnub.fetchMessages(options));
+      const response = (await retry(() =>
+        pubnub.fetchMessages(options)
+      )) as ProperFetchMessagesResponse;
       const newMessages = (response?.channels[channel] || []).map((m) =>
         m.messageType === 4 ? fetchFileUrl(m) : m
       ) as MessageEnvelope[];
       const allMessages = [...messages, ...newMessages].sort(
         (a, b) => (a.timetoken as number) - (b.timetoken as number)
       );
       setMessages(allMessages);
-      setPaginationEnd(!allMessages.length || newMessages.length !== props.fetchMessages);
+      setPaginationEnd(
+        !response.more && (!allMessages.length || newMessages.length !== props.fetchMessages)
+      );
     } catch (e) {
       onError(e);
     } finally {

packages/common/src/types.ts

@@ -1,4 +1,9 @@
-import { UUIDMetadataObject, ChannelMetadataObject, ObjectCustom } from "pubnub";
+import {
+  UUIDMetadataObject,
+  ChannelMetadataObject,
+  ObjectCustom,
+  FetchMessagesResponse,
+} from "pubnub";
 
 export type Themes = "light" | "dark" | "support" | "support-dark" | "event" | "event-dark";
 
@@ -83,3 +88,14 @@ export interface RetryOptions {
   timeout: number;
   exponentialFactor: number;
 }
+
+export interface ProperFetchMessagesResponse extends FetchMessagesResponse {
+  error: boolean;
+  error_message: string;
+  status: number;
+  more?: {
+    max: number;
+    start: string;
+    url: string;
+  };
+}

packages/react-native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubnub/react-native-chat-components",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "PubNub Chat Components is a development kit of React Native components that aims to help you to easily build Chat applications using PubNub infrastructure. It removes the complexicity of picking an adequate Chat engine, learning its APIs and dealing with its low-level internals. As the same time it allows you to create apps of various use cases, with different functionalities and customizable looks.",
   "author": "PubNub <[email protected]>",
   "main": "dist/index.js",

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pubnub/react-chat-components",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "PubNub Chat Components is a development kit of React components that aims to help you to easily build Chat applications using PubNub infrastructure. It removes the complexicity of picking an adequate Chat engine, learning its APIs and dealing with its low-level internals. As the same time it allows you to create apps of various use cases, with different functionalities and customizable looks.",
   "author": "PubNub <[email protected]>",
   "main": "dist/index.js",

packages/react/test/message-list.test.tsx

@@ -34,7 +34,7 @@ describe("Message List", () => {
     render(<MessageList welcomeMessages={message} />);
 
     expect(screen.getByText("Welcome")).toBeVisible();
-    expect(screen.getByText("11:25 AM")).toBeVisible();
+    expect(screen.getByText(/11:25/)).toBeVisible();
   });
 
   test("renders messages with custom message renderer", async () => {
@@ -52,7 +52,7 @@ describe("Message List", () => {
     );
 
     expect(screen.getByText("Custom Welcome")).toBeVisible();
-    expect(screen.queryByText("11:25 AM")).not.toBeInTheDocument();
+    expect(screen.queryByText(/11:25/)).not.toBeInTheDocument();
   });
 
   test("renders messages with custom bubble renderer", async () => {
@@ -70,7 +70,7 @@ describe("Message List", () => {
     );
 
     expect(screen.getByText("Custom Welcome")).toBeVisible();
-    expect(screen.getByText("11:25 AM")).toBeVisible();
+    expect(screen.getByText(/11:25/)).toBeVisible();
   });
 
   test("renders extra actions", async () => {

samples/react-native/mobile-chat/screens/chat.tsx

@@ -16,7 +16,7 @@ export function ChatScreen(): JSX.Element {
         behavior={Platform.OS === "ios" ? "padding" : undefined}
       >
         <MessageList
-          fetchMessages={20}
+          fetchMessages={25}
           // extraActionsRenderer={(msg) => <Button title="EA" onPress={() => console.log(msg)} />}
           // filter={(msg) => msg.message.text === "3"}
           // messageRenderer={(env) => <Text>{env.message.message.text}</Text>}

samples/react/group-chat/src/moderated-chat.tsx

@@ -299,7 +299,7 @@ export default function ModeratedChat(): JSX.Element {
               ) : (
                 <>
                   <MessageList
-                    fetchMessages={20}
+                    fetchMessages={25}
                     enableReactions={!isUserMuted}
                     reactionsPicker={
                       isUserMuted ? undefined : <Picker data={pickerData} theme={theme} />