From 5d4238a3d8afd2bfc448f76d6bafbbfe4b473f3e Mon Sep 17 00:00:00 2001 From: William Grant Date: Thu, 18 May 2023 15:41:01 +1000 Subject: [PATCH] feat: created getMessageExpirationProps selector and used in ExpirableReadableMessage this stops us passing props down from the child components of ExpirableReadableMessage --- .../conversation/TimerNotification.tsx | 20 +------- .../DataExtractionNotification.tsx | 24 +-------- .../message-item/ExpirableReadableMessage.tsx | 49 ++++++++++++------- .../message-item/GenericReadableMessage.tsx | 14 +----- .../message/message-item/GroupInvitation.tsx | 14 +----- .../message-item/GroupUpdateMessage.tsx | 22 +-------- .../notification-bubble/CallNotification.tsx | 22 +-------- ts/hooks/useParamSelector.ts | 15 +++++- ts/models/message.ts | 12 ++--- ts/models/messageType.ts | 12 +---- ts/state/ducks/conversations.ts | 21 ++++---- ts/state/selectors/conversations.ts | 28 +++++++++-- 12 files changed, 97 insertions(+), 156 deletions(-) diff --git a/ts/components/conversation/TimerNotification.tsx b/ts/components/conversation/TimerNotification.tsx index be5c2c2de..37a27728a 100644 --- a/ts/components/conversation/TimerNotification.tsx +++ b/ts/components/conversation/TimerNotification.tsx @@ -14,19 +14,7 @@ const StyledTimerNotification = styled(Flex)` `; export const TimerNotification = (props: PropsForExpirationTimer) => { - const { - messageId, - receivedAt, - isUnread, - pubkey, - profileName, - expirationType, - expirationLength, - expirationTimestamp, - timespan, - type, - disabled, - } = props; + const { messageId, pubkey, profileName, expirationType, 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 ( { - const { - name, - type, - source, - messageId, - isUnread, - receivedAt, - direction, - expirationLength, - expirationTimestamp, - isExpired, - } = props; + const { name, type, source, messageId } = props; let contentText: string; if (type === SignalService.DataExtractionNotification.Type.MEDIA_SAVED) { @@ -28,16 +17,7 @@ export const DataExtractionNotification = (props: PropsForDataExtractionNotifica } return ( - + { + messageId: string; + // 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, - messageId, - direction, - receivedAt, - isUnread, - expirationLength, - expirationTimestamp, + direction: overrideDirection, 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, - }; - const { isExpired } = useIsExpired(expiringProps); - const isIncoming = direction === 'incoming'; + expirationTimestamp, + expirationLength, + isExpired: _isExpired, + }); if (isExpired) { return null; } + const isIncoming = direction === 'incoming'; + return ( ; @@ -152,16 +149,7 @@ export const GenericReadableMessage = (props: Props) => { isUnread={!!isUnread} key={`readable-message-${messageId}`} > - + { - 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 ( - +
diff --git a/ts/components/conversation/message/message-item/GroupUpdateMessage.tsx b/ts/components/conversation/message/message-item/GroupUpdateMessage.tsx index ff6e7f99c..6169258ba 100644 --- a/ts/components/conversation/message/message-item/GroupUpdateMessage.tsx +++ b/ts/components/conversation/message/message-item/GroupUpdateMessage.tsx @@ -71,28 +71,10 @@ const ChangeItem = (change: PropsForGroupUpdateType): string => { }; export const GroupUpdateMessage = (props: PropsForGroupUpdate) => { - const { - change, - messageId, - receivedAt, - isUnread, - direction, - expirationLength, - expirationTimestamp, - isExpired, - } = props; + const { change, messageId } = props; return ( - + ); diff --git a/ts/components/conversation/message/message-item/notification-bubble/CallNotification.tsx b/ts/components/conversation/message/message-item/notification-bubble/CallNotification.tsx index 6c32219e4..cc793a4de 100644 --- a/ts/components/conversation/message/message-item/notification-bubble/CallNotification.tsx +++ b/ts/components/conversation/message/message-item/notification-bubble/CallNotification.tsx @@ -36,16 +36,7 @@ const style: StyleType = { }; export const CallNotification = (props: PropsForCallNotification) => { - const { - messageId, - receivedAt, - isUnread, - notificationType, - direction, - expirationLength, - expirationTimestamp, - isExpired, - } = props; + const { messageId, notificationType } = props; const selectedConvoProps = useSelector(getSelectedConversation); @@ -63,16 +54,7 @@ export const CallNotification = (props: PropsForCallNotification) => { const iconColor = styleItem.iconColor; return ( - + { + 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) { diff --git a/ts/models/message.ts b/ts/models/message.ts index c260567e1..416398078 100644 --- a/ts/models/message.ts +++ b/ts/models/message.ts @@ -149,6 +149,7 @@ export class MessageModel extends Backbone.Model { 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 { 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 { 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 { 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 { 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 { 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 { } const sharedProps = { - messageId: this.id, isUnread: this.isUnread(), receivedAt: this.get('received_at'), ...this.getPropsForExpiringMessage(), diff --git a/ts/models/messageType.ts b/ts/models/messageType.ts index 67f4c86fa..39a78fc11 100644 --- a/ts/models/messageType.ts +++ b/ts/models/messageType.ts @@ -1,10 +1,6 @@ import { defaultsDeep } from 'lodash'; import { v4 as uuidv4 } from 'uuid'; -import { - CallNotificationType, - PropsForExpiringMessage, - PropsForMessageWithConvoProps, -} from '../state/ducks/conversations'; +import { CallNotificationType, 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 - extends DataExtractionNotificationMsg, - PropsForExpiringMessage { +export interface PropsForDataExtractionNotification extends DataExtractionNotificationMsg { name: string; messageId: string; - receivedAt?: number; - isUnread: boolean; } export type PropsForMessageRequestResponse = MessageRequestResponseMsg & { diff --git a/ts/state/ducks/conversations.ts b/ts/state/ducks/conversations.ts index d0cc15300..144717583 100644 --- a/ts/state/ducks/conversations.ts +++ b/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; - isUnread: boolean; + messageId: string; }; 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 = { diff --git a/ts/state/selectors/conversations.ts b/ts/state/selectors/conversations.ts index 7030694be..0b506fdda 100644 --- a/ts/state/selectors/conversations.ts +++ b/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',