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,21 +19,28 @@ export const DataExtractionNotification = (props: PropsForDataExtractionNotifica
   }
 
   return (
-    <Flex
-      container={true}
-      flexDirection="column"
-      alignItems="center"
-      margin={theme.common.margins.sm}
-      id={`msg-${messageId}`}
+    <ReadableMessage
+      messageId={messageId}
+      receivedAt={receivedAt}
+      isUnread={isUnread}
+      key={`readable-message-${messageId}`}
     >
-      <SessionIcon
-        iconType={SessionIconType.Upload}
-        theme={theme}
-        iconSize={SessionIconSize.Small}
-        iconRotation={180}
-      />
-      <SpacerXS />
-      <Text text={contentText} subtle={true} />
-    </Flex>
+      <Flex
+        container={true}
+        flexDirection="column"
+        alignItems="center"
+        margin={theme.common.margins.sm}
+        id={`msg-${messageId}`}
+      >
+        <SessionIcon
+          iconType={SessionIconType.Upload}
+          theme={theme}
+          iconSize={SessionIconSize.Small}
+          iconRotation={180}
+        />
+        <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,25 +17,32 @@ export const GroupInvitation = (props: PropsForGroupInvitation) => {
   const openGroupInvitation = window.i18n('openGroupInvitation');
 
   return (
-    <div className="group-invitation-container" id={`msg-${props.messageId}`}>
-      <div className={classNames(classes)}>
-        <div className="contents">
-          <SessionIconButton
-            iconType={SessionIconType.Plus}
-            iconColor={theme.colors.accent}
-            theme={theme}
-            iconSize={SessionIconSize.Large}
-            onClick={() => {
-              acceptOpenGroupInvitation(props.acceptUrl, props.serverName);
-            }}
-          />
-          <span className="group-details">
-            <span className="group-name">{props.serverName}</span>
-            <span className="group-type">{openGroupInvitation}</span>
-            <span className="group-address">{props.url}</span>
-          </span>
+    <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">
+            <SessionIconButton
+              iconType={SessionIconType.Plus}
+              iconColor={theme.colors.accent}
+              theme={theme}
+              iconSize={SessionIconSize.Large}
+              onClick={() => {
+                acceptOpenGroupInvitation(props.acceptUrl, props.serverName);
+              }}
+            />
+            <span className="group-details">
+              <span className="group-name">{props.serverName}</span>
+              <span className="group-type">{openGroupInvitation}</span>
+              <span className="group-address">{props.url}</span>
+            </span>
+          </div>
         </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,14 +90,21 @@ function renderChange(change: PropsForGroupUpdateType) {
 }
 
 export const GroupNotification = (props: PropsForGroupUpdate) => {
-  const { changes } = props;
+  const { changes, messageId, receivedAt, isUnread } = props;
   return (
-    <div className="module-group-notification" id={`msg-${props.messageId}`}>
-      {(changes || []).map((change, index) => (
-        <div key={index} className="module-group-notification__change">
-          {renderChange(change)}
-        </div>
-      ))}
-    </div>
+    <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">
+            {renderChange(change)}
+          </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,21 +34,30 @@ const TimerNotificationContent = (props: PropsForExpirationTimer) => {
 };
 
 export const TimerNotification = (props: PropsForExpirationTimer) => {
+  const { messageId, receivedAt, isUnread } = props;
+
   return (
-    <div className="module-timer-notification" id={`msg-${props.messageId}`}>
-      <div className="module-timer-notification__message">
-        <div>
-          <SessionIcon
-            iconType={SessionIconType.Stopwatch}
-            iconSize={SessionIconSize.Small}
-            iconColor={'#ABABAB'}
-          />
-        </div>
+    <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>
+            <SessionIcon
+              iconType={SessionIconType.Stopwatch}
+              iconSize={SessionIconSize.Small}
+              iconColor={'#ABABAB'}
+            />
+          </div>
 
-        <div>
-          <TimerNotificationContent {...props} />
+          <div>
+            <TimerNotificationContent {...props} />
+          </div>
         </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 = {