stream-chat-react-native-core 5.44.2 → 6.0.0-beta.1

package/src/components/Channel/hooks/useCreateMessagesContext.ts

@@ -6,7 +6,7 @@ import type { DefaultStreamChatGenerics } from '../../../types/types';
 export const useCreateMessagesContext = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
-  additionalTouchableProps,
+  additionalPressableProps,
   Attachment,
   AttachmentActions,
   AudioAttachment,
@@ -32,7 +32,6 @@ export const useCreateMessagesContext = <
   Giphy,
   giphyVersion,
   handleBan,
-  handleBlock,
   handleCopy,
   handleDelete,
   handleEdit,
@@ -54,6 +53,8 @@ export const useCreateMessagesContext = <
   legacyImageViewerSwipeBehaviour,
   markdownRules,
   Message,
+  MessageActionList,
+  MessageActionListItem,
   messageActions,
   MessageAvatar,
   MessageBounce,
@@ -65,21 +66,28 @@ export const useCreateMessagesContext = <
   MessageFooter,
   MessageHeader,
   MessageList,
+  MessageMenu,
   MessagePinnedHeader,
+  MessageReactionPicker,
   MessageReplies,
   MessageRepliesAvatars,
   MessageSimple,
   MessageStatus,
   MessageSystem,
   MessageText,
+  messageTextNumberOfLines,
   MessageTimestamp,
+  MessageUserReactions,
+  MessageUserReactionsAvatar,
+  MessageUserReactionsItem,
   myMessageTheme,
   onLongPressMessage,
   onPressInMessage,
   onPressMessage,
-  OverlayReactionList,
   PollContent,
-  ReactionList,
+  ReactionListBottom,
+  reactionListPosition,
+  ReactionListTop,
   removeMessage,
   Reply,
   retrySendMessage,
