stream-chat-react-native-core 3.9.0-next.1 → 3.9.0-next.5

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

@@ -24,10 +24,12 @@ export const useCreateChannelContext = <
   channel,
   disabled,
   EmptyStateIndicator,
+  enableMessageGroupingByUser,
   enforceUniqueReaction,
   error,
   giphyEnabled,
   hideDateSeparators,
+  hideStickyDateHeader,
   isAdmin,
   isModerator,
   isOwner,
@@ -64,10 +66,12 @@ export const useCreateChannelContext = <
       channel,
       disabled,
       EmptyStateIndicator,
+      enableMessageGroupingByUser,
       enforceUniqueReaction,
       error,
       giphyEnabled,
       hideDateSeparators,
+      hideStickyDateHeader,
       isAdmin,
       isModerator,
       isOwner,

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

@@ -37,6 +37,7 @@ export const useCreateMessagesContext = <
   disableTypingIndicator,
   dismissKeyboardOnMessageTouch,
   editMessage,
+  enableMessageGroupingByUser,
   FileAttachment,
   FileAttachmentGroup,
   FileAttachmentIcon,
@@ -59,6 +60,7 @@ export const useCreateMessagesContext = <
   initialScrollToFirstUnreadMessage,
   InlineDateSeparator,
   InlineUnreadIndicator,
+  legacyImageViewerSwipeBehaviour,
   markdownRules,
   Message,
   messageActions,
@@ -130,6 +132,7 @@ export const useCreateMessagesContext = <
       disableTypingIndicator,
       dismissKeyboardOnMessageTouch,
       editMessage,
+      enableMessageGroupingByUser,
       FileAttachment,
       FileAttachmentGroup,
       FileAttachmentIcon,
@@ -152,6 +155,7 @@ export const useCreateMessagesContext = <
       initialScrollToFirstUnreadMessage,
       InlineDateSeparator,
       InlineUnreadIndicator,
+      legacyImageViewerSwipeBehaviour,
       markdownRules,
       Message,
       messageActions,

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

@@ -57,7 +57,6 @@ export const usePaginatedChannels = <
   const lastRefresh = useRef(Date.now());
   const [loadingChannels, setLoadingChannels] = useState(false);
   const [loadingNextPage, setLoadingNextPage] = useState(false);
