From 5f17d01f4958ef015a1d0b8e46e9951e873e3712 Mon Sep 17 00:00:00 2001 From: Evan Hahn <69474926+EvanHahn-Signal@users.noreply.github.com> Date: Tue, 27 Apr 2021 14:55:21 -0500 Subject: [PATCH] Take an author object in --- .../conversation/Message.stories.tsx | 31 +++++---- ts/components/conversation/Message.tsx | 69 +++++++++---------- .../conversation/MessageDetail.stories.tsx | 6 +- ts/components/conversation/Quote.stories.tsx | 6 +- .../conversation/TimelineItem.stories.tsx | 6 +- ts/models/messages.ts | 14 +--- ts/util/lint/exceptions.json | 6 +- 7 files changed, 67 insertions(+), 71 deletions(-) diff --git a/ts/components/conversation/Message.stories.tsx b/ts/components/conversation/Message.stories.tsx index 93beb2418..69fe1c71b 100644 --- a/ts/components/conversation/Message.stories.tsx +++ b/ts/components/conversation/Message.stories.tsx @@ -66,12 +66,18 @@ const renderAudioAttachment: Props['renderAudioAttachment'] = props => ( ); +const createAuthorProp = ( + overrides: Partial = {} +): Props['author'] => ({ + id: 'some-id', + color: select('authorColor', Colors, Colors[0]), + ...overrides, + title: text('authorTitle', overrides.title || ''), +}); + const createProps = (overrideProps: Partial = {}): Props => ({ attachments: overrideProps.attachments, - authorId: overrideProps.authorId || 'some-id', - authorColor: select('authorColor', Colors, Colors[0]), - authorAvatarPath: overrideProps.authorAvatarPath, - authorTitle: text('authorTitle', overrideProps.authorTitle || ''), + author: overrideProps.author || createAuthorProp(), bodyRanges: overrideProps.bodyRanges, canReply: true, canDownload: true, @@ -212,7 +218,7 @@ story.add('Pending', () => { story.add('Collapsed Metadata', () => { const props = createProps({ - authorTitle: 'Fred Willard', + author: createAuthorProp({ title: 'Fred Willard' }), collapseMetadata: true, conversationType: 'group', text: 'Hello there from a pal!', @@ -425,7 +431,7 @@ story.add('Reactions (short message)', () => { story.add('Avatar in Group', () => { const props = createProps({ - authorAvatarPath: pngUrl, + author: createAuthorProp({ avatarPath: pngUrl }), conversationType: 'group', status: 'sent', text: 'Hello it is me, the saxophone.', @@ -921,15 +927,16 @@ story.add('Dangerous File Type', () => { }); story.add('Colors', () => { - const defaultProps = createProps({ - text: - 'Hello there from a pal! I am sending a long message so that it will wrap a bit, since I like that look.', - }); - return ( <> {Colors.map(color => ( - + ))} ); diff --git a/ts/components/conversation/Message.tsx b/ts/components/conversation/Message.tsx index fa2f56638..128dda061 100644 --- a/ts/components/conversation/Message.tsx +++ b/ts/components/conversation/Message.tsx @@ -8,6 +8,7 @@ import { drop, groupBy, orderBy, take } from 'lodash'; import { ContextMenu, ContextMenuTrigger, MenuItem } from 'react-contextmenu'; import { Manager, Popper, Reference } from 'react-popper'; +import { ConversationType } from '../../state/ducks/conversations'; import { Avatar } from '../Avatar'; import { Spinner } from '../Spinner'; import { MessageBody } from './MessageBody'; @@ -105,12 +106,16 @@ export type PropsData = { timestamp: number; status?: MessageStatusType; contact?: ContactType; - authorId: string; - authorTitle: string; - authorName?: string; - authorProfileName?: string; - authorPhoneNumber?: string; - authorColor?: ColorType; + author: Pick< + ConversationType, + | 'avatarPath' + | 'color' + | 'id' + | 'name' + | 'phoneNumber' + | 'profileName' + | 'title' + >; conversationType: ConversationTypesType; attachments?: Array; quote?: { @@ -128,7 +133,6 @@ export type PropsData = { referencedMessageNotFound: boolean; }; previews: Array; - authorAvatarPath?: string; isExpired?: boolean; isTapToView?: boolean; @@ -633,10 +637,7 @@ export class Message extends React.Component { public renderAuthor(): JSX.Element | null { const { - authorTitle, - authorName, - authorPhoneNumber, - authorProfileName, + author, collapseMetadata, conversationType, direction, @@ -653,7 +654,7 @@ export class Message extends React.Component { if ( direction !== 'incoming' || conversationType !== 'group' || - !authorTitle + !author.title ) { return null; } @@ -669,10 +670,10 @@ export class Message extends React.Component { return (
@@ -996,8 +997,8 @@ export class Message extends React.Component { public renderQuote(): JSX.Element | null { const { + author, conversationType, - authorColor, direction, disableScroll, i18n, @@ -1012,7 +1013,7 @@ export class Message extends React.Component { const withContentAbove = conversationType === 'group' && direction === 'incoming'; const quoteColor = - direction === 'incoming' ? authorColor : quote.authorColor; + direction === 'incoming' ? author.color : quote.authorColor; const { referencedMessageNotFound } = quote; const clickHandler = disableScroll @@ -1104,14 +1105,8 @@ export class Message extends React.Component { public renderAvatar(): JSX.Element | undefined { const { - authorAvatarPath, - authorId, - authorName, - authorPhoneNumber, - authorProfileName, - authorTitle, + author, collapseMetadata, - authorColor, conversationType, direction, i18n, @@ -1135,18 +1130,18 @@ export class Message extends React.Component { @@ -2191,7 +2186,7 @@ export class Message extends React.Component { public renderContainer(): JSX.Element { const { - authorColor, + author, deletedForEveryone, direction, isSticker, @@ -2216,13 +2211,13 @@ export class Message extends React.Component { ? 'module-message__container--with-tap-to-view-expired' : null, !isSticker && direction === 'incoming' - ? `module-message__container--incoming-${authorColor}` + ? `module-message__container--incoming-${author.color}` : null, isTapToView && isAttachmentPending && !isTapToViewExpired ? 'module-message__container--with-tap-to-view-pending' : null, isTapToView && isAttachmentPending && !isTapToViewExpired - ? `module-message__container--${direction}-${authorColor}-tap-to-view-pending` + ? `module-message__container--${direction}-${author.color}-tap-to-view-pending` : null, isTapToViewError ? 'module-message__container--with-tap-to-view-error' @@ -2249,7 +2244,7 @@ export class Message extends React.Component { public render(): JSX.Element | null { const { - authorId, + author, attachments, direction, id, @@ -2260,7 +2255,7 @@ export class Message extends React.Component { // This id is what connects our triple-dot click with our associated pop-up menu. // It needs to be unique. - const triggerId = String(id || `${authorId}-${timestamp}`); + const triggerId = String(id || `${author.id}-${timestamp}`); if (expired) { return null; diff --git a/ts/components/conversation/MessageDetail.stories.tsx b/ts/components/conversation/MessageDetail.stories.tsx index 8d6e5a579..4fe7964f8 100644 --- a/ts/components/conversation/MessageDetail.stories.tsx +++ b/ts/components/conversation/MessageDetail.stories.tsx @@ -17,8 +17,10 @@ const i18n = setupI18n('en', enMessages); const story = storiesOf('Components/Conversation/MessageDetail', module); const defaultMessage: MessageDataPropsType = { - authorId: 'some-id', - authorTitle: 'Max', + author: { + id: 'some-id', + title: 'Max', + }, canReply: true, canDeleteForEveryone: true, canDownload: true, diff --git a/ts/components/conversation/Quote.stories.tsx b/ts/components/conversation/Quote.stories.tsx index 492e9c37d..e2a20db75 100644 --- a/ts/components/conversation/Quote.stories.tsx +++ b/ts/components/conversation/Quote.stories.tsx @@ -27,8 +27,10 @@ const i18n = setupI18n('en', enMessages); const story = storiesOf('Components/Conversation/Quote', module); const defaultMessageProps: MessagesProps = { - authorId: 'some-id', - authorTitle: 'Person X', + author: { + id: 'some-id', + title: 'Person X', + }, canReply: true, canDeleteForEveryone: true, canDownload: true, diff --git a/ts/components/conversation/TimelineItem.stories.tsx b/ts/components/conversation/TimelineItem.stories.tsx index fbb9fecd6..4affd8f76 100644 --- a/ts/components/conversation/TimelineItem.stories.tsx +++ b/ts/components/conversation/TimelineItem.stories.tsx @@ -84,8 +84,10 @@ storiesOf('Components/Conversation/TimelineItem', module) id: 'id-1', direction: 'incoming', timestamp: Date.now(), - authorPhoneNumber: '(202) 555-2001', - authorColor: 'green', + author: { + phoneNumber: '(202) 555-2001', + color: 'green', + }, text: '🔥', }, } as TimelineItemProps['item']; diff --git a/ts/models/messages.ts b/ts/models/messages.ts index 99b3cc1ae..d4011abac 100644 --- a/ts/models/messages.ts +++ b/ts/models/messages.ts @@ -884,12 +884,6 @@ export class MessageModel extends window.Backbone.Model { getPropsForMessage(): PropsForMessage { const sourceId = this.getContactId(); const contact = this.findAndFormatContact(sourceId); - const contactModel = this.findContact(sourceId); - - const authorColor = contactModel ? contactModel.getColor() : undefined; - const authorAvatarPath = contactModel - ? contactModel.getAbsoluteAvatarPath() - : undefined; const expirationLength = this.get('expireTimer') * 1000; const expireTimerStart = this.get('expirationStartTimestamp'); @@ -921,6 +915,7 @@ export class MessageModel extends window.Backbone.Model { ).emoji; return { + author: contact, text: this.createNonBreakingLastSeparator(this.get('body')), textPending: this.get('bodyPending'), id: this.id, @@ -933,17 +928,10 @@ export class MessageModel extends window.Backbone.Model { canReply: this.canReply(), canDeleteForEveryone: this.canDeleteForEveryone(), canDownload: this.canDownload(), - authorId: contact.id, - authorTitle: contact.title, - authorColor, - authorName: contact.name, - authorProfileName: contact.profileName, - authorPhoneNumber: contact.phoneNumber, conversationType: isGroup ? 'group' : 'direct', attachments: this.getAttachmentsForMessage(), previews: this.getPropsForPreview(), quote: this.getPropsForQuote(), - authorAvatarPath, isExpired: this.hasExpired, expirationLength, expirationTimestamp, diff --git a/ts/util/lint/exceptions.json b/ts/util/lint/exceptions.json index 7a1d8e106..da2a2911b 100644 --- a/ts/util/lint/exceptions.json +++ b/ts/util/lint/exceptions.json @@ -16573,7 +16573,7 @@ "rule": "React-createRef", "path": "ts/components/conversation/Message.tsx", "line": " public focusRef: React.RefObject = React.createRef();", - "lineNumber": 242, + "lineNumber": 246, "reasonCategory": "usageTrusted", "updated": "2021-03-05T19:57:01.431Z", "reasonDetail": "Used for managing focus only" @@ -16582,7 +16582,7 @@ "rule": "React-createRef", "path": "ts/components/conversation/Message.tsx", "line": " public audioButtonRef: React.RefObject = React.createRef();", - "lineNumber": 244, + "lineNumber": 248, "reasonCategory": "usageTrusted", "updated": "2021-03-05T19:57:01.431Z", "reasonDetail": "Used for propagating click from the Message to MessageAudio's button" @@ -16591,7 +16591,7 @@ "rule": "React-createRef", "path": "ts/components/conversation/Message.tsx", "line": " public reactionsContainerRef: React.RefObject = React.createRef();", - "lineNumber": 246, + "lineNumber": 250, "reasonCategory": "usageTrusted", "updated": "2021-03-05T19:57:01.431Z", "reasonDetail": "Used for detecting clicks outside reaction viewer"