Group disparate status together, but show metadata if different

Co-authored-by: Scott Nonnenberg <scott@signal.org>
signalapp · Mar 28, 2022 · a613ce0 · a613ce0
1 parent 23889ac
commit a613ce0
Show file tree

Hide file tree

Showing 12 changed files with 262 additions and 126 deletions.
diff --git a/ts/components/conversation/CallingNotification.stories.tsx b/ts/components/conversation/CallingNotification.stories.tsx
@@ -18,8 +18,8 @@ const story = storiesOf('Components/Conversation/CallingNotification', module);
 const getCommonProps = () => ({
   conversationId: 'fake-conversation-id',
   i18n,
+  isNextItemCallingNotification: false,
   messageId: 'fake-message-id',
-  nextItem: undefined,
   now: Date.now(),
   returnToActiveCall: action('returnToActiveCall'),
   startCallingLobby: action('startCallingLobby'),
@@ -70,7 +70,7 @@ story.add('Two incoming direct calls back-to-back', () => {
       <CallingNotification
         {...getCommonProps()}
         {...call1}
-        nextItem={{ type: 'callHistory', data: call2, timestamp: Date.now() }}
+        isNextItemCallingNotification
       />
       <CallingNotification {...getCommonProps()} {...call2} />
     </>
@@ -99,7 +99,7 @@ story.add('Two outgoing direct calls back-to-back', () => {
       <CallingNotification
         {...getCommonProps()}
         {...call1}
-        nextItem={{ type: 'callHistory', data: call2, timestamp: Date.now() }}
+        isNextItemCallingNotification
       />
       <CallingNotification {...getCommonProps()} {...call2} />
     </>

diff --git a/ts/components/conversation/CallingNotification.tsx b/ts/components/conversation/CallingNotification.tsx
@@ -17,7 +17,6 @@ import {
 } from '../../util/callingNotification';
 import { missingCaseError } from '../../util/missingCaseError';
 import { Tooltip, TooltipPlacement } from '../Tooltip';
-import type { TimelineItemType } from './TimelineItem';
 import * as log from '../../logging/log';
 
 export type PropsActionsType = {
@@ -31,7 +30,7 @@ export type PropsActionsType = {
 type PropsHousekeeping = {
   i18n: LocalizerType;
   conversationId: string;
-  nextItem: undefined | TimelineItemType;
+  isNextItemCallingNotification: boolean;
 };
 
 type PropsType = CallingNotificationType & PropsActionsType & PropsHousekeeping;
@@ -86,12 +85,12 @@ function renderCallingNotificationButton(
     activeCallConversationId,
     conversationId,
     i18n,
-    nextItem,
+    isNextItemCallingNotification,
     returnToActiveCall,
     startCallingLobby,
   } = props;
 
-  if (nextItem?.type === 'callHistory') {
+  if (isNextItemCallingNotification) {
     return null;
   }
 

diff --git a/ts/components/conversation/Message.stories.tsx b/ts/components/conversation/Message.stories.tsx
@@ -171,6 +171,15 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   retryDeleteForEveryone: action('retryDeleteForEveryone'),
   scrollToQuotedMessage: action('scrollToQuotedMessage'),
   selectMessage: action('selectMessage'),
+  shouldCollapseAbove: isBoolean(overrideProps.shouldCollapseAbove)
+    ? overrideProps.shouldCollapseAbove
+    : false,
+  shouldCollapseBelow: isBoolean(overrideProps.shouldCollapseBelow)
+    ? overrideProps.shouldCollapseBelow
+    : false,
+  shouldHideMetadata: isBoolean(overrideProps.shouldHideMetadata)
+    ? overrideProps.shouldHideMetadata
+    : false,
   showContactDetail: action('showContactDetail'),
   showContactModal: action('showContactModal'),
   showExpiredIncomingTapToViewToast: action(
@@ -202,9 +211,9 @@ const renderMany = (propsArray: ReadonlyArray<Props>) =>
     <Message
       key={message.text}
       {...message}
-      previousItem={createTimelineItem(propsArray[index - 1])}
+      shouldCollapseAbove={Boolean(propsArray[index - 1])}
       item={createTimelineItem(message)}
-      nextItem={createTimelineItem(propsArray[index + 1])}
+      shouldCollapseBelow={Boolean(propsArray[index + 1])}
     />
   ));
 

diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx
@@ -83,10 +83,6 @@ import { getCustomColorStyle } from '../../util/getCustomColorStyle';
 import { offsetDistanceModifier } from '../../util/popperUtil';
 import * as KeyboardLayout from '../../services/keyboardLayout';
 import { StopPropagation } from '../StopPropagation';
-import {
-  areMessagesInSameGroup,
-  UnreadIndicatorPlacement,
-} from '../../util/timelineUtil';
 
 type Trigger = {
   handleContextClick: (event: React.MouseEvent<HTMLDivElement>) => void;
@@ -269,14 +265,14 @@ export type PropsHousekeeping = {
   i18n: LocalizerType;
   interactionMode: InteractionModeType;
   item?: TimelineItemType;
-  nextItem?: TimelineItemType;
-  previousItem?: TimelineItemType;
   renderAudioAttachment: (props: AudioAttachmentProps) => JSX.Element;
   renderReactionPicker: (
     props: React.ComponentProps<typeof SmartReactionPicker>
   ) => JSX.Element;
+  shouldCollapseAbove: boolean;
+  shouldCollapseBelow: boolean;
+  shouldHideMetadata: boolean;
   theme: ThemeType;
-  unreadIndicatorPlacement?: undefined | UnreadIndicatorPlacement;
 };
 
 export type PropsActions = {
@@ -554,6 +550,7 @@ export class Message extends React.PureComponent<Props, State> {
       attachments,
       expirationLength,
       expirationTimestamp,
+      shouldHideMetadata,
       status,
       text,
       textDirection,
@@ -565,7 +562,7 @@ export class Message extends React.PureComponent<Props, State> {
       !expirationLength &&
       !expirationTimestamp &&
       (!status || SENT_STATUSES.has(status)) &&
-      this.isCollapsedBelow()
+      shouldHideMetadata
     ) {
       return MetadataPlacement.NotRendered;
     }
@@ -688,34 +685,14 @@ export class Message extends React.PureComponent<Props, State> {
     return isMessageRequestAccepted && !isBlocked;
   }
 
-  private isCollapsedAbove(
-    { item, previousItem, unreadIndicatorPlacement }: Readonly<Props> = this
-      .props
-  ): boolean {
-    return areMessagesInSameGroup(
-      previousItem,
-      unreadIndicatorPlacement === UnreadIndicatorPlacement.JustAbove,
-      item
-    );
-  }
-
-  private isCollapsedBelow(
-    { item, nextItem, unreadIndicatorPlacement }: Readonly<Props> = this.props
-  ): boolean {
-    return areMessagesInSameGroup(
-      item,
-      unreadIndicatorPlacement === UnreadIndicatorPlacement.JustBelow,
-      nextItem
-    );
-  }
-
   private shouldRenderAuthor(): boolean {
-    const { author, conversationType, direction } = this.props;
+    const { author, conversationType, direction, shouldCollapseAbove } =
+      this.props;
     return Boolean(
       direction === 'incoming' &&
         conversationType === 'group' &&
         author.title &&
-        !this.isCollapsedAbove()
+        !shouldCollapseAbove
     );
   }
 
@@ -850,6 +827,8 @@ export class Message extends React.PureComponent<Props, State> {
       renderingContext,
       showMessageDetail,
       showVisualAttachment,
+      shouldCollapseAbove,
+      shouldCollapseBelow,
       status,
       text,
       textPending,
@@ -925,10 +904,10 @@ export class Message extends React.PureComponent<Props, State> {
             <ImageGrid
               attachments={attachments}
               withContentAbove={
-                isSticker || withContentAbove || this.isCollapsedAbove()
+                isSticker || withContentAbove || shouldCollapseAbove
               }
               withContentBelow={
-                isSticker || withContentBelow || this.isCollapsedBelow()
+                isSticker || withContentBelow || shouldCollapseBelow
               }
               isSticker={isSticker}
               stickerSize={STICKER_SIZE}
@@ -1223,6 +1202,7 @@ export class Message extends React.PureComponent<Props, State> {
       id,
       quote,
       scrollToQuotedMessage,
+      shouldCollapseAbove,
     } = this.props;
 
     if (!quote) {
@@ -1248,11 +1228,11 @@ export class Message extends React.PureComponent<Props, State> {
       curveTopLeft = false;
       curveTopRight = false;
     } else if (isIncoming) {
-      curveTopLeft = !this.isCollapsedAbove();
+      curveTopLeft = !shouldCollapseAbove;
       curveTopRight = true;
     } else {
       curveTopLeft = true;
-      curveTopRight = !this.isCollapsedAbove();
+      curveTopRight = !shouldCollapseAbove;
     }
 
     return (
@@ -1285,6 +1265,7 @@ export class Message extends React.PureComponent<Props, State> {
       direction,
       i18n,
       storyReplyContext,
+      shouldCollapseAbove,
     } = this.props;
 
     if (!storyReplyContext) {
@@ -1299,11 +1280,11 @@ export class Message extends React.PureComponent<Props, State> {
       curveTopLeft = false;
       curveTopRight = false;
     } else if (isIncoming) {
-      curveTopLeft = !this.isCollapsedAbove();
+      curveTopLeft = !shouldCollapseAbove;
       curveTopRight = true;
     } else {
       curveTopLeft = true;
-      curveTopRight = !this.isCollapsedAbove();
+      curveTopRight = !shouldCollapseAbove;
     }
 
     return (
@@ -1400,6 +1381,7 @@ export class Message extends React.PureComponent<Props, State> {
       direction,
       getPreferredBadge,
       i18n,
+      shouldCollapseBelow,
       showContactModal,
       theme,
     } = this.props;
@@ -1415,7 +1397,7 @@ export class Message extends React.PureComponent<Props, State> {
             this.hasReactions(),
         })}
       >
-        {this.isCollapsedBelow() ? (
+        {shouldCollapseBelow ? (
           <AvatarSpacer size={GROUP_AVATAR_SIZE} />
         ) : (
           <Avatar
@@ -2660,8 +2642,16 @@ export class Message extends React.PureComponent<Props, State> {
   }
 
   public override render(): JSX.Element | null {
-    const { author, attachments, direction, id, isSticker, timestamp } =
-      this.props;
+    const {
+      author,
+      attachments,
+      direction,
+      id,
+      isSticker,
+      shouldCollapseAbove,
+      shouldCollapseBelow,
+      timestamp,
+    } = this.props;
     const { expired, expiring, imageBroken, isSelected } = this.state;
 
     // This id is what connects our triple-dot click with our associated pop-up menu.
@@ -2681,8 +2671,8 @@ export class Message extends React.PureComponent<Props, State> {
         className={classNames(
           'module-message',
           `module-message--${direction}`,
-          this.isCollapsedAbove() && 'module-message--collapsed-above',
-          this.isCollapsedBelow() && 'module-message--collapsed-below',
+          shouldCollapseAbove && 'module-message--collapsed-above',
+          shouldCollapseBelow && 'module-message--collapsed-below',
           isSelected ? 'module-message--selected' : null,
           expiring ? 'module-message--expired' : null
         )}

diff --git a/ts/components/conversation/MessageDetail.tsx b/ts/components/conversation/MessageDetail.tsx
@@ -345,6 +345,9 @@ export class MessageDetail extends React.Component<Props> {
             replyToMessage={replyToMessage}
             retryDeleteForEveryone={retryDeleteForEveryone}
             retrySend={retrySend}
+            shouldCollapseAbove={false}
+            shouldCollapseBelow={false}
+            shouldHideMetadata={false}
             showForwardMessageModal={showForwardMessageModal}
             scrollToQuotedMessage={() => {
               log.warn('MessageDetail: scrollToQuotedMessage called!');

diff --git a/ts/components/conversation/Quote.stories.tsx b/ts/components/conversation/Quote.stories.tsx
@@ -82,6 +82,9 @@ const defaultMessageProps: MessagesProps = {
   retryDeleteForEveryone: action('default--retryDeleteForEveryone'),
   scrollToQuotedMessage: action('default--scrollToQuotedMessage'),
   selectMessage: action('default--selectMessage'),
+  shouldCollapseAbove: false,
+  shouldCollapseBelow: false,
+  shouldHideMetadata: false,
   showContactDetail: action('default--showContactDetail'),
   showContactModal: action('default--showContactModal'),
   showExpiredIncomingTapToViewToast: action(

diff --git a/ts/components/conversation/Timeline.stories.tsx b/ts/components/conversation/Timeline.stories.tsx
@@ -421,25 +421,21 @@ 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 />}
     item={items[messageId]}
-    previousItem={undefined}
-    nextItem={undefined}
     i18n={i18n}
     interactionMode="keyboard"
+    isNextItemCallingNotification={false}
     theme={ThemeType.light}
     containerElementRef={containerElementRef}
     containerWidthBreakpoint={containerWidthBreakpoint}
@@ -449,6 +445,10 @@ const renderItem = ({
       <div>*UniversalTimerNotification*</div>
     )}
     renderAudioAttachment={() => <div>*AudioAttachment*</div>}
+    shouldCollapseAbove={false}
+    shouldCollapseBelow={false}
+    shouldHideMetadata={false}
+    shouldRenderDateHeader={false}
     {...actions()}
   />
 );

diff --git a/ts/components/conversation/TimelineItem.stories.tsx b/ts/components/conversation/TimelineItem.stories.tsx
@@ -53,7 +53,7 @@ const getDefaultProps = () => ({
   conversationId: 'conversation-id',
   getPreferredBadge: () => undefined,
   id: 'asdf',
-  isOldestTimelineItem: false,
+  isNextItemCallingNotification: false,
   isSelected: false,
   interactionMode: 'keyboard' as const,
   theme: ThemeType.light,
@@ -94,8 +94,11 @@ const getDefaultProps = () => ({
   showIdentity: action('showIdentity'),
   startCallingLobby: action('startCallingLobby'),
   returnToActiveCall: action('returnToActiveCall'),
-  previousItem: undefined,
-  nextItem: undefined,
+  shouldCollapseAbove: false,
+  shouldCollapseBelow: false,
+  shouldHideMetadata: false,
+  shouldRenderDateHeader: false,
+
   now: Date.now(),
 
   renderContact,