Take an author object in <Message>

ts/components/conversation/Message.stories.tsx

@@ -66,12 +66,18 @@ const renderAudioAttachment: Props['renderAudioAttachment'] = props => (
   <MessageAudioContainer {...props} />
 );
 
+const createAuthorProp = (
+  overrides: Partial<Props['author']> = {}
+): Props['author'] => ({
+  id: 'some-id',
+  color: select('authorColor', Colors, Colors[0]),
+  ...overrides,
+  title: text('authorTitle', overrides.title || ''),
+});
+
 const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   attachments: overrideProps.attachments,
-  authorId: overrideProps.authorId || 'some-id',
+  author: overrideProps.author || createAuthorProp(),
-  authorColor: select('authorColor', Colors, Colors[0]),
-  authorAvatarPath: overrideProps.authorAvatarPath,
-  authorTitle: text('authorTitle', overrideProps.authorTitle || ''),
   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 => (
-        <Message {...defaultProps} authorColor={color} />
+        <Message
+          {...createProps({
+            author: createAuthorProp({ color }),
+            text:
+              'Hello there from a pal! I am sending a long message so that it will wrap a bit, since I like that look.',
+          })}
+        />
       ))}
     </>
   );

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;
+  author: Pick<
-  authorTitle: string;
+    ConversationType,
-  authorName?: string;
+    | 'avatarPath'
-  authorProfileName?: string;
+    | 'color'
-  authorPhoneNumber?: string;
+    | 'id'
-  authorColor?: ColorType;
+    | 'name'
+    | 'phoneNumber'
+    | 'profileName'
+    | 'title'
+  >;
   conversationType: ConversationTypesType;
   attachments?: Array<AttachmentType>;
   quote?: {
@@ -128,7 +133,6 @@ export type PropsData = {
     referencedMessageNotFound: boolean;
   };
   previews: Array<LinkPreviewType>;
-  authorAvatarPath?: string;
   isExpired?: boolean;
 
   isTapToView?: boolean;
@@ -633,10 +637,7 @@ export class Message extends React.Component<Props, State> {
 
   public renderAuthor(): JSX.Element | null {
     const {
-      authorTitle,
+      author,
-      authorName,
-      authorPhoneNumber,
-      authorProfileName,
       collapseMetadata,
       conversationType,
       direction,
@@ -653,7 +654,7 @@ export class Message extends React.Component<Props, State> {
     if (
       direction !== 'incoming' ||
       conversationType !== 'group' ||
-      !authorTitle
+      !author.title
     ) {
       return null;
     }
@@ -669,10 +670,10 @@ export class Message extends React.Component<Props, State> {
     return (
       <div className={moduleName}>
         <ContactName
-          title={authorTitle}
+          title={author.title}
-          phoneNumber={authorPhoneNumber}
+          phoneNumber={author.phoneNumber}
-          name={authorName}
+          name={author.name}
-          profileName={authorProfileName}
+          profileName={author.profileName}
           module={moduleName}
           i18n={i18n}
         />
@@ -996,8 +997,8 @@ export class Message extends React.Component<Props, State> {
 
   public renderQuote(): JSX.Element | null {
     const {
+      author,
       conversationType,
-      authorColor,
       direction,
       disableScroll,
       i18n,
@@ -1012,7 +1013,7 @@ export class Message extends React.Component<Props, State> {
     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<Props, State> {
 
   public renderAvatar(): JSX.Element | undefined {
     const {
-      authorAvatarPath,
+      author,
-      authorId,
-      authorName,
-      authorPhoneNumber,
-      authorProfileName,
-      authorTitle,
       collapseMetadata,
-      authorColor,
       conversationType,
       direction,
       i18n,
@@ -1135,18 +1130,18 @@ export class Message extends React.Component<Props, State> {
         <button
           type="button"
           className="module-message__author-avatar"
-          onClick={() => showContactModal(authorId)}
+          onClick={() => showContactModal(author.id)}
           tabIndex={0}
         >
           <Avatar
-            avatarPath={authorAvatarPath}
+            avatarPath={author.avatarPath}
-            color={authorColor}
+            color={author.color}
             conversationType="direct"
             i18n={i18n}
-            name={authorName}
+            name={author.name}
-            phoneNumber={authorPhoneNumber}
+            phoneNumber={author.phoneNumber}
-            profileName={authorProfileName}
+            profileName={author.profileName}
-            title={authorTitle}
+            title={author.title}
             size={28}
           />
         </button>
@@ -2191,7 +2186,7 @@ export class Message extends React.Component<Props, State> {
 
   public renderContainer(): JSX.Element {
     const {
-      authorColor,
+      author,
       deletedForEveryone,
       direction,
       isSticker,
@@ -2216,13 +2211,13 @@ export class Message extends React.Component<Props, State> {
         ? '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<Props, State> {
 
   public render(): JSX.Element | null {
     const {
-      authorId,
+      author,
       attachments,
       direction,
       id,
@@ -2260,7 +2255,7 @@ export class Message extends React.Component<Props, State> {
 
     // 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;

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',
+  author: {
-  authorTitle: 'Max',
+    id: 'some-id',
+    title: 'Max',
+  },
   canReply: true,
   canDeleteForEveryone: true,
   canDownload: true,

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',
+  author: {
-  authorTitle: 'Person X',
+    id: 'some-id',
+    title: 'Person X',
+  },
   canReply: true,
   canDeleteForEveryone: true,
   canDownload: true,

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',
+        author: {
-        authorColor: 'green',
+          phoneNumber: '(202) 555-2001',
+          color: 'green',
+        },
         text: '🔥',
       },
     } as TimelineItemProps['item'];

ts/models/messages.ts

@@ -884,12 +884,6 @@ export class MessageModel extends window.Backbone.Model<MessageAttributesType> {
   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<MessageAttributesType> {
     ).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<MessageAttributesType> {
       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,

ts/util/lint/exceptions.json

@@ -16573,7 +16573,7 @@
     "rule": "React-createRef",
     "path": "ts/components/conversation/Message.tsx",
     "line": "  public focusRef: React.RefObject<HTMLDivElement> = 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<HTMLButtonElement> = 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<HTMLDivElement> = React.createRef();",
-    "lineNumber": 246,
+    "lineNumber": 250,
     "reasonCategory": "usageTrusted",
     "updated": "2021-03-05T19:57:01.431Z",
     "reasonDetail": "Used for detecting clicks outside reaction viewer"