make all messages types a readable message

ts/components/conversation/DataExtractionNotification.tsx

@@ -5,10 +5,11 @@ import { SignalService } from '../../protobuf';
 import { Flex } from '../basic/Flex';
 import { SessionIcon, SessionIconSize, SessionIconType } from '../session/icon';
 import { SpacerXS, Text } from '../basic/Text';
+import { ReadableMessage } from './ReadableMessage';
 
 export const DataExtractionNotification = (props: PropsForDataExtractionNotification) => {
   const theme = useTheme();
-  const { name, type, source, messageId } = props;
+  const { name, type, source, messageId, isUnread, receivedAt } = props;
 
   let contentText: string;
   if (type === SignalService.DataExtractionNotification.Type.MEDIA_SAVED) {
@@ -18,6 +19,12 @@ export const DataExtractionNotification = (props: PropsForDataExtractionNotifica
   }
 
   return (
+    <ReadableMessage
+      messageId={messageId}
+      receivedAt={receivedAt}
+      isUnread={isUnread}
+      key={`readable-message-${messageId}`}
+    >
       <Flex
         container={true}
         flexDirection="column"
@@ -34,5 +41,6 @@ export const DataExtractionNotification = (props: PropsForDataExtractionNotifica
         <SpacerXS />
         <Text text={contentText} subtle={true} />
       </Flex>
+    </ReadableMessage>
   );
 };

ts/components/conversation/GroupInvitation.tsx

@@ -4,8 +4,10 @@ import { SessionIconButton, SessionIconSize, SessionIconType } from '../session/
 import { useTheme } from 'styled-components';
 import { PropsForGroupInvitation } from '../../state/ducks/conversations';
 import { acceptOpenGroupInvitation } from '../../interactions/messageInteractions';
+import { ReadableMessage } from './ReadableMessage';
 
 export const GroupInvitation = (props: PropsForGroupInvitation) => {
+  const { messageId, receivedAt, isUnread } = props;
   const theme = useTheme();
   const classes = ['group-invitation'];
 
@@ -15,6 +17,12 @@ export const GroupInvitation = (props: PropsForGroupInvitation) => {
   const openGroupInvitation = window.i18n('openGroupInvitation');
 
   return (
+    <ReadableMessage
+      messageId={messageId}
+      receivedAt={receivedAt}
+      isUnread={isUnread}
+      key={`readable-message-${messageId}`}
+    >
       <div className="group-invitation-container" id={`msg-${props.messageId}`}>
         <div className={classNames(classes)}>
           <div className="contents">
@@ -35,5 +43,6 @@ export const GroupInvitation = (props: PropsForGroupInvitation) => {
           </div>
         </div>
       </div>
+    </ReadableMessage>
   );
 };

ts/components/conversation/GroupNotification.tsx

@@ -11,6 +11,7 @@ import {
   PropsForGroupUpdateType,
 } from '../../state/ducks/conversations';
 import _ from 'underscore';
+import { ReadableMessage } from './ReadableMessage';
 
 // This component is used to display group updates in the conversation view.
 // This is a not a "notification" as the name suggests, but a message inside the conversation
@@ -89,8 +90,14 @@ function renderChange(change: PropsForGroupUpdateType) {
 }
 
 export const GroupNotification = (props: PropsForGroupUpdate) => {
-  const { changes } = props;
+  const { changes, messageId, receivedAt, isUnread } = props;
   return (
+    <ReadableMessage
+      messageId={messageId}
+      receivedAt={receivedAt}
+      isUnread={isUnread}
+      key={`readable-message-${messageId}`}
+    >
       <div className="module-group-notification" id={`msg-${props.messageId}`}>
         {(changes || []).map((change, index) => (
           <div key={index} className="module-group-notification__change">
@@ -98,5 +105,6 @@ export const GroupNotification = (props: PropsForGroupUpdate) => {
           </div>
         ))}
       </div>
+    </ReadableMessage>
   );
 };

ts/components/conversation/Message.tsx

@@ -637,7 +637,6 @@ class MessageInner extends React.PureComponent<Props, State> {
         onContextMenu={this.handleContextMenu}
         receivedAt={receivedAt}
         isUnread={isUnread}
-        direction={direction}
         key={`readable-message-${messageId}`}
       >
         {this.renderAvatar()}

ts/components/conversation/ReadableMessage.tsx

@@ -26,12 +26,10 @@ import {
 type ReadableMessageProps = {
   children: React.ReactNode;
   messageId: string;
-  className: string;
+  className?: string;
   receivedAt: number | undefined;
   isUnread: boolean;
-  direction: MessageModelType;
-
-  onContextMenu: (e: any) => void;
+  onContextMenu?: (e: any) => void;
 };
 
 const debouncedTriggerLoadMore = _.debounce(
@@ -48,7 +46,7 @@ const debouncedTriggerLoadMore = _.debounce(
 );
 
 export const ReadableMessage = (props: ReadableMessageProps) => {
-  const { messageId, onContextMenu, className, receivedAt, isUnread, direction } = props;
+  const { messageId, onContextMenu, className, receivedAt, isUnread } = props;
 
   const isAppFocused = useAppIsFocused();
   const dispatch = useDispatch();
@@ -60,8 +58,7 @@ export const ReadableMessage = (props: ReadableMessageProps) => {
   const mostRecentMessageId = useSelector(getMostRecentMessageId);
   const oldestMessageId = useSelector(getOldestMessageId);
   const fetchingMore = useSelector(areMoreMessagesBeingFetched);
-  const isIncoming = direction === 'incoming';
-  const shouldMarkReadWhenVisible = isIncoming && isUnread;
+  const shouldMarkReadWhenVisible = isUnread;
 
   const onVisible = useCallback(
     async (inView: boolean | Object) => {

ts/components/conversation/TimerNotification.tsx

@@ -5,6 +5,7 @@ import { Intl } from '../Intl';
 import { missingCaseError } from '../../util/missingCaseError';
 import { SessionIcon, SessionIconSize, SessionIconType } from '../session/icon';
 import { PropsForExpirationTimer } from '../../state/ducks/conversations';
+import { ReadableMessage } from './ReadableMessage';
 
 const TimerNotificationContent = (props: PropsForExpirationTimer) => {
   const { phoneNumber, profileName, timespan, type, disabled } = props;
@@ -33,7 +34,15 @@ const TimerNotificationContent = (props: PropsForExpirationTimer) => {
 };
 
 export const TimerNotification = (props: PropsForExpirationTimer) => {
+  const { messageId, receivedAt, isUnread } = props;
+
   return (
+    <ReadableMessage
+      messageId={messageId}
+      receivedAt={receivedAt}
+      isUnread={isUnread}
+      key={`readable-message-${messageId}`}
+    >
       <div className="module-timer-notification" id={`msg-${props.messageId}`}>
         <div className="module-timer-notification__message">
           <div>
@@ -49,5 +58,6 @@ export const TimerNotification = (props: PropsForExpirationTimer) => {
           </div>
         </div>
       </div>
+    </ReadableMessage>
   );
 };

ts/models/message.ts

@@ -296,6 +296,8 @@ export class MessageModel extends Backbone.Model<MessageAttributes> {
       disabled,
       type: fromSync ? 'fromSync' : UserUtils.isUsFromCache(source) ? 'fromMe' : 'fromOther',
       messageId: this.id,
+      receivedAt: this.get('received_at'),
+      isUnread: this.isUnread(),
     };
 
     return basicProps;
@@ -326,6 +328,8 @@ export class MessageModel extends Backbone.Model<MessageAttributes> {
       direction,
       acceptUrl: invitation.url,
       messageId: this.id as string,
+      receivedAt: this.get('received_at'),
+      isUnread: this.isUnread(),
     };
   }
 
@@ -346,6 +350,8 @@ export class MessageModel extends Backbone.Model<MessageAttributes> {
       ...dataExtractionNotification,
       name: contact.profileName || contact.name || dataExtractionNotification.source,
       messageId: this.id,
+      receivedAt: this.get('received_at'),
+      isUnread: this.isUnread(),
     };
   }
 
@@ -462,6 +468,8 @@ export class MessageModel extends Backbone.Model<MessageAttributes> {
     return {
       changes,
       messageId: this.id,
+      isUnread: this.isUnread(),
+      receivedAt: this.get('received_at'),
     };
   }
 

ts/models/messageType.ts

@@ -109,6 +109,8 @@ export interface DataExtractionNotificationMsg {
 export type PropsForDataExtractionNotification = DataExtractionNotificationMsg & {
   name: string;
   messageId: string;
+  receivedAt?: number;
+  isUnread: boolean;
 };
 
 export interface MessageAttributesOptionals {

ts/state/ducks/conversations.ts

@@ -67,6 +67,8 @@ export type PropsForExpirationTimer = {
   title: string | null;
   type: 'fromMe' | 'fromSync' | 'fromOther';
   messageId: string;
+  isUnread: boolean;
+  receivedAt: number | undefined;
 };
 
 export type PropsForGroupUpdateGeneral = {
@@ -107,6 +109,8 @@ export type PropsForGroupUpdateArray = Array<PropsForGroupUpdateType>;
 export type PropsForGroupUpdate = {
   changes: PropsForGroupUpdateArray;
   messageId: string;
+  receivedAt: number | undefined;
+  isUnread: boolean;
 };
 
 export type PropsForGroupInvitation = {
@@ -115,6 +119,8 @@ export type PropsForGroupInvitation = {
   direction: MessageModelType;
   acceptUrl: string;
   messageId: string;
+  receivedAt?: number;
+  isUnread: boolean;
 };
 
 export type PropsForSearchResults = {