Timeline date headers

ts/components/conversation/Timeline.stories.tsx

@@ -1,4 +1,4 @@
-// Copyright 2020-2021 Signal Messenger, LLC
+// Copyright 2020-2022 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
@@ -20,7 +20,6 @@ import { ConversationHero } from './ConversationHero';
 import { getDefaultConversation } from '../../test-both/helpers/getDefaultConversation';
 import { getRandomColor } from '../../test-both/helpers/getRandomColor';
 import { LastSeenIndicator } from './LastSeenIndicator';
-import { TimelineLoadingRow } from './TimelineLoadingRow';
 import { TypingBubble } from './TypingBubble';
 import { ContactSpoofingType } from '../../util/contactSpoofing';
 import { ReadStatus } from '../../messages/MessageReadStatus';
@@ -62,6 +61,7 @@ const items: Record<string, TimelineItemType> = {
       text: '🔥',
       timestamp: Date.now(),
     },
+    timestamp: Date.now(),
   },
   'id-2': {
     type: 'message',
@@ -82,6 +82,7 @@ const items: Record<string, TimelineItemType> = {
       text: 'Hello there from the new world! http://somewhere.com',
       timestamp: Date.now(),
     },
+    timestamp: Date.now(),
   },
   'id-2.5': {
     type: 'unsupportedMessage',
@@ -95,6 +96,7 @@ const items: Record<string, TimelineItemType> = {
         title: 'Mr. Pig',
       },
     },
+    timestamp: Date.now(),
   },
   'id-3': {
     type: 'message',
@@ -115,6 +117,7 @@ const items: Record<string, TimelineItemType> = {
       text: 'Hello there from the new world!',
       timestamp: Date.now(),
     },
+    timestamp: Date.now(),
   },
   'id-4': {
     type: 'timerNotification',
@@ -124,6 +127,7 @@ const items: Record<string, TimelineItemType> = {
       title: "It's Me",
       type: 'fromMe',
     },
+    timestamp: Date.now(),
   },
   'id-5': {
     type: 'timerNotification',
@@ -133,6 +137,7 @@ const items: Record<string, TimelineItemType> = {
       title: '(202) 555-0000',
       type: 'fromOther',
     },
+    timestamp: Date.now(),
   },
   'id-6': {
     type: 'safetyNumberNotification',
@@ -143,6 +148,7 @@ const items: Record<string, TimelineItemType> = {
       },
       isGroup: true,
     },
+    timestamp: Date.now(),
   },
   'id-7': {
     type: 'verificationNotification',
@@ -151,6 +157,7 @@ const items: Record<string, TimelineItemType> = {
       isLocal: true,
       type: 'markVerified',
     },
+    timestamp: Date.now(),
   },
   'id-8': {
     type: 'groupNotification',
@@ -180,10 +187,12 @@ const items: Record<string, TimelineItemType> = {
         isMe: false,
       }),
     },
+    timestamp: Date.now(),
   },
   'id-9': {
     type: 'resetSessionNotification',
     data: null,
+    timestamp: Date.now(),
   },
   'id-10': {
     type: 'message',
@@ -205,6 +214,7 @@ const items: Record<string, TimelineItemType> = {
       text: '🔥',
       timestamp: Date.now(),
     },
+    timestamp: Date.now(),
   },
   'id-11': {
     type: 'message',
@@ -226,6 +236,7 @@ const items: Record<string, TimelineItemType> = {
       text: 'Hello there from the new world! http://somewhere.com',
       timestamp: Date.now(),
     },
+    timestamp: Date.now(),
   },
   'id-12': {
     type: 'message',
@@ -247,6 +258,7 @@ const items: Record<string, TimelineItemType> = {
       text: 'Hello there from the new world! 🔥',
       timestamp: Date.now(),
     },
+    timestamp: Date.now(),
   },
   'id-13': {
     type: 'message',
@@ -268,6 +280,7 @@ const items: Record<string, TimelineItemType> = {
       text: 'Hello there from the new world! And this is multiple lines of text. Lines and lines and lines.',
       timestamp: Date.now(),
     },
+    timestamp: Date.now(),
   },
   'id-14': {
     type: 'message',
@@ -289,10 +302,12 @@ const items: Record<string, TimelineItemType> = {
       text: 'Hello there from the new world! And this is multiple lines of text. Lines and lines and lines.',
       timestamp: Date.now(),
     },
+    timestamp: Date.now(),
   },
   'id-15': {
     type: 'linkNotification',
     data: null,
+    timestamp: Date.now(),
   },
 };
 
@@ -375,14 +390,17 @@ const renderItem = ({
   messageId,
   containerElementRef,
   containerWidthBreakpoint,
+  isOldestTimelineItem,
 }: {
   messageId: string;
   containerElementRef: React.RefObject<HTMLElement>;
   containerWidthBreakpoint: WidthBreakpoint;
+  isOldestTimelineItem: boolean;
 }) => (
   <TimelineItem
     getPreferredBadge={() => undefined}
     id=""
+    isOldestTimelineItem={isOldestTimelineItem}
     isSelected={false}
     renderEmojiPicker={() => <div />}
     renderReactionPicker={() => <div />}
@@ -442,7 +460,6 @@ const renderHeroRow = () => {
   };
   return <Wrapper />;
 };
-const renderLoadingRow = () => <TimelineLoadingRow state="loading" />;
 const renderTypingBubble = () => (
   <TypingBubble
     acceptedMessageRequest
@@ -463,6 +480,7 @@ const useProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   i18n,
   theme: React.useContext(StorybookThemeContext),
 
+  getTimestampForMessage: Date.now,
   haveNewest: boolean('haveNewest', overrideProps.haveNewest !== false),
   haveOldest: boolean('haveOldest', overrideProps.haveOldest !== false),
   isIncomingMessageRequest: boolean(
@@ -489,7 +507,6 @@ const useProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
   renderItem,
   renderLastSeenIndicator,
   renderHeroRow,
-  renderLoadingRow,
   renderTypingBubble,
   typingContactId: overrideProps.typingContactId,