hide deleted messages and handle DateSeparator

Author: DanC5

src/components/MessageList/MessageList.js

@@ -238,6 +238,7 @@ class MessageList extends PureComponent {
             EmptyStateIndicator={this.props.EmptyStateIndicator}
             HeaderComponent={this.props.HeaderComponent}
             headerPosition={this.props.headerPosition}
+            hideDeletedMessages={this.props.hideDeletedMessages}
             messages={this.props.messages}
             MessageSystem={this.props.MessageSystem}
             noGroupByUser={this.props.noGroupByUser}
@@ -322,6 +323,8 @@ MessageList.propTypes = {
   dateSeparator: PropTypes.elementType,
   /** Disables the injection of date separator components, defaults to false */
   disableDateSeparator: PropTypes.bool,
+  /** Hides the MessageDeleted components from the list, defaults to false */
+  hideDeletedMessages: PropTypes.bool,
   /** Turn off grouping of messages by user */
   noGroupByUser: PropTypes.bool,
   /** render HTML instead of markdown. Posting HTML is only allowed server-side */

src/components/MessageList/MessageListInner.js

@@ -35,13 +35,18 @@ const getReadStates = (messages, read) => {
   return readData;
 };
 
-const insertDates = (messages, lastRead, userID) => {
+const insertDates = (messages, lastRead, userID, hideDeletedMessages) => {
   let unread = false;
+  let lastDateSeparator;
   const newMessages = [];
 
   for (let i = 0, l = messages.length; i < l; i += 1) {
     const message = messages[i];
 
+    if (hideDeletedMessages && message.type === 'deleted') {
+      continue;
+    }
+
     if (message.type === 'message.read') {
       newMessages.push(message);
       continue;
@@ -56,19 +61,27 @@ const insertDates = (messages, lastRead, userID) => {
 
     if (!unread) {
       unread = lastRead && new Date(lastRead) < message.created_at;
-      // userId check makes sure New is not shown for current user messages
-      if (unread && message.user.id !== userID)
+
+      // do not show date separator for current user's messages
+      if (unread && message.user.id !== userID) {
         newMessages.push({
           type: 'message.date',
           date: message.created_at,
           unread,
         });
+      }
     }
 
     if (
-      (i === 0 || messageDate !== prevMessageDate) &&
-      newMessages?.[newMessages.length - 1]?.type !== 'message.date' // prevent two subsequent DateSeparator
+      (i === 0 ||
+        messageDate !== prevMessageDate ||
+        (hideDeletedMessages &&
+          messages[i - 1]?.type === 'deleted' &&
+          lastDateSeparator !== messageDate)) &&
+      newMessages?.[newMessages.length - 1]?.type !== 'message.date' // do not show two date separators in a row
     ) {
+      lastDateSeparator = messageDate;
+
       newMessages.push(
         { type: 'message.date', date: message.created_at },
         message,
@@ -188,6 +201,7 @@ const MessageListInner = (props) => {
     EmptyStateIndicator,
     HeaderComponent,
     headerPosition,
+    hideDeletedMessages = false,
     internalInfiniteScrollProps,
     internalMessageProps,
     messages,
@@ -205,7 +219,7 @@ const MessageListInner = (props) => {
     const messageWithDates =
       disableDateSeparator || threadList
         ? messages
-        : insertDates(messages, lastRead, client.userID);
+        : insertDates(messages, lastRead, client.userID, hideDeletedMessages);
 
     if (HeaderComponent) return insertIntro(messageWithDates, headerPosition);
 
@@ -215,6 +229,7 @@ const MessageListInner = (props) => {
     disableDateSeparator,
     HeaderComponent,
     headerPosition,
+    hideDeletedMessages,
     lastRead,
     messages,
     threadList,

types/index.d.ts

@@ -592,6 +592,7 @@ export interface MessageListProps {
   dateSeparator?: React.ElementType<DateSeparatorProps>;
   DateSeparator?: React.ElementType<DateSeparatorProps>;
   disableDateSeparator?: boolean;
+  hideDeletedMessages?: boolean;
   /** Turn off grouping of messages by user */
   noGroupByUser?: boolean;
   /** Weather its a thread of no. Default - false  */