feat: remove props endOfGroup, firstOfGroup and groupedByUser from MessageProps

Author: MartinCupela

src/components/Message/types.ts

@@ -26,10 +26,6 @@ export type MessageProps = {
   deliveredTo?: UserResponse[];
   /** If true, disables the ability for users to quote messages, defaults to false */
   disableQuotedMessages?: boolean;
-  /** When true, the message is the last one in a group sent by a specific user (only used in the `VirtualizedMessageList`) */
-  endOfGroup?: boolean;
-  /** When true, the message is the first one in a group sent by a specific user (only used in the `VirtualizedMessageList`) */
-  firstOfGroup?: boolean;
   /** 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;
   /** Function that returns the notification text to be displayed when a delete message request fails */
@@ -50,8 +46,6 @@ export type MessageProps = {
   getMuteUserSuccessNotification?: (user: UserResponse) => string;
   /** Function that returns the notification text to be displayed when a pin message request fails */
   getPinMessageErrorNotification?: (message: LocalMessage) => 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, i.e. top, bottom, single */
   groupStyles?: GroupStyle[];
   /** Whether to highlight and focus the message on load */

src/components/MessageList/VirtualizedMessageListComponents.tsx

@@ -5,13 +5,11 @@ import type { ItemProps, ListItem } from 'react-virtuoso';
 
 import { EmptyStateIndicator as DefaultEmptyStateIndicator } from '../EmptyStateIndicator';
 import { LoadingIndicator as DefaultLoadingIndicator } from '../Loading';
-import { isMessageEdited, Message } from '../Message';
+import { Message } from '../Message';
 
 import { useComponentContext } from '../../context';
-import { getIsFirstUnreadMessage, isDateSeparatorMessage, isIntroMessage } from './utils';
-
-import type { LocalMessage } from 'stream-chat';
 import type { GroupStyle, RenderedMessage } from './utils';
+import { getIsFirstUnreadMessage, isDateSeparatorMessage, isIntroMessage } from './utils';
 import type { VirtuosoContext } from './VirtualizedMessageList';
 import type { UnknownType } from '../../types/types';
 
@@ -131,7 +129,6 @@ export const messageRenderer = (
     reactionDetailsSort,
     renderText,
     returnAllReadData,
-    shouldGroupByUser,
     showAvatar,
     sortReactionDetails,
     sortReactions,
@@ -161,27 +158,6 @@ export const messageRenderer = (
     return MessageSystem ? <MessageSystem message={message} /> : null;
   }
 
-  const maybePrevMessage = messageList[streamMessageIndex - 1] as
-    | LocalMessage
-    | undefined;
-  const maybeNextMessage = messageList[streamMessageIndex + 1] as
-    | LocalMessage
-    | undefined;
-  const groupedByUser =
-    shouldGroupByUser &&
-    streamMessageIndex > 0 &&
-    message.user?.id === maybePrevMessage?.user?.id;
-
-  // FIXME: firstOfGroup & endOfGroup should be derived from groupStyles which apply a more complex logic
-  const firstOfGroup =
-    shouldGroupByUser &&
-    (message.user?.id !== maybePrevMessage?.user?.id ||
-      (maybePrevMessage && isMessageEdited(maybePrevMessage)));
-
-  const endOfGroup =
-    shouldGroupByUser &&
-    (message.user?.id !== maybeNextMessage?.user?.id || isMessageEdited(message));
-
   const isFirstUnreadMessage = getIsFirstUnreadMessage({
     firstUnreadMessageId,
     isFirstMessage: streamMessageIndex === 0,
@@ -204,10 +180,7 @@ export const messageRenderer = (
         autoscrollToBottom={virtuosoRef.current?.autoscrollToBottom}
         closeReactionSelectorOnClick={closeReactionSelectorOnClick}
         deliveredTo={ownMessagesDeliveredToOthers[message.id] || []}
-        endOfGroup={endOfGroup}
-        firstOfGroup={firstOfGroup}
         formatDate={formatDate}
-        groupedByUser={groupedByUser}
         groupStyles={[messageGroupStyles[message.id] ?? '']}
         lastOwnMessage={lastOwnMessage}
         lastReceivedId={lastReceivedMessageId}