-  const [offset, setOffset] = useState(0);
   const [refreshing, setRefreshing] = useState(false);
 
   const queryChannels = async (queryType = '', retryCount = 0): Promise<void> => {
@@ -73,7 +72,7 @@ export const usePaginatedChannels = <
 
     const newOptions = {
       limit: options?.limit ?? MAX_QUERY_CHANNELS_LIMIT,
-      offset: queryType === 'reload' || queryType === 'refresh' ? 0 : offset,
+      offset: queryType === 'reload' || queryType === 'refresh' ? 0 : channels.length,
       ...options,
     };
 
@@ -89,7 +88,6 @@ export const usePaginatedChannels = <
 
       setChannels(newChannels);
       setHasNextPage(channelQueryResponse.length >= newOptions.limit);
-      setOffset(newChannels.length);
       setError(false);
     } catch (err) {
       await wait(2000);

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 
 import { useAppStateListener } from '../../../hooks/useAppStateListener';
 import { NetInfo } from '../../../native';
@@ -41,22 +41,23 @@ export const useIsOnline = <
 
   const clientExits = !!client;
 
-  const onBackground = closeConnectionOnBackground
-    ? () => {
-        for (const cid in client.activeChannels) {
-          const channel = client.activeChannels[cid];
-          channel?.state.setIsUpToDate(false);
-        }
-        client.closeConnection();
-        setIsOnline(false);
-      }
-    : undefined;
+  const onBackground = useCallback(() => {
+    if (!closeConnectionOnBackground) return;
 
-  const onForeground = closeConnectionOnBackground
-    ? () => {
-        client.openConnection();
-      }
-    : undefined;
+    for (const cid in client.activeChannels) {
+      const channel = client.activeChannels[cid];
+      channel?.state.setIsUpToDate(false);
+    }
+
+    client.closeConnection();
+    setIsOnline(false);
+  }, [closeConnectionOnBackground, client]);
+
+  const onForeground = useCallback(() => {
+    if (!closeConnectionOnBackground) return;
+
+    client.openConnection();
+  }, [closeConnectionOnBackground, client]);
 
   useAppStateListener(onForeground, onBackground);
 

package/src/components/KeyboardCompatibleView/KeyboardCompatibleView.tsx

@@ -11,6 +11,7 @@ import {
   LayoutAnimation,
   LayoutChangeEvent,
   LayoutRectangle,
+  NativeEventSubscription,
   Platform,
   ScreenRect,
   StatusBar,
@@ -42,6 +43,7 @@ export class KeyboardCompatibleView extends React.Component<
   _frame: LayoutRectangle | null = null;
   _keyboardEvent: KeyboardEvent | null = null;
   _subscriptions: EmitterSubscription[] = [];
+  _appStateSubscription: NativeEventSubscription | null = null;
   viewRef: React.RefObject<View>;
   _initialFrameHeight = 0;
   constructor(props: KeyboardAvoidingViewProps) {
@@ -178,12 +180,17 @@ export class KeyboardCompatibleView extends React.Component<
   };
 
   componentDidMount() {
-    AppState.addEventListener('change', this._handleAppStateChange);
+    this._appStateSubscription = AppState.addEventListener('change', this._handleAppStateChange);
     this.setKeyboardListeners();
   }
 
   componentWillUnmount() {
-    AppState.removeEventListener('change', this._handleAppStateChange);
+    // Following if-else condition to avoid deprecated warning coming RN 0.65
+    if (this._appStateSubscription?.remove) {
+      this._appStateSubscription?.remove();
+    } else {
+      AppState.removeEventListener('change', this._handleAppStateChange);
+    }
     this.unsetKeyboardListeners();
   }
 

package/src/components/Message/MessageSimple/MessageSimple.tsx

@@ -43,7 +43,7 @@ export type MessageSimplePropsWithContext<
 > &
   Pick<
     MessagesContextValue<At, Ch, Co, Ev, Me, Re, Us>,
-    'MessageAvatar' | 'MessageContent' | 'ReactionList'
+    'enableMessageGroupingByUser' | 'MessageAvatar' | 'MessageContent' | 'ReactionList'
   >;
 
 const MessageSimpleWithContext = <
@@ -60,6 +60,7 @@ const MessageSimpleWithContext = <
   const {
     alignment,
     channel,
+    enableMessageGroupingByUser,
     groupStyles,
     hasReactions,
     message,
@@ -89,7 +90,11 @@ const MessageSimpleWithContext = <
         styles.container,
         {
           justifyContent: alignment === 'left' ? 'flex-start' : 'flex-end',
-          marginBottom: hasMarginBottom ? (isVeryLastMessage ? 30 : 8) : 0,
+          marginBottom: hasMarginBottom
+            ? isVeryLastMessage && enableMessageGroupingByUser
+              ? 30
+              : 8
+            : 0,
           marginTop: showReactions ? 2 : 0,
         },
         container,
@@ -211,7 +216,7 @@ export const MessageSimple = <
 ) => {
   const { alignment, channel, groupStyles, hasReactions, message } =
     useMessageContext<At, Ch, Co, Ev, Me, Re, Us>();
-  const { MessageAvatar, MessageContent, ReactionList } =
+  const { enableMessageGroupingByUser, MessageAvatar, MessageContent, ReactionList } =
     useMessagesContext<At, Ch, Co, Ev, Me, Re, Us>();
 
   return (
@@ -219,6 +224,7 @@ export const MessageSimple = <
       {...{
         alignment,
         channel,
+        enableMessageGroupingByUser,
         groupStyles,
         hasReactions,
         message,

package/src/components/MessageList/MessageList.tsx

@@ -131,6 +131,7 @@ type MessageListPropsWithContext<
     | 'channel'
     | 'disabled'
     | 'EmptyStateIndicator'
+    | 'hideStickyDateHeader'
     | 'loadChannelAtMessage'
     | 'loading'
     | 'LoadingIndicator'
@@ -158,6 +159,7 @@ type MessageListPropsWithContext<
     | 'initialScrollToFirstUnreadMessage'
     | 'InlineDateSeparator'
     | 'InlineUnreadIndicator'
+    | 'legacyImageViewerSwipeBehaviour'
     | 'Message'
     | 'ScrollToBottomButton'
     | 'MessageSystem'
@@ -264,10 +266,12 @@ const MessageListWithContext = <
     FlatList,
     FooterComponent = LoadingMoreIndicator,
     HeaderComponent = InlineLoadingMoreRecentIndicator,
+    hideStickyDateHeader,
     initialScrollToFirstUnreadMessage,
     InlineDateSeparator,
     InlineUnreadIndicator,
     inverted = true,
+    legacyImageViewerSwipeBehaviour,
     loadChannelAtMessage,
     loading,
     LoadingIndicator,
@@ -410,7 +414,7 @@ const MessageListWithContext = <
    */
   const onViewableItemsChanged = useRef(
     ({ viewableItems }: { viewableItems: ViewToken[] | undefined }) => {
-      if (viewableItems) {
+      if (viewableItems && !hideStickyDateHeader) {
         updateStickyHeaderDateIfNeeded(viewableItems);
       }
       setInitialScrollIfNeeded();
@@ -427,7 +431,26 @@ const MessageListWithContext = <
   }, [disabled]);
 
   useEffect(() => {
-    if (!loading && channel && channel.countUnread() <= scrollToFirstUnreadThreshold) {
+    /**
+     * 1. !initialScrollToFirstUnreadMessage && channel.countUnread() > 0
+     *
+     *    In this case MessageList won't scroll to first unread message when opened, so we can mark
+     *    the channel as read right after opening.
+     *
+     * 2. initialScrollToFirstUnreadMessage && channel.countUnread() <= scrollToFirstUnreadThreshold
+     *
+     *    In this case MessageList will be opened to first unread message.
+     *    But if there are not enough (scrollToFirstUnreadThreshold) unread messages, then MessageList
+     *    won't need to scroll up. So we can safely mark the channel as read right after opening.
+     */
+    const shouldMarkReadOnFirstLoad =
+      !loading &&
+      channel &&
+      ((!initialScrollToFirstUnreadMessage && channel.countUnread() > 0) ||
+        (initialScrollToFirstUnreadMessage &&
+          channel.countUnread() <= scrollToFirstUnreadThreshold));
+
+    if (shouldMarkReadOnFirstLoad) {
       markRead();
     }
   }, [loading]);
@@ -785,44 +808,58 @@ const MessageListWithContext = <
     [messageListLengthAfterUpdate],
   );
 
-  const messagesWithImages = messageList.filter((message) => {
-    if (!message.deleted_at && message.attachments) {
-      return message.attachments.some(
-        (attachment) =>
-          attachment.type === 'image' &&
-          !attachment.title_link &&
-          !attachment.og_scrape_url &&
-          (attachment.image_url || attachment.thumb_url),
-      );
-    }
-    return false;
-  });
+  const messagesWithImages =
+    legacyImageViewerSwipeBehaviour &&
+    messageList.filter((message) => {
+      if (!message.deleted_at && message.attachments) {
+        return message.attachments.some(
+          (attachment) =>
+            attachment.type === 'image' &&
+            !attachment.title_link &&
+            !attachment.og_scrape_url &&
+            (attachment.image_url || attachment.thumb_url),
+        );
+      }
+      return false;
+    });
 
   /**
    * This is for the useEffect to run again in the case that a message
    * gets edited with more or the same number of images
    */
-  const imageString = messagesWithImages
-    .map((message) =>
-      message.attachments
-        ?.map((attachment) => attachment.image_url || attachment.thumb_url || '')
-        .join(),
-    )
-    .join();
-
-  const numberOfMessagesWithImages = messagesWithImages.length;
+  const imageString =
+    legacyImageViewerSwipeBehaviour &&
+    messagesWithImages &&
+    messagesWithImages
+      .map((message) =>
+        message.attachments
+          ?.map((attachment) => attachment.image_url || attachment.thumb_url || '')
+          .join(),
+      )
+      .join();
+
+  const numberOfMessagesWithImages =
+    legacyImageViewerSwipeBehaviour && messagesWithImages && messagesWithImages.length;
   const threadExists = !!thread;
+
   useEffect(() => {
-    if ((threadList && thread) || (!threadList && !thread)) {
-      setImages(messagesWithImages);
+    if (legacyImageViewerSwipeBehaviour && ((threadList && thread) || (!threadList && !thread))) {
+      setImages(messagesWithImages as MessageType<At, Ch, Co, Ev, Me, Re, Us>[]);
     }
-  }, [imageString, numberOfMessagesWithImages, threadExists, threadList]);
+  }, [
+    imageString,
+    legacyImageViewerSwipeBehaviour,
+    numberOfMessagesWithImages,
+    threadExists,
+    threadList,
+  ]);
 
   const stickyHeaderFormatDate =
     stickyHeaderDate?.getFullYear() === new Date().getFullYear() ? 'MMM D' : 'MMM D, YYYY';
-  const tStickyHeaderDate = stickyHeaderDate ? tDateTimeParser(stickyHeaderDate) : null;
+  const tStickyHeaderDate =
+    stickyHeaderDate && !hideStickyDateHeader ? tDateTimeParser(stickyHeaderDate) : null;
   const stickyHeaderDateToRender =
-    tStickyHeaderDate === null
+    tStickyHeaderDate === null || hideStickyDateHeader
       ? null
       : isDayOrMoment(tStickyHeaderDate)
       ? tStickyHeaderDate.format(stickyHeaderFormatDate)
@@ -943,7 +980,9 @@ export const MessageList = <
     channel,
     disabled,
     EmptyStateIndicator,
+    enableMessageGroupingByUser,
     error,
+    hideStickyDateHeader,
     loadChannelAtMessage,
     loading,
     LoadingIndicator,
@@ -965,6 +1004,7 @@ export const MessageList = <
     initialScrollToFirstUnreadMessage,
     InlineDateSeparator,
     InlineUnreadIndicator,
+    legacyImageViewerSwipeBehaviour,
     Message,
     MessageSystem,
     myMessageTheme,
@@ -987,11 +1027,14 @@ export const MessageList = <
         disabled,
         disableTypingIndicator,
         EmptyStateIndicator,
+        enableMessageGroupingByUser,
         error,
         FlatList,
+        hideStickyDateHeader,
         initialScrollToFirstUnreadMessage,
         InlineDateSeparator,
         InlineUnreadIndicator,
+        legacyImageViewerSwipeBehaviour,
         loadChannelAtMessage,
         loading,
         LoadingIndicator,
@@ -1021,6 +1064,7 @@ export const MessageList = <
         TypingIndicatorContainer,
       }}
       {...props}
+      noGroupByUser={!enableMessageGroupingByUser || props.noGroupByUser}
     />
   );
 };

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

@@ -116,7 +116,7 @@ export const useMessageList = <
     .map((msg) => ({
       ...msg,
       dateSeparator: dateSeparators[msg.id] || undefined,
-      groupStyles: messageGroupStyles[msg.id] || [],
+      groupStyles: messageGroupStyles[msg.id] || ['single'],
       readBy: msg.id ? readData[msg.id] || false : false,
     }));
 

package/src/components/MessageList/utils/getGroupStyles.ts

@@ -53,6 +53,9 @@ export const getGroupStyles = <
     noGroupByUser,
     userId,
   } = params;
+
+  if (noGroupByUser) return {};
+
   const messageGroupStyles: { [key: string]: GroupType[] } = {};
 
   const messagesFilteredForNonUser = messages.filter(
@@ -128,14 +131,6 @@ export const getGroupStyles = <
       }
     }
 
