fix: display date separators before visible messages (#1733)

Author: madsroskar

examples/TypeScriptMessaging/App.tsx

@@ -120,6 +120,10 @@ const ChannelScreen: React.FC<ChannelScreenProps> = ({ navigation }) => {
     setTopInset(headerHeight);
   }, [headerHeight]);
 
+  if (channel === undefined) {
+    return null;
+  }
+
   return (
     <SafeAreaView>
       <Chat client={chatClient} i18nInstance={streami18n}>

examples/TypeScriptMessaging/ios/Podfile.lock

@@ -626,7 +626,7 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
   boost: a7c83b31436843459a1961bfd74b96033dc77234
   CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99
-  DoubleConversion: 831926d9b8bf8166fd87886c4abab286c2422662
+  DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54
   FBLazyVector: 1d83d91816fa605d16227a83f1b2e71c8df09d22
   FBReactNativeSpec: 626e35e73f83c637ff166f906d584f4c6750c251
   Flipper: bdadd9d6edfc8dfc5c4b9bb59b2ffa60e4a167e7
@@ -639,12 +639,12 @@ SPEC CHECKSUMS:
   Flipper-RSocket: d9d9ade67cbecf6ac10730304bf5607266dd2541
   FlipperKit: 17618d288848b0178ff8be2c9682e6800800f07d
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
-  glog: 85ecdd10ee8d8ec362ef519a6a45ff9aa27b2e85
+  glog: 3d02b25ca00c2d456734d0bcff864cbc62f6ae1a
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
   OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c
   PromisesObjC: ab77feca74fa2823e7af4249b8326368e61014cb
   PromisesSwift: 99fddfe4a0ec88a56486644c0da106694c92a604
-  RCT-Folly: 803a9cfd78114b2ec0f140cfa6fa2a6bafb2d685
+  RCT-Folly: b9d9fe1fc70114b751c076104e52f3b1b5e5a95a
   RCTRequired: 66822c147facf02f7774af99825e0a31e39df42e
   RCTTypeSafety: 309306c4e711b14a83c55c2816a6cc490ec19827
   React: a779632422a918b26db4f1b57225a41c14d20525

examples/TypeScriptMessaging/yarn.lock

@@ -7097,10 +7097,10 @@ statuses@~1.5.0:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
   integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==
 
-stream-chat-react-native-core@5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.1.0.tgz#65a867ad684add2fc6ec702a65d57010434f550b"
-  integrity sha512-jWIB5tjCPqFsnPOkB+yKD2bW18NYlt6AFMjrHIurKkdR08+8E4/wtCutZztTCTqyiJ3RXA2NL8d8vDWfBzV4zg==
+stream-chat-react-native-core@5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.3.0.tgz#5ff9771f4933d2291f5a2b7bd1316fcdd9b1767e"
+  integrity sha512-VRooo1bMGWy16jwpT0QCY8y2AGhzQ5giFnYSJRk/Vo+BSW9COFnk/y5Ja9GXiz8WjadXwv2YEmO/MKpkgxJeNQ==
   dependencies:
     "@babel/runtime" "^7.12.5"
     "@gorhom/bottom-sheet" "^4.1.6"

package/native-package/yarn.lock

@@ -1618,10 +1618,10 @@ source-map@^0.5.0:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
 
-stream-chat-react-native-core@5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.1.0.tgz#65a867ad684add2fc6ec702a65d57010434f550b"
-  integrity sha512-jWIB5tjCPqFsnPOkB+yKD2bW18NYlt6AFMjrHIurKkdR08+8E4/wtCutZztTCTqyiJ3RXA2NL8d8vDWfBzV4zg==
+stream-chat-react-native-core@5.3.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-5.3.0.tgz#5ff9771f4933d2291f5a2b7bd1316fcdd9b1767e"
+  integrity sha512-VRooo1bMGWy16jwpT0QCY8y2AGhzQ5giFnYSJRk/Vo+BSW9COFnk/y5Ja9GXiz8WjadXwv2YEmO/MKpkgxJeNQ==
   dependencies:
     "@babel/runtime" "^7.12.5"
     "@gorhom/bottom-sheet" "^4.1.6"

package/src/components/MessageList/MessageList.tsx

@@ -133,7 +133,6 @@ type MessageListPropsWithContext<
   Pick<OverlayContextValue, 'overlay'> &
   Pick<
     MessagesContextValue<StreamChatGenerics>,
-    | 'deletedMessagesVisibilityType'
     | 'DateHeader'
     | 'disableTypingIndicator'
     | 'FlatList'
@@ -236,7 +235,6 @@ const MessageListWithContext = <
     client,
     closePicker,
     DateHeader,
-    deletedMessagesVisibilityType,
     disabled,
     disableTypingIndicator,
     EmptyStateIndicator,
@@ -296,7 +294,6 @@ const MessageListWithContext = <
   );
 
   const messageList = useMessageList<StreamChatGenerics>({
-    deletedMessagesVisibilityType,
     inverted,
     noGroupByUser,
     threadList,
@@ -1062,7 +1059,6 @@ export const MessageList = <
   const { setMessages } = useImageGalleryContext<StreamChatGenerics>();
   const {
     DateHeader,
-    deletedMessagesVisibilityType,
     disableTypingIndicator,
     FlatList,
     initialScrollToFirstUnreadMessage,
@@ -1089,7 +1085,6 @@ export const MessageList = <
         client,
         closePicker,
         DateHeader,
-        deletedMessagesVisibilityType,
         disabled,
         disableTypingIndicator,
         EmptyStateIndicator,

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

@@ -5,6 +5,10 @@ import {
   useChannelContext,
 } from '../../../contexts/channelContext/ChannelContext';
 import { useChatContext } from '../../../contexts/chatContext/ChatContext';
+import {
+  DeletedMessagesVisibilityType,
+  useMessagesContext,
+} from '../../../contexts/messagesContext/MessagesContext';
 import { usePaginatedMessageListContext } from '../../../contexts/paginatedMessageListContext/PaginatedMessageListContext';
 import { useThreadContext } from '../../../contexts/threadContext/ThreadContext';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
@@ -13,7 +17,7 @@ import { getGroupStyles } from '../utils/getGroupStyles';
 import { getReadStates } from '../utils/getReadStates';
 
 export type UseMessageListParams = {
-  deletedMessagesVisibilityType?: 'always' | 'never' | 'receiver' | 'sender';
+  deletedMessagesVisibilityType?: DeletedMessagesVisibilityType;
   inverted?: boolean;
   noGroupByUser?: boolean;
   threadList?: boolean;
@@ -48,10 +52,11 @@ export const useMessageList = <
 >(
   params: UseMessageListParams,
 ) => {
-  const { deletedMessagesVisibilityType, inverted, noGroupByUser, threadList } = params;
+  const { inverted, noGroupByUser, threadList } = params;
   const { client } = useChatContext<StreamChatGenerics>();
   const { hideDateSeparators, maxTimeBetweenGroupedMessages, read } =
     useChannelContext<StreamChatGenerics>();
+  const { deletedMessagesVisibilityType } = useMessagesContext<StreamChatGenerics>();
   const { messages } = usePaginatedMessageListContext<StreamChatGenerics>();
   const { threadMessages } = useThreadContext<StreamChatGenerics>();
 
@@ -61,6 +66,7 @@ export const useMessageList = <
     : read;
 
   const dateSeparators = getDateSeparators<StreamChatGenerics>({
+    deletedMessagesVisibilityType,
     hideDateSeparators,
     messages: messageList,
     userId: client.userID,

package/src/components/MessageList/utils/__tests__/getDateSeparators.test.ts

@@ -0,0 +1,71 @@
+import type { PaginatedMessageListContextValue } from '../../../../contexts/paginatedMessageListContext/PaginatedMessageListContext';
+import { getDateSeparators } from '../getDateSeparators';
+
+describe('getDateSeparators', () => {
+  it('should return an empty object if no messages are passed', () => {
+    expect(getDateSeparators({ messages: [] })).toEqual({});
+  });
+
+  it('should return a date separator for each message in a new day', () => {
+    const firstDate = new Date('2020-01-01T00:00:00.000Z');
+    const secondDate = new Date('2020-01-02T00:00:00.000Z');
+    const messages = [
+      {
+        created_at: firstDate,
+        id: '1',
+        text: 'foo',
+      },
+      {
+        created_at: secondDate,
+        id: '2',
+        text: 'bar',
+      },
+      {
+        created_at: secondDate,
+        id: '3',
+        text: 'baz',
+      },
+    ] as PaginatedMessageListContextValue['messages'];
+
+    expect(getDateSeparators({ messages })).toEqual({
+      1: firstDate,
+      2: secondDate,
+    });
+  });
+
+  it('should return a date separator for the visible message in a day if deleted messages are not visible to the user', () => {
+    const firstDate = new Date('2020-01-01T00:00:00.000Z');
+    const secondDate = new Date('2020-01-02T00:00:00.000Z');
+
+    const messages = [
+      {
+        created_at: firstDate,
+        id: '1',
+        text: 'foo',
+        type: 'regular',
+      },
+      {
+        created_at: secondDate,
+        id: '2',
+        text: 'bar',
+        type: 'deleted',
+      },
+      {
+        created_at: secondDate,
+        id: '3',
+        text: 'baz',
+        type: 'regular',
+      },
+    ] as PaginatedMessageListContextValue['messages'];
+
+    expect(getDateSeparators({ deletedMessagesVisibilityType: 'never', messages })).toEqual({
+      1: firstDate,
+      3: secondDate,
+    });
+
+    expect(getDateSeparators({ deletedMessagesVisibilityType: 'receiver', messages })).toEqual({
+      1: firstDate,
+      3: secondDate,
+    });
+  });
+});

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

@@ -1,3 +1,4 @@
+import type { DeletedMessagesVisibilityType } from '../../../contexts/messagesContext/MessagesContext';
 import type { PaginatedMessageListContextValue } from '../../../contexts/paginatedMessageListContext/PaginatedMessageListContext';
 import type { ThreadContextValue } from '../../../contexts/threadContext/ThreadContext';
 import type { DefaultStreamChatGenerics } from '../../../types/types';
@@ -8,6 +9,7 @@ export type GetDateSeparatorsParams<
   messages:
     | PaginatedMessageListContextValue<StreamChatGenerics>['messages']
     | ThreadContextValue<StreamChatGenerics>['threadMessages'];
+  deletedMessagesVisibilityType?: DeletedMessagesVisibilityType;
   hideDateSeparators?: boolean;
   userId?: string;
 };
@@ -21,7 +23,7 @@ export const getDateSeparators = <
 >(
   params: GetDateSeparatorsParams<StreamChatGenerics>,
 ) => {
-  const { hideDateSeparators, messages, userId } = params;
+  const { deletedMessagesVisibilityType, hideDateSeparators, messages, userId } = params;
   const dateSeparators: DateSeparators = {};
 
   if (hideDateSeparators) {
@@ -30,7 +32,13 @@ export const getDateSeparators = <
 
   const messagesWithoutDeleted = messages.filter((message) => {
     const isMessageTypeDeleted = message.type === 'deleted';
-    return !isMessageTypeDeleted || userId === message.user?.id;
+
+    const isDeletedMessageVisibleToSender =
+      deletedMessagesVisibilityType === 'sender' || deletedMessagesVisibilityType === 'always';
+
+    return (
+      !isMessageTypeDeleted || (userId === message.user?.id && isDeletedMessageVisibleToSender)
+    );
   });
 
   for (let i = 0; i < messagesWithoutDeleted.length; i++) {

package/src/contexts/messagesContext/MessagesContext.tsx

@@ -59,6 +59,7 @@ import { getDisplayName } from '../utils/getDisplayName';
 import { isTestEnvironment } from '../utils/isTestEnvironment';
 
 export type MessageContentType = 'attachments' | 'files' | 'gallery' | 'quoted_reply' | 'text';
+export type DeletedMessagesVisibilityType = 'always' | 'never' | 'receiver' | 'sender';
 
 export type MessagesContextValue<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
@@ -281,7 +282,7 @@ export type MessagesContextValue<
    */
 
   /** Control if the deleted message is visible to both the send and reciever, either of them or none  */
-  deletedMessagesVisibilityType?: 'always' | 'never' | 'receiver' | 'sender';
+  deletedMessagesVisibilityType?: DeletedMessagesVisibilityType;
 
   disableTypingIndicator?: boolean;