@@ -103,14 +111,14 @@ export const useCreateMessagesContext = <
    */
   channelId?: string;
 }) => {
-  const additionalTouchablePropsLength = Object.keys(additionalTouchableProps || {}).length;
+  const additionalTouchablePropsLength = Object.keys(additionalPressableProps || {}).length;
   const markdownRulesLength = Object.keys(markdownRules || {}).length;
   const messageContentOrderValue = messageContentOrder.join();
-  const supportedReactionsLength = supportedReactions.length;
+  const supportedReactionsLength = supportedReactions?.length;
 
   const messagesContext: MessagesContextValue<StreamChatGenerics> = useMemo(
     () => ({
-      additionalTouchableProps,
+      additionalPressableProps,
       Attachment,
       AttachmentActions,
       AudioAttachment,
@@ -135,7 +143,6 @@ export const useCreateMessagesContext = <
       Giphy,
       giphyVersion,
       handleBan,
-      handleBlock,
       handleCopy,
       handleDelete,
       handleEdit,
@@ -157,6 +164,8 @@ export const useCreateMessagesContext = <
       legacyImageViewerSwipeBehaviour,
       markdownRules,
       Message,
+      MessageActionList,
+      MessageActionListItem,
       messageActions,
       MessageAvatar,
       MessageBounce,
@@ -168,21 +177,28 @@ export const useCreateMessagesContext = <
       MessageFooter,
       MessageHeader,
       MessageList,
+      MessageMenu,
       MessagePinnedHeader,
+      MessageReactionPicker,
       MessageReplies,
       MessageRepliesAvatars,
       MessageSimple,
       MessageStatus,
       MessageSystem,
       MessageText,
+      messageTextNumberOfLines,
       MessageTimestamp,
+      MessageUserReactions,
+      MessageUserReactionsAvatar,
+      MessageUserReactionsItem,
       myMessageTheme,
       onLongPressMessage,
       onPressInMessage,
       onPressMessage,
-      OverlayReactionList,
       PollContent,
-      ReactionList,
+      ReactionListBottom,
+      reactionListPosition,
+      ReactionListTop,
       removeMessage,
       Reply,
       retrySendMessage,

package/src/components/Channel/hooks/useCreatePaginatedMessageListContext.ts

@@ -9,9 +9,9 @@ export const useCreatePaginatedMessageListContext = <
 >({
   channelId,
   hasMore,
-  hasNoMoreRecentMessagesToLoad,
   loadingMore,
   loadingMoreRecent,
+  loadLatestMessages,
   loadMore,
   loadMoreRecent,
   messages,
@@ -25,9 +25,9 @@ export const useCreatePaginatedMessageListContext = <
   const paginatedMessagesContext: PaginatedMessageListContextValue<StreamChatGenerics> = useMemo(
     () => ({
       hasMore,
-      hasNoMoreRecentMessagesToLoad,
       loadingMore,
       loadingMoreRecent,
+      loadLatestMessages,
       loadMore,
       loadMoreRecent,
       messages,
@@ -35,14 +35,7 @@ export const useCreatePaginatedMessageListContext = <
       setLoadingMoreRecent,
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      channelId,
-      hasMore,
-      loadingMoreRecent,
-      loadingMore,
-      hasNoMoreRecentMessagesToLoad,
-      messagesStr,
-    ],
+    [channelId, hasMore, loadingMore, loadingMoreRecent, messagesStr],
   );
 
   return paginatedMessagesContext;

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

@@ -0,0 +1,246 @@
+import { useRef } from 'react';
+
+import debounce from 'lodash/debounce';
+import { Channel, ChannelState } from 'stream-chat';
+
+import { useChannelMessageDataState } from './useChannelDataState';
+
+import { ChannelContextValue } from '../../../contexts/channelContext/ChannelContext';
+import { DefaultStreamChatGenerics } from '../../../types/types';
+
+const defaultDebounceInterval = 500;
+const debounceOptions = {
+  leading: true,
+  trailing: true,
+};
+
+/**
+ * The useMessageListPagination hook handles pagination for the message list.
+ * It provides functionality to load more messages, load more recent messages, load latest messages, and load channel around a specific message.
+ *
+ * @param channel The channel object for which the message list pagination is being handled.
+ */
+export const useMessageListPagination = <
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+>({
+  channel,
+}: {
+  channel: Channel<StreamChatGenerics>;
+}) => {
+  const {
+    copyMessagesStateFromChannel,
+    jumpToLatestMessage,
+    jumpToMessageFinished,
+    loadInitialMessagesStateFromChannel,
+    loadMoreFinished: loadMoreFinishedFn,
+    loadMoreRecentFinished: loadMoreRecentFinishedFn,
+    setLoading,
+    setLoadingMore,
+    setLoadingMoreRecent,
+    state,
+  } = useChannelMessageDataState<StreamChatGenerics>(channel);
+
+  // hard limit to prevent you from scrolling faster than 1 page per 2 seconds
+  const loadMoreFinished = useRef(
+    debounce(
+      (hasMore: boolean, messages: ChannelState<StreamChatGenerics>['messages']) => {
+        loadMoreFinishedFn(hasMore, messages);
+      },
+      defaultDebounceInterval,
+      debounceOptions,
+    ),
+  ).current;
+
+  // hard limit to prevent you from scrolling faster than 1 page per 2 seconds
+  const loadMoreRecentFinished = useRef(
+    debounce(
+      (hasMore: boolean, newMessages: ChannelState<StreamChatGenerics>['messages']) => {
+        loadMoreRecentFinishedFn(hasMore, newMessages);
+      },
+      defaultDebounceInterval,
+      debounceOptions,
+    ),
+  ).current;
+
+  /**
+   * This function loads the latest messages in the channel.
+   */
+  const loadLatestMessages = async () => {
+    try {
+      setLoading(true);
+      await channel.state.loadMessageIntoState('latest');
+      loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
+      jumpToLatestMessage();
+    } 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) => {
+    if (!channel.state.messagePagination.hasPrev) {
+      return;
+    }
+
+    if (state.loadingMore || state.loadingMoreRecent) {
+      return;
+    }
+
+    setLoadingMore(true);
+    const oldestMessage = state.messages?.[0];
+    const oldestID = oldestMessage?.id;
+
+    try {
+      await channel.query({
+        messages: { id_lt: oldestID, limit },
+        watchers: { limit },
+      });
+      loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
+      setLoadingMore(false);
+    } catch (e) {
+      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) => {
+    if (!channel.state.messagePagination.hasNext) {
+      return;
+    }
+
+    if (state.loadingMore || state.loadingMoreRecent) {
+      return;
+    }
+
+    setLoadingMoreRecent(true);
+    const newestMessage = state.messages?.[state?.messages.length - 1];
+    const newestID = newestMessage?.id;
+
+    try {
+      await channel.query({
+        messages: { id_gt: newestID, limit },
+        watchers: { limit },
+      });
+      loadMoreRecentFinished(channel.state.messagePagination.hasNext, channel.state.messages);
+    } catch (e) {
+      setLoadingMoreRecent(false);
+      console.warn('Message pagination(fetching new messages) request failed with error:', e);
+      return;
+    }
+  };
+
+  /**
+   * Loads channel around a specific message
+   *
+   * @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);
+
+        if (setTargetedMessage) {
+          setTargetedMessage(messageIdToLoadAround);
+        }
+      } catch (error) {
+        console.warn(
+          'Message pagination(fetching messages in the channel around a message id) request failed with error:',
+          error,
+        );
+        return;
+      }
+    };
+
+  /**
+   * Loads channel at first unread message.
+   */
+  const loadChannelAtFirstUnreadMessage = async ({
+    limit = 25,
+    setTargetedMessage,
+  }: {
+    limit?: number;
+    setTargetedMessage?: (messageId: string) => void;
+  }) => {
+    let unreadMessageIdToScrollTo: string | undefined;
+    const unreadCount = channel.countUnread();
+    if (unreadCount === 0) return;
+    const isLatestMessageSetShown = !!channel.state.messageSets.find(
+      (set) => set.isCurrent && set.isLatest,
+    );
+
+    if (isLatestMessageSetShown && unreadCount <= channel.state.messages.length) {
+      unreadMessageIdToScrollTo =
+        channel.state.messages[channel.state.messages.length - unreadCount].id;
+      if (unreadMessageIdToScrollTo) {
+        setLoadingMore(true);
+        await channel.state.loadMessageIntoState(unreadMessageIdToScrollTo, undefined, limit);
+        loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
+        jumpToMessageFinished(channel.state.messagePagination.hasNext, unreadMessageIdToScrollTo);
+        if (setTargetedMessage) {
+          setTargetedMessage(unreadMessageIdToScrollTo);
+        }
+      }
+      return;
+    }
+    const lastReadDate = channel.lastRead();
+    let messages;
+    if (lastReadDate) {
+      try {
+        messages = (
+          await channel.query(
+            {
+              messages: {
+                created_at_around: lastReadDate,
+                limit: 30,
+              },
+              watch: true,
+            },
+            'new',
+          )
+        ).messages;
+
+        unreadMessageIdToScrollTo = messages.find(
+          (m) => lastReadDate < (m.created_at ? new Date(m.created_at) : new Date()),
+        )?.id;
+        if (unreadMessageIdToScrollTo) {
+          setLoadingMore(true);
+          await channel.state.loadMessageIntoState(unreadMessageIdToScrollTo, undefined, limit);
+          loadMoreFinished(channel.state.messagePagination.hasPrev, channel.state.messages);
+          jumpToMessageFinished(channel.state.messagePagination.hasNext, unreadMessageIdToScrollTo);
+          if (setTargetedMessage) {
+            setTargetedMessage(unreadMessageIdToScrollTo);
+          }
+        }
+      } catch (error) {
+        console.warn(
+          'Message pagination(fetching messages in the channel around unread message) request failed with error:',
+          error,
+        );
+        return;
+      }
+    } else {
+      await loadLatestMessages();
+    }
+  };
+
+  return {
+    copyMessagesStateFromChannel,
+    loadChannelAroundMessage,
+    loadChannelAtFirstUnreadMessage,
+    loadInitialMessagesStateFromChannel,
+    loadLatestMessages,
+    loadMore,
+    loadMoreRecent,
+    state,
+  };
+};

package/src/components/ChannelList/ChannelList.tsx

@@ -156,21 +156,6 @@ export type ChannelListProps<
     setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
     event: Event<StreamChatGenerics>,
   ) => void;
-  /**
-   * @deprecated use onNewMessageNotification instead
-   *
-   * Override the default listener/handler for event `notification.message_new`
-   * This event is received on channel, which is not being watched.
-   *
-   * @param setChannels Setter for internal state property - `channels`. It's created from useState() hook.
-   * @param event An [Event object](https://getstream.io/chat/docs/event_object) corresponding to `notification.message_new` event
-   *
-   * @overrideType Function
-   * */
-  onMessageNew?: (
-    setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
-    event: Event<StreamChatGenerics>,
-  ) => void;
   /**
    * Override the default listener/handler for event `message.new`
    * This event is received on channel, when a new message is added on a channel.
@@ -262,7 +247,6 @@ export const ChannelList = <
     onChannelTruncated,
     onChannelUpdated,
     onChannelVisible,
-    onMessageNew,
     onNewMessage,
     onNewMessageNotification,
     onRemovedFromChannel,
@@ -342,7 +326,6 @@ export const ChannelList = <
   });
 
   useNewMessageNotification({
-    onMessageNew,
     onNewMessageNotification,
     setChannels,
   });

package/src/components/ChannelList/ChannelListFooterLoadingIndicator.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
 import { useTheme } from '../../contexts/themeContext/ThemeContext';
-import { Spinner } from '../Spinner/Spinner';
+import { Spinner } from '../UIComponents/Spinner';
 
 const styles = StyleSheet.create({
   container: {

package/src/components/ChannelList/Skeleton.tsx

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import { StyleSheet, useWindowDimensions, View } from 'react-native';
 import Animated, {
   Easing,
+  useAnimatedProps,
   useAnimatedStyle,
   useDerivedValue,
   useSharedValue,
@@ -114,6 +115,13 @@ export const Skeleton = () => {
     } a${boneRadius} ${boneRadius} 0 1 0 0 -${boneHeight}z`;
   }, []);
 
+  const svgAnimatedProps = useAnimatedProps(
+    () => ({
+      d: d.value,
+    }),
+    [d],
+  );
+
   return (
     <View
       style={[styles.container, { borderBottomColor: border }, container]}
@@ -140,7 +148,7 @@ export const Skeleton = () => {
         </Svg>
       </Animated.View>
       <Svg height={height} width={width}>
-        <Path d={d.value} fill={maskFillColor || white_snow} />
+        <Path {...svgAnimatedProps} fill={maskFillColor || white_snow} />
       </Svg>
     </View>
   );

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

@@ -356,11 +356,11 @@ describe('ChannelList', () => {
         });
       });
 
-      it('should call the `onMessageNew` function prop, if provided', async () => {
-        const onMessageNew = jest.fn();
+      it('should call the `onNewMessage` function prop, if provided', async () => {
+        const onNewMessage = jest.fn();
         render(
           <Chat client={chatClient}>
-            <ChannelList {...props} onMessageNew={onMessageNew} />
+            <ChannelList {...props} onNewMessage={onNewMessage} />
           </Chat>,
         );
 
@@ -368,10 +368,10 @@ describe('ChannelList', () => {
           expect(screen.getByTestId('channel-list')).toBeTruthy();
         });
 
-        act(() => dispatchNotificationMessageNewEvent(chatClient, testChannel2.channel));
+        act(() => dispatchMessageNewEvent(chatClient, testChannel2.channel));
 
         await waitFor(() => {
-          expect(onMessageNew).toHaveBeenCalledTimes(1);
+          expect(onNewMessage).toHaveBeenCalledTimes(1);
         });
       });
 

package/src/components/ChannelList/hooks/listeners/useNewMessageNotification.ts

@@ -12,10 +12,7 @@ import { getChannel } from '../../utils';
 type Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> =
   {
     setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>;
-    onMessageNew?: (
-      setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
-      event: Event<StreamChatGenerics>,
-    ) => void;
+
     onNewMessageNotification?: (
       setChannels: React.Dispatch<React.SetStateAction<Channel<StreamChatGenerics>[] | null>>,
       event: Event<StreamChatGenerics>,
@@ -25,7 +22,6 @@ type Parameters<StreamChatGenerics extends DefaultStreamChatGenerics = DefaultSt
 export const useNewMessageNotification = <
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
 >({
-  onMessageNew,
   onNewMessageNotification,
   setChannels,
 }: Parameters<StreamChatGenerics>) => {
@@ -33,12 +29,7 @@ export const useNewMessageNotification = <
 
   useEffect(() => {
     const handleEvent = async (event: Event<StreamChatGenerics>) => {
-      if (typeof onMessageNew === 'function') {
-        onMessageNew(setChannels, event);
-        console.warn(
-          'onMessageNew is deprecated and will be removed in future release. Please use onNewMessageNotification to establish the same behaviour',
-        );
-      } else if (typeof onNewMessageNotification === 'function') {
+      if (typeof onNewMessageNotification === 'function') {
         onNewMessageNotification(setChannels, event);
       } else {
         if (event.channel?.id && event.channel?.type) {

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

@@ -191,11 +191,11 @@ export const usePaginatedChannels = <
   const sortStr = useMemo(() => JSON.stringify(sort), [sort]);
 
   useEffect(() => {
-    const loadOfflineChannels = () => {
+    const loadOfflineChannels = async () => {
       if (!client?.user?.id) return;
 
       try {
-        const channelsFromDB = getChannelsForFilterSort({
+        const channelsFromDB = await getChannelsForFilterSort({
           currentUserId: client.user.id,
           filters,
           sort,
@@ -212,9 +212,12 @@ export const usePaginatedChannels = <
         }
       } catch (e) {
         console.warn('Failed to get channels from database: ', e);
+        return false;
       }
 
       setActiveQueryType(null);
+
+      return true;
     };
 
     let listener: ReturnType<typeof DBSyncManager.onSyncStatusChange>;
@@ -223,20 +226,24 @@ export const usePaginatedChannels = <
       // and then call queryChannels to ensure any new channels are added to UI.
       listener = DBSyncManager.onSyncStatusChange(async (syncStatus) => {
         if (syncStatus) {
-          loadOfflineChannels();
-          await reloadList();
-          setForceUpdate((u) => u + 1);
+          const loadingChannelsSucceeded = await loadOfflineChannels();
+          if (loadingChannelsSucceeded) {
+            await reloadList();
+            setForceUpdate((u) => u + 1);
+          }
         }
       });
       // On start, load the channels from local db.
-      loadOfflineChannels();
-
-      // If db is already synced (sync api and pending api calls), then
-      // right away call queryChannels.
-      const dbSyncStatus = DBSyncManager.getSyncStatus();
-      if (dbSyncStatus) {
-        reloadList();
-      }
+      loadOfflineChannels().then((success) => {
+        // If db is already synced (sync api and pending api calls), then
+        // right away call queryChannels.
+        if (success) {
+          const dbSyncStatus = DBSyncManager.getSyncStatus();
+          if (dbSyncStatus) {
+            reloadList();
+          }
+        }
+      });
     } else {
       listener = client.on('connection.changed', async (event) => {
         if (event.online) {