-    /**
-     * If noGroupByUser set add the key for single
-     */
-    if (noGroupByUser) {
-      groupStyles.splice(0, groupStyles.length);
-      groupStyles.push('single');
-    }
-
     if (message.id) {
       messageGroupStyles[message.id] = groupStyles;
     }

package/src/contexts/channelContext/ChannelContext.tsx

@@ -53,6 +53,7 @@ export type ChannelContextValue<
    * Hide inline date separators on channel
    */
   hideDateSeparators: boolean;
+  hideStickyDateHeader: boolean;
   /**
    * Returns true if the current user has admin privileges
    */
@@ -164,6 +165,7 @@ export type ChannelContextValue<
    */
   channel?: Channel<At, Ch, Co, Ev, Me, Re, Us>;
   disabled?: boolean;
+  enableMessageGroupingByUser?: boolean;
   lastRead?: Date;
   /**
    * Maximum time in milliseconds that should occur between messages

package/src/contexts/messagesContext/MessagesContext.tsx

@@ -97,6 +97,7 @@ export type MessagesContextValue<
   DateHeader: React.ComponentType<DateHeaderProps>;
   /** Should keyboard be dismissed when messaged is touched */
   dismissKeyboardOnMessageTouch: boolean;
+  enableMessageGroupingByUser: boolean;
   /**
    * UI component to display File type attachment.
    * Defaults to: [FileAttachment](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/Attachment/FileAttachment.tsx)
@@ -326,6 +327,7 @@ export type MessagesContextValue<
   handleRetry?: (message: MessageType<At, Ch, Co, Ev, Me, Re, Us>) => Promise<void>;
   /** Handler to access when a thread reply action is invoked */
   handleThreadReply?: (message: MessageType<At, Ch, Co, Ev, Me, Re, Us>) => Promise<void>;
