stream-chat-react-native-core 6.7.3-beta.1 → 6.7.3-beta.3

package/src/components/Channel/__tests__/Channel.test.js

@@ -356,7 +356,7 @@ describe('Channel initial load useEffect', () => {
     cleanup();
   });
 
-  it('should not call channel.watch if channel is not initialized', async () => {
+  it('should still call channel.watch if we are online and DB channels are loaded', async () => {
     const messages = Array.from({ length: 10 }, (_, i) => generateMessage({ id: i }));
     const mockedChannel = generateChannelResponse({
       messages,
@@ -366,13 +366,18 @@ describe('Channel initial load useEffect', () => {
     const channel = chatClient.channel('messaging', mockedChannel.id);
     await channel.watch();
     channel.offlineMode = true;
-    channel.state = channelInitialState;
+    channel.state = {
+      ...channelInitialState,
+      messagePagination: {
+        hasPrev: true,
+      },
+    };
     const watchSpy = jest.fn();
     channel.watch = watchSpy;
 
     renderComponent({ channel });
 
-    await waitFor(() => expect(watchSpy).not.toHaveBeenCalled());
+    await waitFor(() => expect(watchSpy).toHaveBeenCalledTimes(1));
   });
 
   it("should call channel.watch if channel is initialized and it's not in offline mode", async () => {

package/src/components/Channel/hooks/useMessageListPagination.tsx

@@ -6,6 +6,7 @@ import { Channel, ChannelState, MessageResponse } from 'stream-chat';
 import { useChannelMessageDataState } from './useChannelDataState';
 
 import { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext';
+import { useStableCallback } from '../../../hooks';
 import { DefaultStreamChatGenerics } from '../../../types/types';
 import { findInMessagesByDate, findInMessagesById } from '../../../utils/utils';
 
@@ -66,7 +67,7 @@ export const useMessageListPagination = <
   /**
    * This function loads the latest messages in the channel.
    */
-  const loadLatestMessages = async () => {
+  const loadLatestMessages = useStableCallback(async () => {
     try {
       setLoading(true);
       await channel.state.loadMessageIntoState('latest');
@@ -75,12 +76,12 @@ export const useMessageListPagination = <
     } catch (err) {
       console.warn('Loading latest messages failed with error:', err);
     }
-  };
+  });
 
   /**
    * This function loads more messages before the first message in current channel state.
    */
-  const loadMore = async (limit = 20) => {
+  const loadMore = useStableCallback(async (limit: number = 20) => {
     if (!channel.state.messagePagination.hasPrev) {
       return;
     }
@@ -104,12 +105,12 @@ export const useMessageListPagination = <
       setLoadingMore(false);
       console.warn('Message pagination(fetching old messages) request failed with error:', e);
     }
-  };
+  });
 
   /**
    * This function loads more messages after the most recent message in current channel state.
    */
-  const loadMoreRecent = async (limit = 10) => {
+  const loadMoreRecent = useStableCallback(async (limit: number = 10) => {
     if (!channel.state.messagePagination.hasNext) {
       return;
     }
@@ -133,7 +134,7 @@ export const useMessageListPagination = <
       console.warn('Message pagination(fetching new messages) request failed with error:', e);
       return;
     }
-  };
+  });
 
   /**
    * Loads channel around a specific message
@@ -141,171 +142,175 @@ export const useMessageListPagination = <
    * @param messageId If undefined, channel will be loaded at most recent message.
    */
   const loadChannelAroundMessage: ChannelContextValue<StreamChatGenerics>['loadChannelAroundMessage'] =
-    async ({ limit = 25, messageId: messageIdToLoadAround, setTargetedMessage }) => {
-      if (!messageIdToLoadAround) {
-        return;
-      }
-      setLoadingMore(true);
-      setLoading(true);
-      try {
-        await channel.state.loadMessageIntoState(messageIdToLoadAround, undefined, limit);
-        loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
-        jumpToMessageFinished(channel.state.messagePagination.hasNext, messageIdToLoadAround);
+    useStableCallback(
+      async ({ limit = 25, messageId: messageIdToLoadAround, setTargetedMessage }) => {
+        if (!messageIdToLoadAround) {
+          return;
+        }
+        setLoadingMore(true);
+        setLoading(true);
+        try {
+          await channel.state.loadMessageIntoState(messageIdToLoadAround, undefined, limit);
+          loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
+          jumpToMessageFinished(channel.state.messagePagination.hasNext, messageIdToLoadAround);
 
-        if (setTargetedMessage) {
-          setTargetedMessage(messageIdToLoadAround);
+          if (setTargetedMessage) {
+            setTargetedMessage(messageIdToLoadAround);
+          }
+        } catch (error) {
+          setLoadingMore(false);
+          setLoading(false);
+          console.warn(
+            'Message pagination(fetching messages in the channel around a message id) request failed with error:',
+            error,
+          );
+          return;
         }
-      } catch (error) {
-        setLoadingMore(false);
-        setLoading(false);
-        console.warn(
-          'Message pagination(fetching messages in the channel around a message id) request failed with error:',
-          error,
-        );
-        return;
-      }
-    };
+      },
+    );
 
   /**
    * Fetch messages around a specific timestamp.
    */
-  const fetchMessagesAround = async <
-    StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
-  >(
-    channel: Channel<StreamChatGenerics>,
-    timestamp: string,
-    limit: number,
-  ): Promise<MessageResponse<StreamChatGenerics>[]> => {
-    try {
-      const { messages } = await channel.query(
-        { messages: { created_at_around: timestamp, limit } },
-        'new',
-      );
-      return messages;
-    } catch (error) {
-      console.error('Error fetching messages around timestamp:', error);
-      throw error;
-    }
-  };
+  const fetchMessagesAround = useStableCallback(
+    async <StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics>(
+      channel: Channel<StreamChatGenerics>,
+      timestamp: string,
+      limit: number,
+    ): Promise<MessageResponse<StreamChatGenerics>[]> => {
+      try {
+        const { messages } = await channel.query(
+          { messages: { created_at_around: timestamp, limit } },
+          'new',
+        );
+        return messages;
+      } catch (error) {
+        console.error('Error fetching messages around timestamp:', error);
+        throw error;
+      }
+    },
+  );
 
   /**
    * Loads channel at first unread message.
    */
   const loadChannelAtFirstUnreadMessage: ChannelContextValue<StreamChatGenerics>['loadChannelAtFirstUnreadMessage'] =
-    async ({ channelUnreadState, limit = 25, setChannelUnreadState, setTargetedMessage }) => {
-      try {
-        if (!channelUnreadState?.unread_messages) {
-          return;
-        }
-        const { first_unread_message_id, last_read, last_read_message_id } = channelUnreadState;
-        let firstUnreadMessageId = first_unread_message_id;
-        let lastReadMessageId = last_read_message_id;
-        let isInCurrentMessageSet = false;
-        const messagesState = channel.state.messages;
+    useStableCallback(
+      async ({ channelUnreadState, limit = 25, setChannelUnreadState, setTargetedMessage }) => {
+        try {
+          if (!channelUnreadState?.unread_messages) {
+            return;
+          }
+          const { first_unread_message_id, last_read, last_read_message_id } = channelUnreadState;
+          let firstUnreadMessageId = first_unread_message_id;
+          let lastReadMessageId = last_read_message_id;
+          let isInCurrentMessageSet = false;
+          const messagesState = channel.state.messages;
 
-        // If the first unread message is already in the current message set, we don't need to load more messages.
-        if (firstUnreadMessageId) {
-          const messageIdx = findInMessagesById(messagesState, firstUnreadMessageId);
-          isInCurrentMessageSet = messageIdx !== -1;
-        }
-        // If the last read message is already in the current message set, we don't need to load more messages, and we set the first unread message id as that is what we want to operate on.
-        else if (lastReadMessageId) {
-          const messageIdx = findInMessagesById(messagesState, lastReadMessageId);
-          isInCurrentMessageSet = messageIdx !== -1;
-          firstUnreadMessageId = messageIdx > -1 ? messagesState[messageIdx + 1]?.id : undefined;
-        } else {
-          const lastReadTimestamp = last_read.getTime();
-          const { index: lastReadIdx, message: lastReadMessage } = findInMessagesByDate(
-            messagesState,
-            last_read,
-          );
-          if (lastReadMessage) {
-            lastReadMessageId = lastReadMessage.id;
-            firstUnreadMessageId = messagesState[lastReadIdx + 1].id;
-            isInCurrentMessageSet = !!firstUnreadMessageId;
+          // If the first unread message is already in the current message set, we don't need to load more messages.
+          if (firstUnreadMessageId) {
+            const messageIdx = findInMessagesById(messagesState, firstUnreadMessageId);
+            isInCurrentMessageSet = messageIdx !== -1;
+          }
+          // If the last read message is already in the current message set, we don't need to load more messages, and we set the first unread message id as that is what we want to operate on.
+          else if (lastReadMessageId) {
+            const messageIdx = findInMessagesById(messagesState, lastReadMessageId);
+            isInCurrentMessageSet = messageIdx !== -1;
+            firstUnreadMessageId = messageIdx > -1 ? messagesState[messageIdx + 1]?.id : undefined;
           } else {
-            setLoadingMore(true);
-            setLoading(true);
-            let messages;
-            try {
-              messages = await fetchMessagesAround(channel, last_read.toISOString(), limit);
-            } catch (error) {
-              setLoading(false);
-              loadMoreFinished(channel.state.messagePagination.hasPrev, messagesState);
-              console.log('Loading channel at first unread message failed with error:', error);
-              return;
-            }
+            const lastReadTimestamp = last_read.getTime();
+            const { index: lastReadIdx, message: lastReadMessage } = findInMessagesByDate(
+              messagesState,
+              last_read,
+            );
+            if (lastReadMessage) {
+              lastReadMessageId = lastReadMessage.id;
+              firstUnreadMessageId = messagesState[lastReadIdx + 1].id;
+              isInCurrentMessageSet = !!firstUnreadMessageId;
+            } else {
+              setLoadingMore(true);
+              setLoading(true);
+              let messages;
+              try {
+                messages = await fetchMessagesAround(channel, last_read.toISOString(), limit);
+              } catch (error) {
+                setLoading(false);
+                loadMoreFinished(channel.state.messagePagination.hasPrev, messagesState);
+                console.log('Loading channel at first unread message failed with error:', error);
+                return;
+              }
 
-            const firstMessageWithCreationDate = messages.find((msg) => msg.created_at);
-            if (!firstMessageWithCreationDate) {
-              loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
-              throw new Error('Failed to jump to first unread message id.');
-            }
-            const firstMessageTimestamp = new Date(
-              firstMessageWithCreationDate.created_at as string,
-            ).getTime();
+              const firstMessageWithCreationDate = messages.find((msg) => msg.created_at);
+              if (!firstMessageWithCreationDate) {
+                loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
+                throw new Error('Failed to jump to first unread message id.');
+              }
+              const firstMessageTimestamp = new Date(
+                firstMessageWithCreationDate.created_at as string,
+              ).getTime();
 
-            if (lastReadTimestamp < firstMessageTimestamp) {
-              // whole channel is unread
-              firstUnreadMessageId = firstMessageWithCreationDate.id;
-            } else {
-              const result = findInMessagesByDate(messages, last_read);
-              lastReadMessageId = result.message?.id;
+              if (lastReadTimestamp < firstMessageTimestamp) {
+                // whole channel is unread
+                firstUnreadMessageId = firstMessageWithCreationDate.id;
+              } else {
+                const result = findInMessagesByDate(messages, last_read);
+                lastReadMessageId = result.message?.id;
+              }
+              loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
             }
-            loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
           }
-        }
 
-        // If we still don't have the first and last read message id, we can't proceed.
-        if (!firstUnreadMessageId && !lastReadMessageId) {
-          throw new Error('Failed to jump to first unread message id.');
-        }
+          // If we still don't have the first and last read message id, we can't proceed.
+          if (!firstUnreadMessageId && !lastReadMessageId) {
+            throw new Error('Failed to jump to first unread message id.');
+          }
 
-        // If the first unread message is not in the current message set, we need to load message around the id.
-        if (!isInCurrentMessageSet) {
-          try {
-            setLoadingMore(true);
-            setLoading(true);
-            const targetedMessage = (firstUnreadMessageId || lastReadMessageId) as string;
-            await channel.state.loadMessageIntoState(targetedMessage, undefined, limit);
-            /**
-             * if the index of the last read message on the page is beyond the half of the page,
-             * we have arrived to the oldest page of the channel
-             */
-            const indexOfTarget = channel.state.messages.findIndex(
-              (message) => message.id === targetedMessage,
-            );
+          // If the first unread message is not in the current message set, we need to load message around the id.
+          if (!isInCurrentMessageSet) {
+            try {
+              setLoadingMore(true);
+              setLoading(true);
+              const targetedMessage = (firstUnreadMessageId || lastReadMessageId) as string;
+              await channel.state.loadMessageIntoState(targetedMessage, undefined, limit);
+              /**
+               * if the index of the last read message on the page is beyond the half of the page,
+               * we have arrived to the oldest page of the channel
+               */
+              const indexOfTarget = channel.state.messages.findIndex(
+                (message) => message.id === targetedMessage,
+              );
 
-            loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
-            firstUnreadMessageId =
-              firstUnreadMessageId ?? channel.state.messages[indexOfTarget + 1].id;
-          } catch (error) {
-            setLoading(false);
-            loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
-            console.log('Loading channel at first unread message failed with error:', error);
-            return;
+              loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
+              firstUnreadMessageId =
+                firstUnreadMessageId ?? channel.state.messages[indexOfTarget + 1].id;
+            } catch (error) {
+              setLoading(false);
+              loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
+              console.log('Loading channel at first unread message failed with error:', error);
+              return;
+            }
           }
-        }
 
-        if (!firstUnreadMessageId) {
-          throw new Error('Failed to jump to first unread message id.');
-        }
-        if (!first_unread_message_id && setChannelUnreadState) {
-          setChannelUnreadState({
-            ...channelUnreadState,
-            first_unread_message_id: firstUnreadMessageId,
-            last_read_message_id: lastReadMessageId,
-          });
-        }
+          if (!firstUnreadMessageId) {
+            throw new Error('Failed to jump to first unread message id.');
+          }
+          if (!first_unread_message_id && setChannelUnreadState) {
+            setChannelUnreadState({
+              ...channelUnreadState,
+              first_unread_message_id: firstUnreadMessageId,
+              last_read_message_id: lastReadMessageId,
+            });
+          }
 
-        jumpToMessageFinished(channel.state.messagePagination.hasNext, firstUnreadMessageId);
-        if (setTargetedMessage) {
-          setTargetedMessage(firstUnreadMessageId);
+          jumpToMessageFinished(channel.state.messagePagination.hasNext, firstUnreadMessageId);
+          if (setTargetedMessage) {
+            setTargetedMessage(firstUnreadMessageId);
+          }
+        } catch (error) {
+          console.log('Loading channel at first unread message failed with error:', error);
         }
-      } catch (error) {
-        console.log('Loading channel at first unread message failed with error:', error);
-      }
-    };
+      },
+    );
 
   return {
     copyMessagesStateFromChannel,

package/src/components/KeyboardCompatibleView/KeyboardCompatibleView.tsx

@@ -197,6 +197,8 @@ export class KeyboardCompatibleView extends React.Component<
     this.unsetKeyboardListeners();
   }
 
+  keyboardContextValue = { dismissKeyboard: this.dismissKeyboard };
+
   render() {
     const { behavior, children, contentContainerStyle, enabled, style, ...props } = this.props;
     const bottomHeight = enabled ? this.state.bottom : 0;
@@ -215,7 +217,7 @@ export class KeyboardCompatibleView extends React.Component<
           };
         }
         return (
-          <KeyboardProvider value={{ dismissKeyboard: this.dismissKeyboard }}>
+          <KeyboardProvider value={this.keyboardContextValue}>
             <View
               onLayout={this._onLayout}
               ref={this.viewRef}
@@ -229,7 +231,7 @@ export class KeyboardCompatibleView extends React.Component<
 
       case 'position':
         return (
-          <KeyboardProvider value={{ dismissKeyboard: this.dismissKeyboard }}>
+          <KeyboardProvider value={this.keyboardContextValue}>
             <View onLayout={this._onLayout} ref={this.viewRef} style={style} {...props}>
               <View
                 style={StyleSheet.compose(contentContainerStyle, {
@@ -244,7 +246,7 @@ export class KeyboardCompatibleView extends React.Component<
 
       case 'padding':
         return (
-          <KeyboardProvider value={{ dismissKeyboard: this.dismissKeyboard }}>
+          <KeyboardProvider value={this.keyboardContextValue}>
             <View
               onLayout={this._onLayout}
               ref={this.viewRef}
@@ -258,7 +260,7 @@ export class KeyboardCompatibleView extends React.Component<
 
       default:
         return (
-          <KeyboardProvider value={{ dismissKeyboard: this.dismissKeyboard }}>
+          <KeyboardProvider value={this.keyboardContextValue}>
             <View onLayout={this._onLayout} ref={this.viewRef} style={style} {...props}>
               {children}
             </View>