Remove unnecessary props from <ContactName>

ts/components/AddGroupMemberErrorDialog.stories.tsx

@@ -26,10 +26,7 @@ story.add("Can't add a contact", () => (
   <AddGroupMemberErrorDialog
     {...defaultProps}
     mode={AddGroupMemberErrorDialogMode.CantAddContact}
-    contact={{
+    contact={{ title: 'Foo Bar' }}
-      name: 'Foo Bar',
-      title: 'Foo Bar',
-    }}
   />
 ));
 

ts/components/AddGroupMemberErrorDialog.tsx

@@ -18,12 +18,7 @@ export enum AddGroupMemberErrorDialogMode {
 type PropsDataType =
   | {
       mode: AddGroupMemberErrorDialogMode.CantAddContact;
-      contact: {
+      contact: { title: string };
-        name?: string;
-        phoneNumber?: string;
-        profileName?: string;
-        title: string;
-      };
     }
   | {
       mode: AddGroupMemberErrorDialogMode.MaximumGroupSize;
@@ -52,16 +47,7 @@ export const AddGroupMemberErrorDialog: FunctionComponent<PropsType> = props =>
         <Intl
           i18n={i18n}
           id="chooseGroupMembers__cant-add-member__body"
-          components={[
+          components={[<ContactName key="name" title={contact.title} />]}
-            <ContactName
-              key="name"
-              name={contact.name}
-              profileName={contact.profileName}
-              phoneNumber={contact.phoneNumber}
-              title={contact.title}
-              i18n={i18n}
-            />,
-          ]}
         />
       );
       break;

ts/components/CallNeedPermissionScreen.tsx

@@ -64,7 +64,7 @@ export const CallNeedPermissionScreen: React.FC<Props> = ({
         <Intl
           i18n={i18n}
           id="callNeedPermission"
-          components={[<ContactName i18n={i18n} title={title} />]}
+          components={[<ContactName title={title} />]}
         />
       </p>
 

ts/components/CallingParticipantsList.tsx

@@ -115,7 +115,6 @@ export const CallingParticipantsList = React.memo(
                     ) : (
                       <>
                         <ContactName
-                          i18n={i18n}
                           module="module-calling-participants-list__name"
                           title={participant.title}
                         />

ts/components/CompositionArea.tsx

@@ -187,14 +187,11 @@ export const CompositionArea = ({
   isMissingMandatoryProfileSharing,
   left,
   messageRequestsEnabled,
-  name,
   onAccept,
   onBlock,
   onBlockAndReportSpam,
   onDelete,
   onUnblock,
-  phoneNumber,
-  profileName,
   title,
   // GroupV1 Disabled Actions
   isGroupV1AndDisabled,
@@ -425,9 +422,6 @@ export const CompositionArea = ({
         onUnblock={onUnblock}
         onDelete={onDelete}
         onAccept={onAccept}
-        name={name}
-        profileName={profileName}
-        phoneNumber={phoneNumber}
         title={title}
       />
     );
@@ -478,9 +472,6 @@ export const CompositionArea = ({
         onBlockAndReportSpam={onBlockAndReportSpam}
         onDelete={onDelete}
         onAccept={onAccept}
-        name={name}
-        profileName={profileName}
-        phoneNumber={phoneNumber}
         title={title}
       />
     );

ts/components/ContactPill.tsx

@@ -66,12 +66,8 @@ export const ContactPill: FunctionComponent<PropsType> = ({
       />
       <ContactName
         firstName={firstName}
-        i18n={i18n}
         module="module-ContactPill__contact-name"
-        name={name}
-        phoneNumber={phoneNumber}
         preferFirstName
-        profileName={profileName}
         title={title}
       />
       <button

ts/components/GroupCallRemoteParticipant.tsx

@@ -249,14 +249,7 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
                 <Intl
                   i18n={i18n}
                   id="calling__you-have-blocked"
-                  components={[
+                  components={[<ContactName key="name" title={title} />]}
-                    <ContactName
-                      key="name"
-                      profileName={profileName}
-                      title={title}
-                      i18n={i18n}
-                    />,
-                  ]}
                 />
               </div>
             }
@@ -283,9 +276,7 @@ export const GroupCallRemoteParticipant: React.FC<PropsType> = React.memo(
             >
               <ContactName
                 module="module-ongoing-call__group-call-remote-participant--contact-name"
-                profileName={profileName}
                 title={title}
-                i18n={i18n}
               />
             </div>
           )}

ts/components/GroupDialog.tsx

@@ -112,7 +112,6 @@ GroupDialog.Contacts = ({ contacts, i18n }: Readonly<ContactsPropsType>) => (
           i18n={i18n}
         />
         <ContactName
-          i18n={i18n}
           module="module-GroupDialog__contacts__contact__name"
           title={contact.title}
         />

ts/components/IncomingCallBar.tsx

@@ -185,15 +185,7 @@ export const IncomingCallBar = (props: PropsType): JSX.Element | null => {
   switch (props.callMode) {
     case CallMode.Direct:
       ({ isVideoCall } = props);
-      headerNode = (
+      headerNode = <ContactName title={title} />;
-        <ContactName
-          name={name}
-          phoneNumber={phoneNumber}
-          profileName={profileName}
-          title={title}
-          i18n={i18n}
-        />
-      );
       messageNode = i18n(
         isVideoCall ? 'incomingVideoCall' : 'incomingAudioCall'
       );

ts/components/NewlyCreatedGroupInvitedContactsDialog.tsx

@@ -32,7 +32,7 @@ export const NewlyCreatedGroupInvitedContactsDialog: FunctionComponent<PropsType
           <Intl
             i18n={i18n}
             id="NewlyCreatedGroupInvitedContactsDialog--body--user-paragraph--one"
-            components={[<ContactName i18n={i18n} title={contact.title} />]}
+            components={[<ContactName title={contact.title} />]}
           />
         </GroupDialog.Paragraph>
         <GroupDialog.Paragraph>

ts/components/conversation/ContactName.stories.tsx

@@ -1,60 +1,28 @@
-// Copyright 2020 Signal Messenger, LLC
+// Copyright 2020-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
 
 import { storiesOf } from '@storybook/react';
 
-import { setup as setupI18n } from '../../../js/modules/i18n';
-import enMessages from '../../../_locales/en/messages.json';
 import { ContactName } from './ContactName';
 import { ContactNameColors } from '../../types/Colors';
 
-const i18n = setupI18n('en', enMessages);
-
 storiesOf('Components/Conversation/ContactName', module)
-  .add('Number, name and profile', () => {
+  .add('First name and title; title preferred', () => (
-    return (
+    <ContactName firstName="Ignored" title="Someone 🔥 Somewhere" />
-      <ContactName
+  ))
-        title="Someone 🔥 Somewhere"
+  .add('First name and title; first name preferred', () => (
-        name="Someone 🔥 Somewhere"
+    <ContactName
-        phoneNumber="(202) 555-0011"
+      firstName="Someone 🔥 Somewhere"
-        profileName="🔥Flames🔥"
+      title="Ignored"
-        i18n={i18n}
+      preferFirstName
-      />
+    />
-    );
+  ))
-  })
-  .add('Number and profile, no name', () => {
-    return (
-      <ContactName
-        title="🔥Flames🔥"
-        phoneNumber="(202) 555-0011"
-        profileName="🔥Flames🔥"
-        i18n={i18n}
-      />
-    );
-  })
-  .add('No name, no profile', () => {
-    return (
-      <ContactName
-        title="(202) 555-0011"
-        phoneNumber="(202) 555-0011"
-        i18n={i18n}
-      />
-    );
-  })
   .add('Colors', () => {
     return ContactNameColors.map(color => (
       <div key={color}>
-        <ContactName
+        <ContactName title={`Hello ${color}`} contactNameColor={color} />
-          title={`Hello ${color}`}
-          contactNameColor={color}
-          i18n={i18n}
-          phoneNumber="(202) 555-0011"
-        />
       </div>
     ));
-  })
-  .add('No data provided', () => {
-    return <ContactName title="unknownContact" i18n={i18n} />;
   });

ts/components/conversation/ContactName.tsx

@@ -6,18 +6,13 @@ import classNames from 'classnames';
 
 import { Emojify } from './Emojify';
 import { ContactNameColorType } from '../../types/Colors';
-import { LocalizerType } from '../../types/Util';
 import { getClassNamesFor } from '../../util/getClassNamesFor';
 
 export type PropsType = {
   contactNameColor?: ContactNameColorType;
   firstName?: string;
-  i18n: LocalizerType;
   module?: string;
-  name?: string;
-  phoneNumber?: string;
   preferFirstName?: boolean;
-  profileName?: string;
   title: string;
 };
 

ts/components/conversation/ContactSpoofingReviewDialog.tsx

@@ -101,9 +101,6 @@ export const ContactSpoofingReviewDialog: FunctionComponent<PropsType> = props =
             onDelete={() => {
               onDelete(affectedConversation.id);
             }}
-            name={affectedConversation.name}
-            profileName={affectedConversation.profileName}
-            phoneNumber={affectedConversation.phoneNumber}
             title={affectedConversation.title}
             conversationType="direct"
             state={

ts/components/conversation/ContactSpoofingReviewDialogPerson.tsx

@@ -40,7 +40,6 @@ export const ContactSpoofingReviewDialogPerson: FunctionComponent<PropsType> = (
       />
       <div className="module-ContactSpoofingReviewDialogPerson__info">
         <ContactName
-          i18n={i18n}
           module="module-ContactSpoofingReviewDialogPerson__info__contact-name"
           title={conversation.title}
         />

ts/components/conversation/ConversationHero.tsx

@@ -192,17 +192,7 @@ export const ConversationHero = ({
           title={title}
         />
         <h1 className="module-conversation-hero__profile-name">
-          {isMe ? (
+          {isMe ? i18n('noteToSelf') : <ContactName title={title} />}
-            i18n('noteToSelf')
-          ) : (
-            <ContactName
-              title={title}
-              name={name}
-              profileName={profileName}
-              phoneNumber={phoneNumber}
-              i18n={i18n}
-            />
-          )}
         </h1>
         {about && !isMe && (
           <div className="module-about__container">

ts/components/conversation/GroupNotification.stories.tsx

@@ -1,4 +1,4 @@
-// Copyright 2020 Signal Messenger, LLC
+// Copyright 2020-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
@@ -23,7 +23,6 @@ const stories: Array<GroupNotificationStory> = [
       {
         from: {
           title: 'Alice',
-          name: 'Alice',
           phoneNumber: '(202) 555-1000',
         },
         changes: [
@@ -33,11 +32,9 @@ const stories: Array<GroupNotificationStory> = [
               {
                 title: 'Mrs. Ice',
                 phoneNumber: '(202) 555-1001',
-                profileName: 'Mrs. Ice',
               },
               {
                 phoneNumber: '(202) 555-1002',
-                name: 'Ms. Earth',
                 title: 'Ms. Earth',
               },
             ],
@@ -50,7 +47,6 @@ const stories: Array<GroupNotificationStory> = [
       {
         from: {
           title: 'Alice',
-          name: 'Alice',
           phoneNumber: '(202) 555-1000',
           isMe: true,
         },
@@ -61,12 +57,10 @@ const stories: Array<GroupNotificationStory> = [
               {
                 title: 'Mrs. Ice',
                 phoneNumber: '(202) 555-1001',
-                profileName: 'Mrs. Ice',
               },
               {
                 title: 'Ms. Earth',
                 phoneNumber: '(202) 555-1002',
-                name: 'Ms. Earth',
               },
             ],
           },
@@ -83,7 +77,6 @@ const stories: Array<GroupNotificationStory> = [
       {
         from: {
           title: 'Alice',
-          name: 'Alice',
           phoneNumber: '(202) 555-1000',
         },
         changes: [
@@ -97,12 +90,10 @@ const stories: Array<GroupNotificationStory> = [
               {
                 title: 'Mrs. Ice',
                 phoneNumber: '(202) 555-1001',
-                profileName: 'Mrs. Ice',
               },
               {
                 title: 'Ms. Earth',
                 phoneNumber: '(202) 555-1002',
-                name: 'Ms. Earth',
               },
             ],
           },
@@ -112,7 +103,6 @@ const stories: Array<GroupNotificationStory> = [
       {
         from: {
           title: 'Alice',
-          name: 'Alice',
           phoneNumber: '(202) 555-1000',
         },
         changes: [
@@ -127,12 +117,10 @@ const stories: Array<GroupNotificationStory> = [
               {
                 title: 'Mrs. Ice',
                 phoneNumber: '(202) 555-1001',
-                profileName: 'Mrs. Ice',
               },
               {
                 title: 'Ms. Earth',
                 phoneNumber: '(202) 555-1002',
-                name: 'Ms. Earth',
               },
             ],
           },
@@ -142,7 +130,6 @@ const stories: Array<GroupNotificationStory> = [
       {
         from: {
           title: 'Alice',
-          name: 'Alice',
           phoneNumber: '(202) 555-1000',
         },
         changes: [
@@ -152,7 +139,6 @@ const stories: Array<GroupNotificationStory> = [
               {
                 title: 'Mr. Fire',
                 phoneNumber: '(202) 555-1000',
-                profileName: 'Mr. Fire',
               },
             ],
           },
@@ -162,7 +148,6 @@ const stories: Array<GroupNotificationStory> = [
       {
         from: {
           title: 'Alice',
-          name: 'Alice',
           phoneNumber: '(202) 555-1000',
           isMe: true,
         },
@@ -173,7 +158,6 @@ const stories: Array<GroupNotificationStory> = [
               {
                 title: 'Mr. Fire',
                 phoneNumber: '(202) 555-1000',
-                profileName: 'Mr. Fire',
               },
             ],
           },
@@ -183,7 +167,6 @@ const stories: Array<GroupNotificationStory> = [
       {
         from: {
           title: 'Alice',
-          name: 'Alice',
           phoneNumber: '(202) 555-1000',
         },
         changes: [
@@ -193,7 +176,6 @@ const stories: Array<GroupNotificationStory> = [
               {
                 title: 'Mr. Fire',
                 phoneNumber: '(202) 555-1000',
-                profileName: 'Mr. Fire',
                 isMe: true,
               },
             ],
@@ -204,7 +186,6 @@ const stories: Array<GroupNotificationStory> = [
       {
         from: {
           title: 'Alice',
-          name: 'Alice',
           phoneNumber: '(202) 555-1000',
         },
         changes: [
@@ -214,13 +195,11 @@ const stories: Array<GroupNotificationStory> = [
               {
                 title: 'Mr. Fire',
                 phoneNumber: '(202) 555-1000',
-                profileName: 'Mr. Fire',
                 isMe: true,
               },
               {
                 title: 'Mrs. Ice',
                 phoneNumber: '(202) 555-1001',
-                profileName: 'Mrs. Ice',
               },
             ],
           },
@@ -235,7 +214,6 @@ const stories: Array<GroupNotificationStory> = [
       {
         from: {
           title: 'Alice',
-          name: 'Alice',
           phoneNumber: '(202) 555-1000',
         },
         changes: [
@@ -245,17 +223,14 @@ const stories: Array<GroupNotificationStory> = [
               {
                 title: 'Mr. Fire',
                 phoneNumber: '(202) 555-1000',
-                profileName: 'Mr. Fire',
               },
               {
                 title: 'Mrs. Ice',
                 phoneNumber: '(202) 555-1001',
-                profileName: 'Mrs. Ice',
               },
               {
                 title: 'Ms. Earth',
                 phoneNumber: '(202) 555-1002',
-                name: 'Ms. Earth',
               },
             ],
           },
@@ -265,7 +240,6 @@ const stories: Array<GroupNotificationStory> = [
       {
         from: {
           title: 'Alice',
-          name: 'Alice',
           phoneNumber: '(202) 555-1000',
         },
         changes: [
@@ -275,7 +249,6 @@ const stories: Array<GroupNotificationStory> = [
               {
                 title: 'Mr. Fire',
                 phoneNumber: '(202) 555-1000',
-                profileName: 'Mr. Fire',
               },
             ],
           },
@@ -285,7 +258,6 @@ const stories: Array<GroupNotificationStory> = [
       {
         from: {
           title: 'Alice',
-          name: 'Alice',
           phoneNumber: '(202) 555-1000',
           isMe: true,
         },
@@ -295,7 +267,6 @@ const stories: Array<GroupNotificationStory> = [
             contacts: [
               {
                 title: 'Alice',
-                name: 'Alice',
                 phoneNumber: '(202) 555-1000',
                 isMe: true,
               },
@@ -312,7 +283,6 @@ const stories: Array<GroupNotificationStory> = [
       {
         from: {
           title: 'Alice',
-          name: 'Alice',
           phoneNumber: '(202) 555-1000',
         },
         changes: [
@@ -326,7 +296,6 @@ const stories: Array<GroupNotificationStory> = [
       {
         from: {
           title: 'Alice',
-          name: 'Alice',
           phoneNumber: '(202) 555-1000',
           isMe: true,
         },
@@ -346,7 +315,6 @@ const stories: Array<GroupNotificationStory> = [
       {
         from: {
           title: 'Alice',
-          name: 'Alice',
           phoneNumber: '(202) 555-1000',
         },
         changes: [
@@ -360,7 +328,6 @@ const stories: Array<GroupNotificationStory> = [
       {
         from: {
           title: 'Alice',
-          name: 'Alice',
           phoneNumber: '(202) 555-1000',
           isMe: true,
         },
@@ -380,7 +347,6 @@ const stories: Array<GroupNotificationStory> = [
       {
         from: {
           title: 'Alice',
-          name: 'Alice',
           phoneNumber: '(202) 555-1000',
         },
         changes: [
@@ -398,7 +364,6 @@ const stories: Array<GroupNotificationStory> = [
       {
         from: {
           title: longName,
-          name: longName,
           phoneNumber: '(202) 555-1000',
         },
         changes: [

ts/components/conversation/GroupNotification.tsx

@@ -13,8 +13,6 @@ import { missingCaseError } from '../../util/missingCaseError';
 
 type Contact = {
   phoneNumber?: string;
-  profileName?: string;
-  name?: string;
   title: string;
   isMe?: boolean;
 };
@@ -57,13 +55,7 @@ export class GroupNotification extends React.Component<Props> {
             key={`external-${contact.phoneNumber}`}
             className="module-group-notification__contact"
           >
-            <ContactName
+            <ContactName title={contact.title} />
-              title={contact.title}
-              phoneNumber={contact.phoneNumber}
-              profileName={contact.profileName}
-              name={contact.name}
-              i18n={i18n}
-            />
           </span>
         );
       })
@@ -144,20 +136,14 @@ export class GroupNotification extends React.Component<Props> {
     const firstChange: undefined | Change = changes[0];
     const isLeftOnly = changes.length === 1 && firstChange?.type === 'remove';
 
-    const fromContact = (
-      <ContactName
-        title={from.title}
-        phoneNumber={from.phoneNumber}
-        profileName={from.profileName}
-        name={from.name}
-        i18n={i18n}
-      />
-    );
-
     const fromLabel = from.isMe ? (
       <Intl i18n={i18n} id="youUpdatedTheGroup" />
     ) : (
-      <Intl i18n={i18n} id="updatedTheGroup" components={[fromContact]} />
+      <Intl
+        i18n={i18n}
+        id="updatedTheGroup"
+        components={[<ContactName title={from.title} />]}
+      />
     );
 
     let contents: ReactNode;

ts/components/conversation/GroupV1Migration.tsx

@@ -104,7 +104,7 @@ function renderUsers(
         <Intl
           i18n={i18n}
           id={`${keyPrefix}--one`}
-          components={[<ContactName title={members[0].title} i18n={i18n} />]}
+          components={[<ContactName title={members[0].title} />]}
         />
       </p>
     );

ts/components/conversation/MandatoryProfileSharingActions.stories.tsx

@@ -24,9 +24,6 @@ const getBaseProps = (
   title: isGroup
     ? text('title', 'NYC Rock Climbers')
     : text('title', 'Cayce Bollard'),
-  name: isGroup
-    ? text('name', 'NYC Rock Climbers')
-    : text('name', 'Cayce Bollard'),
   onBlock: action('block'),
   onBlockAndReportSpam: action('onBlockAndReportSpam'),
   onDelete: action('delete'),

ts/components/conversation/MandatoryProfileSharingActions.tsx

@@ -16,7 +16,7 @@ export type Props = {
   i18n: LocalizerType;
   firstName?: string;
   onAccept(): unknown;
-} & Omit<ContactNameProps, 'module' | 'i18n'> &
+} & Omit<ContactNameProps, 'module'> &
   Pick<
     MessageRequestActionsConfirmationProps,
     'conversationType' | 'onBlock' | 'onBlockAndReportSpam' | 'onDelete'
@@ -26,13 +26,10 @@ export const MandatoryProfileSharingActions = ({
   conversationType,
   firstName,
   i18n,
-  name,
   onAccept,
   onBlock,
   onBlockAndReportSpam,
   onDelete,
-  phoneNumber,
-  profileName,
   title,
 }: Props): JSX.Element => {
   const [mrState, setMrState] = React.useState(MessageRequestState.default);
@@ -50,9 +47,6 @@ export const MandatoryProfileSharingActions = ({
             );
           }}
           onDelete={onDelete}
-          name={name}
-          profileName={profileName}
-          phoneNumber={phoneNumber}
           title={title}
           conversationType={conversationType}
           state={mrState}
@@ -71,11 +65,9 @@ export const MandatoryProfileSharingActions = ({
                   className="module-message-request-actions__message__name"
                 >
                   <ContactName
-                    name={name}
+                    firstName={firstName}
-                    profileName={profileName}
+                    title={title}
-                    phoneNumber={phoneNumber}
+                    preferFirstName
-                    title={firstName || title}
-                    i18n={i18n}
                   />
                 </strong>
               ),

ts/components/conversation/Message.tsx

@@ -642,7 +642,6 @@ export class Message extends React.PureComponent<Props, State> {
       contactNameColor,
       conversationType,
       direction,
-      i18n,
       isSticker,
       isTapToView,
       isTapToViewExpired,
@@ -673,11 +672,7 @@ export class Message extends React.PureComponent<Props, State> {
         <ContactName
           contactNameColor={contactNameColor}
           title={author.title}
-          phoneNumber={author.phoneNumber}
-          name={author.name}
-          profileName={author.profileName}
           module={moduleName}
-          i18n={i18n}
         />
       </div>
     );
@@ -1098,9 +1093,6 @@ export class Message extends React.PureComponent<Props, State> {
         text={quote.text}
         rawAttachment={quote.rawAttachment}
         isIncoming={direction === 'incoming'}
-        authorPhoneNumber={quote.authorPhoneNumber}
-        authorProfileName={quote.authorProfileName}
-        authorName={quote.authorName}
         authorTitle={quote.authorTitle}
         bodyRanges={quote.bodyRanges}
         conversationColor={conversationColor}

ts/components/conversation/MessageDetail.tsx

@@ -168,13 +168,7 @@ export class MessageDetail extends React.Component<Props> {
         {this.renderAvatar(contact)}
         <div className="module-message-detail__contact__text">
           <div className="module-message-detail__contact__name">
-            <ContactName
+            <ContactName title={contact.title} />
-              phoneNumber={contact.phoneNumber}
-              name={contact.name}
-              profileName={contact.profileName}
-              title={contact.title}
-              i18n={i18n}
-            />
           </div>
           {errors.map(error => (
             <div

ts/components/conversation/MessageRequestActions.stories.tsx

@@ -22,9 +22,6 @@ const getBaseProps = (isGroup = false): MessageRequestActionsProps => ({
   title: isGroup
     ? text('title', 'NYC Rock Climbers')
     : text('title', 'Cayce Bollard'),
-  name: isGroup
-    ? text('name', 'NYC Rock Climbers')
-    : text('name', 'Cayce Bollard'),
   onBlock: action('block'),
   onDelete: action('delete'),
   onBlockAndReportSpam: action('blockAndReportSpam'),

ts/components/conversation/MessageRequestActions.tsx

@@ -14,9 +14,8 @@ import { LocalizerType } from '../../types/Util';
 
 export type Props = {
   i18n: LocalizerType;
-  firstName?: string;
   onAccept(): unknown;
-} & Omit<ContactNameProps, 'module' | 'i18n'> &
+} & Omit<ContactNameProps, 'module'> &
   Omit<
     MessageRequestActionsConfirmationProps,
     'i18n' | 'state' | 'onChangeState'
@@ -27,14 +26,11 @@ export const MessageRequestActions = ({
   firstName,
   i18n,
   isBlocked,
-  name,
   onAccept,
   onBlock,
   onBlockAndReportSpam,
   onDelete,
   onUnblock,
-  phoneNumber,
-  profileName,
   title,
 }: Props): JSX.Element => {
   const [mrState, setMrState] = React.useState(MessageRequestState.default);
@@ -48,9 +44,6 @@ export const MessageRequestActions = ({
           onBlockAndReportSpam={onBlockAndReportSpam}
           onUnblock={onUnblock}
           onDelete={onDelete}
-          name={name}
-          profileName={profileName}
-          phoneNumber={phoneNumber}
           title={title}
           conversationType={conversationType}
           state={mrState}
@@ -70,11 +63,9 @@ export const MessageRequestActions = ({
                 className="module-message-request-actions__message__name"
               >
                 <ContactName
-                  name={name}
+                  firstName={firstName}
-                  profileName={profileName}
+                  title={title}
-                  phoneNumber={phoneNumber}
+                  preferFirstName
-                  title={firstName || title}
-                  i18n={i18n}
                 />
               </strong>,
             ]}

ts/components/conversation/MessageRequestActionsConfirmation.tsx

@@ -24,19 +24,16 @@ export type Props = {
   onDelete(): unknown;
   state: MessageRequestState;
   onChangeState(state: MessageRequestState): unknown;
-} & Omit<ContactNameProps, 'module' | 'i18n'>;
+} & Omit<ContactNameProps, 'module'>;
 
 export const MessageRequestActionsConfirmation = ({
   conversationType,
   i18n,
-  name,
   onBlock,
   onBlockAndReportSpam,
   onChangeState,
   onDelete,
   onUnblock,
-  phoneNumber,
-  profileName,
   state,
   title,
 }: Props): JSX.Element | null => {
@@ -51,16 +48,7 @@ export const MessageRequestActionsConfirmation = ({
           <Intl
             i18n={i18n}
             id={`MessageRequests--block-${conversationType}-confirm-title`}
-            components={[
+            components={[<ContactName key="name" title={title} />]}
-              <ContactName
-                key="name"
-                name={name}
-                profileName={profileName}
-                phoneNumber={phoneNumber}
-                title={title}
-                i18n={i18n}
-              />,
-            ]}
           />
         }
         actions={[
@@ -96,16 +84,7 @@ export const MessageRequestActionsConfirmation = ({
           <Intl
             i18n={i18n}
             id="MessageRequests--unblock-confirm-title"
-            components={[
+            components={[<ContactName key="name" title={title} />]}
-              <ContactName
-                key="name"
-                name={name}
-                profileName={profileName}
-                phoneNumber={phoneNumber}
-                title={title}
-                i18n={i18n}
-              />,
-            ]}
           />
         }
         actions={[
@@ -132,16 +111,7 @@ export const MessageRequestActionsConfirmation = ({
           <Intl
             i18n={i18n}
             id={`MessageRequests--delete-${conversationType}-confirm-title`}
-            components={[
+            components={[<ContactName key="name" title={title} />]}
-              <ContactName
-                key="name"
-                name={name}
-                profileName={profileName}
-                phoneNumber={phoneNumber}
-                title={title}
-                i18n={i18n}
-              />,
-            ]}
           />
         }
         actions={[

ts/components/conversation/Quote.stories.tsx

@@ -89,9 +89,6 @@ const defaultMessageProps: MessagesProps = {
 };
 
 const renderInMessage = ({
-  authorName,
-  authorPhoneNumber,
-  authorProfileName,
   authorTitle,
   conversationColor,
   isFromMe,
@@ -105,9 +102,6 @@ const renderInMessage = ({
     conversationColor,
     quote: {
       authorId: 'an-author',
-      authorName,
-      authorPhoneNumber,
-      authorProfileName,
       authorTitle,
       conversationColor,
       isFromMe,
@@ -129,15 +123,6 @@ const renderInMessage = ({
 };
 
 const createProps = (overrideProps: Partial<Props> = {}): Props => ({
-  authorName: text('authorName', overrideProps.authorName || ''),
-  authorPhoneNumber: text(
-    'authorPhoneNumber',
-    overrideProps.authorPhoneNumber || ''
-  ),
-  authorProfileName: text(
-    'authorProfileName',
-    overrideProps.authorProfileName || ''
-  ),
   authorTitle: text('authorTitle', overrideProps.authorTitle || ''),
   conversationColor: overrideProps.conversationColor || 'forest',
   doubleCheckMissingQuoteReference:

ts/components/conversation/Quote.tsx

@@ -17,9 +17,6 @@ import { getCustomColorStyle } from '../../util/getCustomColorStyle';
 
 export type Props = {
   authorTitle: string;
-  authorPhoneNumber?: string;
-  authorProfileName?: string;
-  authorName?: string;
   conversationColor: ConversationColorType;
   customColor?: CustomColorType;
   bodyRanges?: BodyRangesType;
@@ -372,15 +369,7 @@ export class Quote extends React.Component<Props, State> {
   }
 
   public renderAuthor(): JSX.Element {
-    const {
+    const { authorTitle, i18n, isFromMe, isIncoming } = this.props;
-      authorProfileName,
-      authorPhoneNumber,
-      authorTitle,
-      authorName,
-      i18n,
-      isFromMe,
-      isIncoming,
-    } = this.props;
 
     return (
       <div
@@ -389,17 +378,7 @@ export class Quote extends React.Component<Props, State> {
           isIncoming ? 'module-quote__primary__author--incoming' : null
         )}
       >
-        {isFromMe ? (
+        {isFromMe ? i18n('you') : <ContactName title={authorTitle} />}
-          i18n('you')
-        ) : (
-          <ContactName
-            phoneNumber={authorPhoneNumber}
-            name={authorName}
-            profileName={authorProfileName}
-            title={authorTitle}
-            i18n={i18n}
-          />
-        )}
       </div>
     );
   }

ts/components/conversation/ReactionViewer.tsx

@@ -233,11 +233,7 @@ export const ReactionViewer = React.forwardRef<HTMLDivElement, Props>(
                 ) : (
                   <ContactName
                     module="module-reaction-viewer__body__row__name__contact-name"
-                    name={from.name}
-                    profileName={from.profileName}
-                    phoneNumber={from.phoneNumber}
                     title={from.title}
-                    i18n={i18n}
                   />
                 )}
               </div>

ts/components/conversation/RemoveGroupMemberConfirmationDialog.tsx

@@ -38,13 +38,7 @@ export const RemoveGroupMemberConfirmationDialog: FunctionComponent<PropsType> =
         i18n={i18n}
         id="RemoveGroupMemberConfirmation__description"
         components={{
-          name: (
+          name: <ContactName title={conversation.title} />,
-            <ContactName
-              firstName={conversation.firstName}
-              i18n={i18n}
-              title={conversation.title}
-            />
-          ),
         }}
       />
     }

ts/components/conversation/SafetyNumberNotification.tsx

@@ -11,10 +11,7 @@ import { LocalizerType } from '../../types/Util';
 
 export type ContactType = {
   id: string;
-  phoneNumber?: string;
-  profileName?: string;
   title: string;
-  name?: string;
 };
 
 export type PropsData = {
@@ -54,12 +51,8 @@ export const SafetyNumberNotification = ({
               className="module-safety-number-notification__contact"
             >
               <ContactName
-                name={contact.name}
-                profileName={contact.profileName}
-                phoneNumber={contact.phoneNumber}
                 title={contact.title}
                 module="module-safety-number-notification__contact"
-                i18n={i18n}
               />
             </span>,
           ]}

ts/components/conversation/Timeline.stories.tsx

@@ -124,7 +124,6 @@ const items: Record<string, TimelineItemType> = {
     data: {
       disabled: false,
       expireTimer: moment.duration(2, 'hours').asSeconds(),
-      phoneNumber: '(202) 555-0000',
       title: '(202) 555-0000',
       type: 'fromOther',
     },
@@ -134,8 +133,6 @@ const items: Record<string, TimelineItemType> = {
     data: {
       contact: {
         id: '+1202555000',
-        phoneNumber: '(202) 555-0000',
-        profileName: 'Mr. Fire',
         title: 'Mr. Fire',
       },
       isGroup: true,
@@ -144,11 +141,7 @@ const items: Record<string, TimelineItemType> = {
   'id-7': {
     type: 'verificationNotification',
     data: {
-      contact: {
+      contact: { title: 'Mrs. Ice' },
-        name: 'Mrs. Ice',
-        phoneNumber: '(202) 555-0001',
-        title: 'Mrs. Ice',
-      },
       isLocal: true,
       type: 'markVerified',
     },
@@ -166,12 +159,10 @@ const items: Record<string, TimelineItemType> = {
           contacts: [
             {
               phoneNumber: '(202) 555-0002',
-              profileName: 'Mr. Fire',
               title: 'Mr. Fire',
             },
             {
               phoneNumber: '(202) 555-0003',
-              profileName: 'Ms. Water',
               title: 'Ms. Water',
             },
           ],
@@ -179,7 +170,6 @@ const items: Record<string, TimelineItemType> = {
       ],
       from: {
         phoneNumber: '(202) 555-0001',
-        name: 'Mrs. Ice',
         title: 'Mrs. Ice',
         isMe: false,
       },

ts/components/conversation/TimerNotification.stories.tsx

@@ -25,12 +25,7 @@ const createProps = (overrideProps: Partial<Props> = {}): Props => ({
     },
     overrideProps.type || 'fromOther'
   ),
-  phoneNumber:
-    text('phoneNumber', overrideProps.phoneNumber || '') || undefined,
-  profileName:
-    text('profileName', overrideProps.profileName || '') || undefined,
   title: text('title', overrideProps.title || ''),
-  name: text('name', overrideProps.name || '') || undefined,
   ...(boolean('disabled', overrideProps.disabled || false)
     ? {
         disabled: true,
@@ -48,8 +43,6 @@ story.add('Set By Other', () => {
   const props = createProps({
     expireTimer: moment.duration(1, 'hour').asSeconds(),
     type: 'fromOther',
-    phoneNumber: '(202) 555-1000',
-    profileName: 'Mr. Fire',
     title: 'Mr. Fire',
   });
 
@@ -68,8 +61,6 @@ story.add('Set By Other (with a long name)', () => {
   const props = createProps({
     expireTimer: moment.duration(1, 'hour').asSeconds(),
     type: 'fromOther',
-    phoneNumber: '(202) 555-1000',
-    profileName: longName,
     title: longName,
   });
 
@@ -86,8 +77,6 @@ story.add('Set By You', () => {
   const props = createProps({
     expireTimer: moment.duration(1, 'hour').asSeconds(),
     type: 'fromMe',
-    phoneNumber: '(202) 555-1000',
-    profileName: 'Mr. Fire',
     title: 'Mr. Fire',
   });
 
@@ -104,8 +93,6 @@ story.add('Set By Sync', () => {
   const props = createProps({
     expireTimer: moment.duration(1, 'hour').asSeconds(),
     type: 'fromSync',
-    phoneNumber: '(202) 555-1000',
-    profileName: 'Mr. Fire',
     title: 'Mr. Fire',
   });
 

ts/components/conversation/TimerNotification.tsx

@@ -20,10 +20,7 @@ export type TimerNotificationType =
 /* eslint-disable react/destructuring-assignment */
 export type PropsData = {
   type: TimerNotificationType;
-  phoneNumber?: string;
-  profileName?: string;
   title: string;
-  name?: string;
 } & (
   | { disabled: true }
   | {
@@ -39,7 +36,7 @@ type PropsHousekeeping = {
 export type Props = PropsData & PropsHousekeeping;
 
 export const TimerNotification: FunctionComponent<Props> = props => {
-  const { disabled, i18n, name, phoneNumber, profileName, title, type } = props;
+  const { disabled, i18n, title, type } = props;
 
   let changeKey: string;
   let timespan: string;
@@ -59,16 +56,7 @@ export const TimerNotification: FunctionComponent<Props> = props => {
           i18n={i18n}
           id={changeKey}
           components={{
-            name: (
+            name: <ContactName key="external-1" title={title} />,
-              <ContactName
-                key="external-1"
-                phoneNumber={phoneNumber}
-                profileName={profileName}
-                title={title}
-                name={name}
-                i18n={i18n}
-              />
-            ),
             time: timespan,
           }}
         />

ts/components/conversation/UnsupportedMessage.tsx

@@ -62,12 +62,8 @@ export const UnsupportedMessage = ({
               className="module-unsupported-message__contact"
             >
               <ContactName
-                name={contact.name}
-                profileName={contact.profileName}
-                phoneNumber={contact.phoneNumber}
                 title={contact.title}
                 module="module-unsupported-message__contact"
-                i18n={i18n}
               />
             </span>,
           ]}

ts/components/conversation/VerificationNotification.stories.tsx

@@ -1,4 +1,4 @@
-// Copyright 2020 Signal Messenger, LLC
+// Copyright 2020-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
@@ -16,11 +16,7 @@ const story = storiesOf(
   module
 );
 
-const contact = {
+const contact = { title: 'Mr. Fire' };
-  title: 'Mr. Fire',
-  phoneNumber: '(202) 555-0003',
-  profileName: 'Mr. Fire',
-};
 
 const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   i18n,
@@ -58,11 +54,7 @@ story.add('Long name', () => {
 
   const props = createProps({
     type: 'markVerified',
-    contact: {
+    contact: { title: longName },
-      ...contact,
-      profileName: longName,
-      title: longName,
-    },
   });
 
   return <VerificationNotification {...props} />;

ts/components/conversation/VerificationNotification.tsx

@@ -10,12 +10,7 @@ import { LocalizerType } from '../../types/Util';
 
 import { missingCaseError } from '../../util/missingCaseError';
 
-type Contact = {
+type Contact = { title: string };
-  phoneNumber?: string;
-  profileName?: string;
-  name?: string;
-  title: string;
-};
 
 export type PropsData = {
   type: 'markVerified' | 'markNotVerified';
@@ -57,12 +52,8 @@ export class VerificationNotification extends React.Component<Props> {
         components={[
           <ContactName
             key="external-1"
-            name={contact.name}
-            profileName={contact.profileName}
-            phoneNumber={contact.phoneNumber}
             title={contact.title}
             module="module-verification-notification__contact"
-            i18n={i18n}
           />,
         ]}
         i18n={i18n}

ts/components/conversation/conversation-details/AddGroupMembersModal/ConfirmAdditionsModal.tsx

@@ -46,13 +46,7 @@ export const ConfirmAdditionsModal: FunctionComponent<PropsType> = ({
         i18n={i18n}
         id="AddGroupMembersModal--confirm-title--one"
         components={{
-          person: (
+          person: <ContactName title={firstContact.title} />,
-            <ContactName
-              profileName={firstContact.profileName}
-              title={firstContact.title}
-              i18n={i18n}
-            />
-          ),
           group: groupTitleNode,
         }}
       />

ts/components/conversationList/ContactCheckbox.tsx

@@ -71,13 +71,7 @@ export const ContactCheckbox: FunctionComponent<PropsType> = React.memo(
     const headerName = isMe ? (
       i18n('noteToSelf')
     ) : (
-      <ContactName
+      <ContactName title={title} />
-        phoneNumber={phoneNumber}
-        name={name}
-        profileName={profileName}
-        title={title}
-        i18n={i18n}
-      />
     );
 
     let messageText: ReactNode;

ts/components/conversationList/ContactListItem.tsx

@@ -54,13 +54,7 @@ export const ContactListItem: FunctionComponent<PropsType> = React.memo(
     const headerName = isMe ? (
       i18n('noteToSelf')
     ) : (
-      <ContactName
+      <ContactName title={title} />
-        phoneNumber={phoneNumber}
-        name={name}
-        profileName={profileName}
-        title={title}
-        i18n={i18n}
-      />
     );
 
     const messageText =

ts/components/conversationList/ConversationListItem.tsx

@@ -91,13 +91,7 @@ export const ConversationListItem: FunctionComponent<Props> = React.memo(
     const headerName = isMe ? (
       i18n('noteToSelf')
     ) : (
-      <ContactName
+      <ContactName title={title} />
-        phoneNumber={phoneNumber}
-        name={name}
-        profileName={profileName}
-        title={title}
-        i18n={i18n}
-      />
     );
 
     let messageText: ReactNode = null;

ts/components/conversationList/MessageSearchResult.tsx

@@ -62,23 +62,10 @@ const renderPerson = (
   i18n: LocalizerType,
   person: Readonly<{
     isMe?: boolean;
-    name?: string;
-    phoneNumber?: string;
-    profileName?: string;
     title: string;
   }>
 ): ReactNode =>
-  person.isMe ? (
+  person.isMe ? i18n('you') : <ContactName title={person.title} />;
-    i18n('you')
-  ) : (
-    <ContactName
-      phoneNumber={person.phoneNumber}
-      name={person.name}
-      profileName={person.profileName}
-      title={person.title}
-      i18n={i18n}
-    />
-  );
 
 // This function exists because bodyRanges tells us the character position
 // where the at-mention starts at according to the full body text. The snippet

ts/state/smart/ContactName.tsx

@@ -1,4 +1,4 @@
-// Copyright 2020 Signal Messenger, LLC
+// Copyright 2020-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
@@ -33,10 +33,6 @@ export const SmartContactName: React.ComponentType<ExternalProps> = props => {
   return (
     <ContactName
       firstName={conversation.firstName}
-      i18n={i18n}
-      name={conversation.name}
-      phoneNumber={conversation.phoneNumber}
-      profileName={conversation.profileName}
       title={conversation.title}
     />
   );