Merge pull request #1088 from GetStream/vml-grouping-update

Update VML message grouping logic

Author: DanC5

CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## [6.4.9](https://github.com/GetStream/stream-chat-react/releases/tag/v6.4.9) 2021-08-02
+
+### Feature
+
+- Add `defaultLanguage` prop to `Chat` component to specify fallback language for translation of UI components [#1086](https://github.com/GetStream/stream-chat-react/pull/1086)
+
+### Chore
+- Optimize `VirtualizedMessageList` message grouping and rendering logic [#1088](https://github.com/GetStream/stream-chat-react/pull/1088)
+
 ## [6.4.8](https://github.com/GetStream/stream-chat-react/releases/tag/v6.4.8) 2021-07-30
 
 ### Feature

docusaurus/docs/React/contexts/message-context.mdx

@@ -75,6 +75,14 @@ Function that returns an array of the allowed actions on a message by the curren
 | ------------------------- |
 | () => MessageActionsArray |
 
+### groupedByUser
+
+If true, group messages sent by each user (only used in the `VirtualizedMessageList`).
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
 ### groupStyles
 
 An array of potential styles to apply to a grouped message (ex: top, bottom, single).

docusaurus/docs/React/message-components/message.mdx

@@ -129,6 +129,14 @@ pinned [message object](https://getstream.io/chat/docs/javascript/message_format
 | ---------------------------------- |
 | (message: StreamMessage) => string |
 
+### groupedByUser
+
+If true, group messages sent by each user (only used in the `VirtualizedMessageList`).
+
+| Type    | Default |
+| ------- | ------- |
+| boolean | false   |
+
 ### groupStyles
 
 An array of potential styles to apply to a grouped message (ex: top, bottom, single).

src/components/Message/FixedHeightMessage.tsx

@@ -70,11 +70,19 @@ const UnMemoizedFixedHeightMessage = <
 >(
   props: FixedHeightMessageProps<At, Ch, Co, Ev, Me, Re, Us>,
 ) => {
-  const { groupedByUser, message: propMessage } = props;
+  const { groupedByUser: propGroupedByUser, message: propMessage } = props;
 
   const { theme } = useChatContext<At, Ch, Co, Ev, Me, Re, Us>();
 
-  const { message: contextMessage } = useMessageContext<At, Ch, Co, Ev, Me, Re, Us>();
+  const { groupedByUser: contextGroupedByUser, message: contextMessage } = useMessageContext<
+    At,
+    Ch,
+    Co,
+    Ev,
+    Me,
+    Re,
+    Us
+  >();
 
   const { MessageDeleted = DefaultMessageDeleted } = useComponentContext<
     At,
@@ -85,8 +93,10 @@ const UnMemoizedFixedHeightMessage = <
     Re,
     Us
   >();
+
   const { userLanguage } = useTranslationContext();
 
+  const groupedByUser = propGroupedByUser !== undefined ? propGroupedByUser : contextGroupedByUser;
   const message = propMessage || contextMessage;
 
   const handleAction = useActionHandler(message);

src/components/Message/Message.tsx

@@ -80,6 +80,7 @@ const MessageWithContext = <
 ) => {
   const {
     canPin,
+    groupedByUser,
     Message: propMessage,
     message,
     messageActions = Object.keys(MESSAGE_ACTIONS),
@@ -153,7 +154,8 @@ const MessageWithContext = <
 
   return (
     <MessageProvider value={messageContextValue}>
-      <MessageUIComponent />
+      <MessageUIComponent groupedByUser={groupedByUser} />
+      {/* TODO - remove prop in next major release, maintains VML backwards compatibility */}
     </MessageProvider>
   );
 };
@@ -245,6 +247,7 @@ export const Message = <
       customMessageActions={props.customMessageActions}
       disableQuotedMessages={props.disableQuotedMessages}
       formatDate={props.formatDate}
+      groupedByUser={props.groupedByUser}
       groupStyles={props.groupStyles}
       handleAction={handleAction}
       handleDelete={handleDelete}

src/components/MessageList/VirtualizedMessageList.tsx

@@ -218,19 +218,13 @@ const VirtualizedMessageListWithContext = <
         return <MessageSystem message={message} />;
       }
 
+      const groupedByUser =
+        shouldGroupByUser &&
+        streamMessageIndex > 0 &&
+        message.user?.id === messageList[streamMessageIndex - 1].user?.id;
+
       return (
-        <Message
-          message={message}
-          Message={() => (
-            <MessageUIComponent
-              groupedByUser={
-                shouldGroupByUser &&
-                streamMessageIndex > 0 &&
-                message.user?.id === messageList[streamMessageIndex - 1].user?.id
-              }
-            />
-          )}
-        />
+        <Message groupedByUser={groupedByUser} message={message} Message={MessageUIComponent} />
       );
     },
     [customMessageRenderer, shouldGroupByUser, numItemsPrepended],

src/context/MessageContext.tsx

@@ -105,6 +105,8 @@ export type MessageContextValue<
   customMessageActions?: CustomMessageActions<At, Ch, Co, Ev, Me, Re, Us>;
   /** Override the default formatting of the date. This is a function that has access to the original date object, returns a string  */
   formatDate?: (date: Date) => string;
+  /** If true, group messages sent by each user (only used in the `VirtualizedMessageList`) */
+  groupedByUser?: boolean;
   /** A list of styles to apply to this message, ie. top, bottom, single */
   groupStyles?: GroupStyle[];
   /** Whether the threaded message is the first in the thread list */