From 360cb5268072b28a966ce407a66ab01fd3ea8c05 Mon Sep 17 00:00:00 2001 From: Audric Ackermann Date: Fri, 30 Jul 2021 16:26:58 +1000 Subject: [PATCH] make all messages types a readable message --- .../DataExtractionNotification.tsx | 40 ++++++++++------- .../conversation/GroupInvitation.tsx | 45 +++++++++++-------- .../conversation/GroupNotification.tsx | 24 ++++++---- ts/components/conversation/Message.tsx | 1 - .../conversation/ReadableMessage.tsx | 11 ++--- .../conversation/TimerNotification.tsx | 34 +++++++++----- ts/models/message.ts | 8 ++++ ts/models/messageType.ts | 2 + ts/state/ducks/conversations.ts | 6 +++ 9 files changed, 109 insertions(+), 62 deletions(-) diff --git a/ts/components/conversation/DataExtractionNotification.tsx b/ts/components/conversation/DataExtractionNotification.tsx index 5eea9cedd..9e39722b4 100644 --- a/ts/components/conversation/DataExtractionNotification.tsx +++ b/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 ( - - - - - + + + + + + ); }; diff --git a/ts/components/conversation/GroupInvitation.tsx b/ts/components/conversation/GroupInvitation.tsx index 6b753505a..85a34c509 100644 --- a/ts/components/conversation/GroupInvitation.tsx +++ b/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 ( -
-
-
- { - acceptOpenGroupInvitation(props.acceptUrl, props.serverName); - }} - /> - - {props.serverName} - {openGroupInvitation} - {props.url} - + +
+
+
+ { + acceptOpenGroupInvitation(props.acceptUrl, props.serverName); + }} + /> + + {props.serverName} + {openGroupInvitation} + {props.url} + +
-
+ ); }; diff --git a/ts/components/conversation/GroupNotification.tsx b/ts/components/conversation/GroupNotification.tsx index ccbf5d095..09f1395cb 100644 --- a/ts/components/conversation/GroupNotification.tsx +++ b/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 ( -
- {(changes || []).map((change, index) => ( -
- {renderChange(change)} -
- ))} -
+ +
+ {(changes || []).map((change, index) => ( +
+ {renderChange(change)} +
+ ))} +
+ ); }; diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx index 9b5fd9ed2..a7babefe9 100644 --- a/ts/components/conversation/Message.tsx +++ b/ts/components/conversation/Message.tsx @@ -637,7 +637,6 @@ class MessageInner extends React.PureComponent { onContextMenu={this.handleContextMenu} receivedAt={receivedAt} isUnread={isUnread} - direction={direction} key={`readable-message-${messageId}`} > {this.renderAvatar()} diff --git a/ts/components/conversation/ReadableMessage.tsx b/ts/components/conversation/ReadableMessage.tsx index 851fc1d52..6c4af4636 100644 --- a/ts/components/conversation/ReadableMessage.tsx +++ b/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) => { diff --git a/ts/components/conversation/TimerNotification.tsx b/ts/components/conversation/TimerNotification.tsx index 7c5cb5d08..db5458f09 100644 --- a/ts/components/conversation/TimerNotification.tsx +++ b/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 ( -
-
-
- -
+ +
+
+
+ +
-
- +
+ +
-
+ ); }; diff --git a/ts/models/message.ts b/ts/models/message.ts index 55a9b99cc..d8bdbc72c 100644 --- a/ts/models/message.ts +++ b/ts/models/message.ts @@ -296,6 +296,8 @@ export class MessageModel extends Backbone.Model { 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 { 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 { ...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 { return { changes, messageId: this.id, + isUnread: this.isUnread(), + receivedAt: this.get('received_at'), }; } diff --git a/ts/models/messageType.ts b/ts/models/messageType.ts index aa58249da..f2270ca83 100644 --- a/ts/models/messageType.ts +++ b/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 { diff --git a/ts/state/ducks/conversations.ts b/ts/state/ducks/conversations.ts index 07af3facb..7322b5179 100644 --- a/ts/state/ducks/conversations.ts +++ b/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; 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 = {