+  legacyImageViewerSwipeBehaviour?: boolean;
   /** Object specifying rules defined within simple-markdown https://github.com/Khan/simple-markdown#adding-a-simple-extension */
   markdownRules?: MarkdownRules;
   /**

package/src/hooks/useAppStateListener.ts

@@ -1,21 +1,35 @@
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { AppState, AppStateStatus } from 'react-native';
 
 export const useAppStateListener = (onForeground?: () => void, onBackground?: () => void) => {
   const [appState, setAppState] = useState(AppState.currentState);
-
-  const handleAppStateChange = (nextAppState: AppStateStatus) => {
-    if (appState === 'background' && nextAppState === 'active' && onForeground) {
-      onForeground();
-    } else if (appState.match(/active|inactive/) && nextAppState === 'background' && onBackground) {
-      onBackground();
-    }
-    setAppState(nextAppState);
-  };
+  const handleAppStateChange = useCallback(
+    (nextAppState: AppStateStatus) => {
+      if (appState === 'background' && nextAppState === 'active' && onForeground) {
+        onForeground();
+      } else if (
+        appState.match(/active|inactive/) &&
+        nextAppState === 'background' &&
+        onBackground
+      ) {
+        onBackground();
+      }
+      setAppState(nextAppState);
+    },
+    [onBackground, onForeground, appState],
+  );
 
   useEffect(() => {
-    AppState.addEventListener('change', handleAppStateChange);
+    const subscription = AppState.addEventListener('change', handleAppStateChange);
 
-    return () => AppState.removeEventListener('change', handleAppStateChange);
+    return () => {
+      // Following if-else logic is to support RN >= 0.65 and RN < 0.65 versions.
+      // https://github.com/react-native-community/releases/blob/master/CHANGELOG.md#:~:text=EventEmitter%23removeSubscription%20is%20now%20deprecated.%20(cb6cbd12f8%20by%20%40yungsters)
+      if (subscription?.remove) {
+        subscription.remove();
+      } else {
+        AppState.removeEventListener('change', handleAppStateChange);
+      }
+    };
   }, [handleAppStateChange]);
 };

package/src/version.json

@@ -1,3 +1,3 @@
 {
-  "version": "3.9.0-next.1"
+  "version": "3.9.0-next.5"
 }