feat: created getMessageExpirationProps selector and used in ExpirableReadableMessage

this stops us passing props down from the child components of ExpirableReadableMessage

ts/components/conversation/TimerNotification.tsx

@@ -14,19 +14,7 @@ const StyledTimerNotification = styled(Flex)`
 `;
 
 export const TimerNotification = (props: PropsForExpirationTimer) => {
-  const {
+  const { messageId, pubkey, profileName, expirationType, timespan, type, disabled } = props;
-    messageId,
-    receivedAt,
-    isUnread,
-    pubkey,
-    profileName,
-    expirationType,
-    expirationLength,
-    expirationTimestamp,
-    timespan,
-    type,
-    disabled,
-  } = props;
 
   const contact = profileName || pubkey;
   // TODO legacy messages support will be removed in a future release
@@ -64,14 +52,8 @@ export const TimerNotification = (props: PropsForExpirationTimer) => {
 
   return (
     <ExpirableReadableMessage
-      convoId={props.convoId}
       messageId={messageId}
       direction={type === 'fromOther' ? 'incoming' : 'outgoing'}
-      receivedAt={receivedAt}
-      isUnread={isUnread}
-      expirationLength={expirationLength}
-      expirationTimestamp={expirationTimestamp}
-      isExpired={props.isExpired}
       isCentered={true}
       marginInlineStart={'calc(var(--margins-lg) + 6px)'}
       marginInlineEnd={'calc(var(--margins-lg) + 6px)'}

ts/components/conversation/message/message-item/DataExtractionNotification.tsx

@@ -7,18 +7,7 @@ import { SessionIcon } from '../../../icon';
 import { ExpirableReadableMessage } from './ExpirableReadableMessage';
 
 export const DataExtractionNotification = (props: PropsForDataExtractionNotification) => {
-  const {
+  const { name, type, source, messageId } = props;
-    name,
-    type,
-    source,
-    messageId,
-    isUnread,
-    receivedAt,
-    direction,
-    expirationLength,
-    expirationTimestamp,
-    isExpired,
-  } = props;
 
   let contentText: string;
   if (type === SignalService.DataExtractionNotification.Type.MEDIA_SAVED) {
@@ -28,16 +17,7 @@ export const DataExtractionNotification = (props: PropsForDataExtractionNotifica
   }
 
   return (
-    <ExpirableReadableMessage
+    <ExpirableReadableMessage messageId={messageId} key={`readable-message-${messageId}`}>
-      messageId={messageId}
-      receivedAt={receivedAt}
-      isUnread={isUnread}
-      direction={direction}
-      expirationLength={expirationLength}
-      expirationTimestamp={expirationTimestamp}
-      isExpired={isExpired}
-      key={`readable-message-${messageId}`}
-    >
       <Flex
         container={true}
         flexDirection="row"

ts/components/conversation/message/message-item/ExpirableReadableMessage.tsx

@@ -1,14 +1,15 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { useInterval } from 'react-use';
 import styled from 'styled-components';
 import { Data } from '../../../../data/data';
-import { MessageModelType } from '../../../../models/messageType';
 import { getConversationController } from '../../../../session/conversations';
 import { messagesExpired, PropsForExpiringMessage } from '../../../../state/ducks/conversations';
 import { getIncrement } from '../../../../util/timer';
 import { ExpireTimer } from '../../ExpireTimer';
 import { ReadableMessage, ReadableMessageProps } from './ReadableMessage';
+import { getMessageExpirationProps } from '../../../../state/selectors/conversations';
+import { MessageModelType } from '../../../../models/messageType';
 
 const EXPIRATION_CHECK_MINIMUM = 2000;
 
@@ -74,43 +75,57 @@ const StyledReadableMessage = styled(ReadableMessage)<{
 `;
 
 export interface ExpirableReadableMessageProps
-  extends ReadableMessageProps,
+  extends Omit<ReadableMessageProps, 'receivedAt' | 'isUnread'> {
-    PropsForExpiringMessage {
+  messageId: string;
-  direction: MessageModelType;
+  // Note: this direction is used to override the message model direction in cases where it isn't set i.e. Timer Notifications rely on the 'type' prop to determine direction
+  direction?: MessageModelType;
   isCentered?: boolean;
   marginInlineStart?: string;
   marginInlineEnd?: string;
 }
 
 export const ExpirableReadableMessage = (props: ExpirableReadableMessageProps) => {
+  const selected = useSelector(state => getMessageExpirationProps(state as any, props.messageId));
+
+  if (!selected) {
+    return null;
+  }
+
   const {
-    convoId,
+    direction: overrideDirection,
-    messageId,
-    direction,
-    receivedAt,
-    isUnread,
-    expirationLength,
-    expirationTimestamp,
     isCentered,
     marginInlineStart = '6px',
     marginInlineEnd = '6px',
   } = props;
 
-  const expiringProps: PropsForExpiringMessage = {
+  const {
     convoId,
     messageId,
+    direction: selectedDirection,
+    receivedAt,
+    isUnread,
     expirationLength,
     expirationTimestamp,
-    isExpired: props.isExpired,
+    isExpired: _isExpired,
+  } = selected;
+
+  const direction = overrideDirection || selectedDirection;
+
+  const { isExpired } = useIsExpired({
+    convoId,
+    messageId,
     direction,
-  };
+    expirationTimestamp,
-  const { isExpired } = useIsExpired(expiringProps);
+    expirationLength,
-  const isIncoming = direction === 'incoming';
+    isExpired: _isExpired,
+  });
 
   if (isExpired) {
     return null;
   }
 
+  const isIncoming = direction === 'incoming';
+
   return (
     <StyledReadableMessage
       messageId={messageId}

ts/components/conversation/message/message-item/GenericReadableMessage.tsx

@@ -22,10 +22,7 @@ export type GenericReadableMessageSelectorProps = Pick<
   | 'conversationType'
   | 'receivedAt'
   | 'isUnread'
-  | 'expirationLength'
-  | 'expirationTimestamp'
   | 'isKickedFromGroup'
-  | 'isExpired'
   | 'convoId'
   | 'isDeleted'
 >;
@@ -152,16 +149,7 @@ export const GenericReadableMessage = (props: Props) => {
       isUnread={!!isUnread}
       key={`readable-message-${messageId}`}
     >
-      <ExpirableReadableMessage
+      <ExpirableReadableMessage messageId={messageId}>
-        convoId={msgProps.convoId}
-        messageId={messageId}
-        direction={msgProps.direction}
-        receivedAt={receivedAt}
-        isUnread={Boolean(isUnread)}
-        expirationLength={msgProps.expirationLength}
-        expirationTimestamp={msgProps.expirationTimestamp}
-        isExpired={msgProps.isExpired}
-      >
         <MessageContentWithStatuses
           ctxMenuID={ctxMenuID}
           messageId={messageId}

ts/components/conversation/message/message-item/GroupInvitation.tsx

@@ -12,7 +12,7 @@ const StyledIconContainer = styled.div`
 `;
 
 export const GroupInvitation = (props: PropsForGroupInvitation) => {
-  const { messageId, receivedAt, isUnread } = props;
+  const { messageId } = props;
   const classes = ['group-invitation'];
 
   if (props.direction === 'outgoing') {
@@ -21,17 +21,7 @@ export const GroupInvitation = (props: PropsForGroupInvitation) => {
   const openGroupInvitation = window.i18n('openGroupInvitation');
 
   return (
-    <ExpirableReadableMessage
+    <ExpirableReadableMessage messageId={messageId} key={`readable-message-${messageId}`}>
-      convoId={props.convoId}
-      messageId={messageId}
-      direction={props.direction}
-      receivedAt={receivedAt}
-      isUnread={Boolean(isUnread)}
-      expirationLength={props.expirationLength}
-      expirationTimestamp={props.expirationTimestamp}
-      isExpired={props.isExpired}
-      key={`readable-message-${messageId}`}
-    >
       <div className="group-invitation-container" id={`msg-${props.messageId}`}>
         <div className={classNames(classes)}>
           <div className="contents">

ts/components/conversation/message/message-item/GroupUpdateMessage.tsx

@@ -71,28 +71,10 @@ const ChangeItem = (change: PropsForGroupUpdateType): string => {
 };
 
 export const GroupUpdateMessage = (props: PropsForGroupUpdate) => {
-  const {
+  const { change, messageId } = props;
-    change,
-    messageId,
-    receivedAt,
-    isUnread,
-    direction,
-    expirationLength,
-    expirationTimestamp,
-    isExpired,
-  } = props;
 
   return (
-    <ExpirableReadableMessage
+    <ExpirableReadableMessage messageId={messageId} key={`readable-message-${messageId}`}>
-      messageId={messageId}
-      receivedAt={receivedAt}
-      isUnread={isUnread}
-      direction={direction}
-      expirationLength={expirationLength}
-      expirationTimestamp={expirationTimestamp}
-      isExpired={isExpired}
-      key={`readable-message-${messageId}`}
-    >
       <NotificationBubble notificationText={ChangeItem(change)} iconType="users" />
     </ExpirableReadableMessage>
   );

ts/components/conversation/message/message-item/notification-bubble/CallNotification.tsx

@@ -36,16 +36,7 @@ const style: StyleType = {
 };
 
 export const CallNotification = (props: PropsForCallNotification) => {
-  const {
+  const { messageId, notificationType } = props;
-    messageId,
-    receivedAt,
-    isUnread,
-    notificationType,
-    direction,
-    expirationLength,
-    expirationTimestamp,
-    isExpired,
-  } = props;
 
   const selectedConvoProps = useSelector(getSelectedConversation);
 
@@ -63,16 +54,7 @@ export const CallNotification = (props: PropsForCallNotification) => {
   const iconColor = styleItem.iconColor;
 
   return (
-    <ExpirableReadableMessage
+    <ExpirableReadableMessage messageId={messageId} key={`readable-message-${messageId}`}>
-      messageId={messageId}
-      receivedAt={receivedAt}
-      direction={direction}
-      isUnread={isUnread}
-      expirationLength={expirationLength}
-      expirationTimestamp={expirationTimestamp}
-      isExpired={isExpired}
-      key={`readable-message-${messageId}`}
-    >
       <NotificationBubble
         notificationText={notificationText}
         iconType={iconType}

ts/hooks/useParamSelector.ts

@@ -4,7 +4,7 @@ import { ConversationModel } from '../models/conversation';
 import { PubKey } from '../session/types';
 import { UserUtils } from '../session/utils';
 import { StateType } from '../state/reducer';
-import { getMessageReactsProps } from '../state/selectors/conversations';
+import { getMessageExpirationProps, getMessageReactsProps } from '../state/selectors/conversations';
 
 export function useAvatarPath(convoId: string | undefined) {
   const convoProps = useConversationPropsById(convoId);
@@ -184,6 +184,19 @@ export function useMessageReactsPropsById(messageId?: string) {
   });
 }
 
+export function useMessageExpirationPropsById(messageId?: string) {
+  return useSelector((state: StateType) => {
+    if (!messageId) {
+      return null;
+    }
+    const messageExpirationProps = getMessageExpirationProps(state, messageId);
+    if (!messageExpirationProps) {
+      return null;
+    }
+    return messageExpirationProps;
+  });
+}
+
 // TODO use env variable to toggle test values?
 // https://github.com/oxen-io/session-desktop/pull/2660/files#r1174823750
 export function useTimerOptionsByMode(disappearingMessageMode?: string, hasOnlyOneMode?: boolean) {

ts/models/message.ts

@@ -149,6 +149,7 @@ export class MessageModel extends Backbone.Model<MessageAttributes> {
     const propsForGroupInvitation = this.getPropsForGroupInvitation();
     const propsForGroupUpdateMessage = this.getPropsForGroupUpdateMessage();
     const propsForTimerNotification = this.getPropsForTimerNotification();
+    const propsForExpiringMessage = this.getPropsForExpiringMessage();
     const propsForMessageRequestResponse = this.getPropsForMessageRequestResponse();
     const callNotificationType = this.get('callNotificationType');
     const messageProps: MessageModelPropsWithoutConvoProps = {
@@ -170,10 +171,13 @@ export class MessageModel extends Backbone.Model<MessageAttributes> {
       messageProps.propsForTimerNotification = propsForTimerNotification;
     }
 
+    if (propsForExpiringMessage) {
+      messageProps.propsForExpiringMessage = propsForExpiringMessage;
+    }
+
     if (callNotificationType) {
       messageProps.propsForCallNotification = {
         notificationType: callNotificationType,
-        messageId: this.id,
         receivedAt: this.get('received_at') || Date.now(),
         isUnread: this.isUnread(),
         ...this.getPropsForExpiringMessage(),
@@ -278,7 +282,7 @@ export class MessageModel extends Backbone.Model<MessageAttributes> {
     await deleteExternalMessageFiles(this.attributes);
   }
 
-  public getPropsForExpiringMessage(): PropsForExpiringMessage | { direction: MessageModelType } {
+  public getPropsForExpiringMessage(): PropsForExpiringMessage {
     const expirationType = this.get('expirationType');
     const expirationLength = this.get('expireTimer')
       ? this.get('expireTimer') * DURATION.SECONDS
@@ -323,7 +327,6 @@ export class MessageModel extends Backbone.Model<MessageAttributes> {
       timespan,
       disabled,
       type: fromSync ? 'fromSync' : UserUtils.isUsFromCache(source) ? 'fromMe' : 'fromOther',
-      messageId: this.id,
       receivedAt: this.get('received_at'),
       isUnread: this.isUnread(),
       expirationType: expirationType || 'off',
@@ -351,7 +354,6 @@ export class MessageModel extends Backbone.Model<MessageAttributes> {
       serverName: invitation.name,
       url: serverAddress,
       acceptUrl: invitation.url,
-      messageId: this.id as string,
       receivedAt: this.get('received_at'),
       isUnread: this.isUnread(),
       ...this.getPropsForExpiringMessage(),
@@ -374,7 +376,6 @@ export class MessageModel extends Backbone.Model<MessageAttributes> {
     return {
       ...dataExtractionNotification,
       name: contact.profileName || contact.name || dataExtractionNotification.source,
-      messageId: this.id,
       receivedAt: this.get('received_at'),
       isUnread: this.isUnread(),
       ...this.getPropsForExpiringMessage(),
@@ -414,7 +415,6 @@ export class MessageModel extends Backbone.Model<MessageAttributes> {
     }
 
     const sharedProps = {
-      messageId: this.id,
       isUnread: this.isUnread(),
       receivedAt: this.get('received_at'),
       ...this.getPropsForExpiringMessage(),

ts/models/messageType.ts

@@ -1,10 +1,6 @@
 import { defaultsDeep } from 'lodash';
 import { v4 as uuidv4 } from 'uuid';
-import {
+import { CallNotificationType, PropsForMessageWithConvoProps } from '../state/ducks/conversations';
-  CallNotificationType,
-  PropsForExpiringMessage,
-  PropsForMessageWithConvoProps,
-} from '../state/ducks/conversations';
 import { AttachmentTypeWithPath } from '../types/Attachment';
 import { Reaction, ReactionList, SortedReactionList } from '../types/Reaction';
 import { DisappearingMessageType } from '../util/expiringMessages';
@@ -139,13 +135,9 @@ export enum MessageDirection {
   any = '%',
 }
 
-export interface PropsForDataExtractionNotification
+export interface PropsForDataExtractionNotification extends DataExtractionNotificationMsg {
-  extends DataExtractionNotificationMsg,
-    PropsForExpiringMessage {
   name: string;
   messageId: string;
-  receivedAt?: number;
-  isUnread: boolean;
 }
 
 export type PropsForMessageRequestResponse = MessageRequestResponseMsg & {

ts/state/ducks/conversations.ts

@@ -23,14 +23,14 @@ import {
 
 export type CallNotificationType = 'missed-call' | 'started-call' | 'answered-a-call';
 
-export type PropsForCallNotification = PropsForExpiringMessage & {
+export type PropsForCallNotification = {
   notificationType: CallNotificationType;
-  receivedAt: number;
+  messageId: string;
-  isUnread: boolean;
 };
 
 export type MessageModelPropsWithoutConvoProps = {
   propsForMessage: PropsForMessageWithoutConvoProps;
+  propsForExpiringMessage?: PropsForExpiringMessage;
   propsForGroupInvitation?: PropsForGroupInvitation;
   propsForTimerNotification?: PropsForExpirationTimer;
   propsForDataExtractionNotification?: PropsForDataExtractionNotification;
@@ -79,12 +79,14 @@ export type PropsForExpiringMessage = {
   convoId?: string;
   messageId: string;
   direction: MessageModelType;
+  receivedAt?: number;
+  isUnread?: boolean;
   expirationTimestamp?: number | null;
   expirationLength?: number | null;
   isExpired?: boolean;
 };
 
-export type PropsForExpirationTimer = PropsForExpiringMessage & {
+export type PropsForExpirationTimer = {
   expirationType: DisappearingMessageConversationType;
   timespan: string;
   disabled: boolean;
@@ -95,8 +97,6 @@ export type PropsForExpirationTimer = PropsForExpiringMessage & {
   title: string | null;
   type: 'fromMe' | 'fromSync' | 'fromOther';
   messageId: string;
-  isUnread: boolean;
-  receivedAt: number | undefined;
 };
 
 export type PropsForGroupUpdateGeneral = {
@@ -130,20 +130,17 @@ export type PropsForGroupUpdateType =
   | PropsForGroupUpdateName
   | PropsForGroupUpdateLeft;
 
-export type PropsForGroupUpdate = PropsForExpiringMessage & {
+export type PropsForGroupUpdate = {
   change: PropsForGroupUpdateType;
   messageId: string;
-  receivedAt: number | undefined;
-  isUnread: boolean;
 };
 
-export type PropsForGroupInvitation = PropsForExpiringMessage & {
+export type PropsForGroupInvitation = {
   serverName: string;
   url: string;
+  direction: MessageModelType;
   acceptUrl: string;
   messageId: string;
-  receivedAt?: number;
-  isUnread: boolean;
 };
 
 export type PropsForAttachment = {

ts/state/selectors/conversations.ts

@@ -8,6 +8,7 @@ import {
   MessageModelPropsWithConvoProps,
   MessageModelPropsWithoutConvoProps,
   MessagePropsDetails,
+  PropsForExpiringMessage,
   ReduxConversationType,
   SortedMessageModelProps,
 } from '../ducks/conversations';
@@ -1089,6 +1090,29 @@ export const getMessageAttachmentProps = createSelector(getMessagePropsByMessage
   return msgProps;
 });
 
+export const getMessageExpirationProps = createSelector(getMessagePropsByMessageId, (props):
+  | PropsForExpiringMessage
+  | undefined => {
+  if (!props || isEmpty(props)) {
+    return undefined;
+  }
+
+  const msgProps: PropsForExpiringMessage = {
+    ...pick(props.propsForMessage, [
+      'convoId',
+      'direction',
+      'receivedAt',
+      'isUnread',
+      'expirationTimestamp',
+      'expirationLength',
+      'isExpired',
+    ]),
+    messageId: props.propsForMessage.id,
+  };
+
+  return msgProps;
+});
+
 export const getIsMessageSelected = createSelector(
   getMessagePropsByMessageId,
   getSelectedMessageIds,
@@ -1151,10 +1175,6 @@ export const getGenericReadableMessageSelectorProps = createSelector(
       'convoId',
       'direction',
       'conversationType',
-      'expirationType',
-      'expirationLength',
-      'expirationTimestamp',
-      'isExpired',
       'isUnread',
       'receivedAt',
       'isKickedFromGroup',