Merge pull request #837 from GetStream/hide-new-message-separator

Hide new message separator option

Author: DanC5

CHANGELOG.md

@@ -1,6 +1,16 @@
 # Changelog
 
 
+## [5.1.2](https://github.com/GetStream/stream-chat-react/releases/tag/v5.1.2) 2021-04-05
+
+### Feature
+
+- Provide option to hide `DateSeparator` component for new messages with the `hideNewMessageSeparator` prop on `MessageList` and `VirtualizedMessageList` components [#837](https://github.com/GetStream/stream-chat-react/pull/837)
+
+### Bug
+
+- Fix bad conditional in `useMentionsHandlers` custom hook [#836](https://github.com/GetStream/stream-chat-react/pull/836)
+
 ## [5.1.1](https://github.com/GetStream/stream-chat-react/releases/tag/v5.1.1) 2021-04-02
 
 ### Feature

src/components/MessageList/MessageList.tsx

@@ -291,6 +291,7 @@ class MessageListWithContext<
             HeaderComponent={this.props.HeaderComponent}
             headerPosition={this.props.headerPosition}
             hideDeletedMessages={this.props.hideDeletedMessages}
+            hideNewMessageSeparator={this.props.hideNewMessageSeparator}
             internalInfiniteScrollProps={{
               hasMore: this.props.hasMore,
               isLoading: this.props.loadingMore,
@@ -386,6 +387,7 @@ type PropsDrilledToMessageListInner =
   | 'HeaderComponent'
   | 'headerPosition'
   | 'hideDeletedMessages'
+  | 'hideNewMessageSeparator'
   | 'internalInfiniteScrollProps'
   | 'messages'
   | 'MessageSystem'

src/components/MessageList/MessageListInner.tsx

@@ -7,6 +7,8 @@ import { insertDates } from './utils';
 import { InfiniteScroll, InfiniteScrollProps } from '../InfiniteScrollPaginator';
 import { Message } from '../Message';
 
+import { isDate } from '../../context/TranslationContext';
+
 import type { Channel, StreamChat, UserResponse } from 'stream-chat';
 
 import type { DateSeparatorProps } from '../DateSeparator/DateSeparator';
@@ -70,6 +72,8 @@ export type MessageListInnerProps<
   headerPosition?: number;
   /** Hides the MessageDeleted components from the list, defaults to `false` */
   hideDeletedMessages?: boolean;
+  /** Hides the DateSeparator component when new messages are received in a channel that's watched but not active, defaults to `false` */
+  hideNewMessageSeparator?: boolean;
   /** Overrides the default props passed to [InfiniteScroll](https://github.com/GetStream/stream-chat-react/blob/master/src/components/InfiniteScrollPaginator/InfiniteScroll.tsx) */
   internalInfiniteScrollProps?: InfiniteScrollProps;
   /** Overrides the default props passed to [Message](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Message/Message.tsx) */
@@ -277,6 +281,7 @@ const UnMemoizedMessageListInner = <
     HeaderComponent,
     headerPosition,
     hideDeletedMessages = false,
+    hideNewMessageSeparator = false,
     internalInfiniteScrollProps,
     internalMessageProps,
     messages,
@@ -293,7 +298,14 @@ const UnMemoizedMessageListInner = <
   const enrichMessages = () => {
     const messageWithDates = threadList
       ? messages
-      : insertDates(messages, lastRead, client.userID, hideDeletedMessages, disableDateSeparator);
+      : insertDates(
+          messages,
+          lastRead,
+          client.userID,
+          hideDeletedMessages,
+          disableDateSeparator,
+          hideNewMessageSeparator,
+        );
 
     if (HeaderComponent) {
       return insertIntro(messageWithDates, headerPosition);
@@ -335,10 +347,10 @@ const UnMemoizedMessageListInner = <
   const elements = useMemo(
     () =>
       enrichedMessages.map((message) => {
-        if (message.type === 'message.date') {
+        if (message.type === 'message.date' && message.date && isDate(message.date)) {
           return (
-            <li key={`${(message.date as Date).toISOString()}-i`}>
-              <DateSeparator date={message.date as Date} unread={!!message.unread} />
+            <li key={`${message.date.toISOString()}-i`}>
+              <DateSeparator date={message.date} unread={message.unread} />
             </li>
           );
         }

src/components/MessageList/VirtualizedMessageList.tsx

@@ -34,7 +34,7 @@ import {
 } from '../Message';
 
 import { StreamMessage, useChannelContext } from '../../context/ChannelContext';
-import { useTranslationContext } from '../../context/TranslationContext';
+import { isDate, useTranslationContext } from '../../context/TranslationContext';
 
 import type { Channel, StreamChat } from 'stream-chat';
 
@@ -84,6 +84,10 @@ export type VirtualizedMessageListProps<
   disableDateSeparator?: boolean;
   /** The UI Indicator to use when MessageList or ChannelList is empty */
   EmptyStateIndicator?: React.ComponentType<EmptyStateIndicatorProps> | null;
+  /** Hides the MessageDeleted components from the list, defaults to `false` */
+  hideDeletedMessages?: boolean;
+  /** Hides the DateSeparator component when new messages are received in a channel that's watched but not active, defaults to false */
+  hideNewMessageSeparator?: boolean;
   /** Component to render at the top of the MessageList while loading new messages */
   LoadingIndicator?: React.ComponentType<LoadingIndicatorProps>;
   /** Available from [ChannelContext](https://getstream.github.io/stream-chat-react/#section-channelcontext) */
@@ -151,6 +155,8 @@ const VirtualizedMessageListWithContext = <
     DateSeparator = DefaultDateSeparator,
     EmptyStateIndicator = DefaultEmptyStateIndicator,
     hasMore,
+    hideDeletedMessages = false,
+    hideNewMessageSeparator = false,
     LoadingIndicator = DefaultLoadingIndicator,
     loadMore,
     loadingMore,
@@ -174,8 +180,25 @@ const VirtualizedMessageListWithContext = <
     if (typeof messages === 'undefined') {
       return undefined;
     }
-    return disableDateSeparator ? messages : insertDates(messages, lastRead, userID);
-  }, [messages, lastRead, disableDateSeparator, userID, messages?.length]);
+    return disableDateSeparator
+      ? messages
+      : insertDates(
+          messages,
+          lastRead,
+          userID,
+          hideDeletedMessages,
+          disableDateSeparator,
+          hideNewMessageSeparator,
+        );
+  }, [
+    disableDateSeparator,
+    hideDeletedMessages,
+    hideNewMessageSeparator,
+    lastRead,
+    messages,
+    messages?.length,
+    userID,
+  ]);
 
   const { t } = useTranslationContext();
 
@@ -201,8 +224,7 @@ const VirtualizedMessageListWithContext = <
 
       const message = messageList[streamMessageIndex];
 
-      if (message.type === 'message.date') {
-        //@ts-expect-error
+      if (message.type === 'message.date' && message.date && isDate(message.date)) {
         return <DateSeparator date={message.date} unread={message.unread} />;
       }
 

src/components/MessageList/utils.ts

@@ -1,4 +1,6 @@
 /* eslint-disable no-continue */
+import { isDate } from '../../context/TranslationContext';
+
 import type {
   DefaultAttachmentType,
   DefaultChannelType,
@@ -25,6 +27,7 @@ export const insertDates = <
   userID?: string,
   hideDeletedMessages?: boolean,
   disableDateSeparator?: boolean,
+  hideNewMessageSeparator?: boolean,
 ) => {
   let unread = false;
   let lastDateSeparator;
@@ -42,29 +45,31 @@ export const insertDates = <
       continue;
     }
 
-    //@ts-expect-error
-    const messageDate = message.created_at.toDateString();
+    const messageDate =
+      (message.created_at && isDate(message.created_at) && message.created_at.toDateString()) || '';
     let prevMessageDate = messageDate;
+    const previousMessage = messages[i - 1];
 
-    if (i > 0 && !disableDateSeparator) {
-      //@ts-expect-error
-      prevMessageDate = messages[i - 1].created_at.toDateString();
+    if (
+      i > 0 &&
+      !disableDateSeparator &&
+      previousMessage.created_at &&
+      isDate(previousMessage.created_at)
+    ) {
+      prevMessageDate = previousMessage.created_at.toDateString();
     }
 
-    if (!unread) {
-      //@ts-expect-error
-      unread = lastRead && new Date(lastRead) < message.created_at;
+    if (!unread && !hideNewMessageSeparator) {
+      unread = (lastRead && message.created_at && new Date(lastRead) < message.created_at) || false;
 
       // do not show date separator for current user's messages
-      //@ts-expect-error
-      if (!disableDateSeparator && unread && message.user.id !== userID) {
-        //@ts-expect-error
+      if (!disableDateSeparator && unread && message.user?.id !== userID) {
         newMessages.push({
           date: message.created_at,
           id: message.id,
           type: 'message.date',
           unread,
-        });
+        } as StreamMessage<At, Ch, Co, Ev, Me, Re, Us>);
       }
     }
 
@@ -80,12 +85,11 @@ export const insertDates = <
       lastDateSeparator = messageDate;
 
       newMessages.push(
-        //@ts-expect-error
         {
           date: message.created_at,
           id: message.id,
           type: 'message.date',
-        },
+        } as StreamMessage<At, Ch, Co, Ev, Me, Re, Us>,
         message,
       );
     } else {

types/types.ts

@@ -25,6 +25,7 @@ export type DefaultCommandType = LiteralStringForUnion;
 export type DefaultEventType = UnknownType;
 
 export type DefaultMessageType = UnknownType & {
+  date?: string | Date;
   errorStatusCode?: number;
   event?: Event<
     DefaultAttachmentType,
@@ -35,6 +36,7 @@ export type DefaultMessageType = UnknownType & {
     DefaultReactionType,
     DefaultUserType
   >;
+  unread?: boolean;
 };
 
 export type DefaultReactionType = UnknownType;