Indicate when reaction is from the current user

_locales/en/messages.json

@@ -2155,6 +2155,16 @@
   },
   "Reactions--error": {
     "message": "Failed to send reaction. Please try again.",
-    "description": "Shown when a reaction fails to send."
+    "description": "Shown when a reaction fails to send"
+  },
+  "ContactName--you": {
+    "message": "$name$ (you)",
+    "descriptions": "Indicates that a name represents the current user",
+    "placeholders": {
+      "name": {
+        "content": "$1",
+        "example": "Captain Jack Sparrow"
+      }
+    }
   }
 }

stylesheets/_modules.scss

@@ -4933,7 +4933,8 @@ button.module-image__border-overlay:focus {
         min-width: 32px;
       }
 
-      &__name {
+      &__name,
+      &__name_profile-name {
         @include font-body-1-bold();
         margin-left: 8px;
         white-space: nowrap;

ts/components/Intl.tsx

@@ -14,10 +14,12 @@ interface Props {
 
 export class Intl extends React.Component<Props> {
   public static defaultProps: Partial<Props> = {
-    renderText: ({ text }) => text,
+    renderText: ({ text, key }) => (
+      <React.Fragment key={key}>{text}</React.Fragment>
+    ),
   };
 
-  public getComponent(index: number): FullJSX | undefined {
+  public getComponent(index: number, key: number): FullJSX | undefined {
     const { id, components } = this.props;
 
     if (!components || !components.length || components.length <= index) {
@@ -29,7 +31,7 @@ export class Intl extends React.Component<Props> {
       return;
     }
 
-    return components[index];
+    return <React.Fragment key={key}>{components[index]}</React.Fragment>;
   }
 
   public render() {
@@ -61,8 +63,9 @@ export class Intl extends React.Component<Props> {
         key += 1;
       }
 
-      results.push(this.getComponent(componentIndex));
+      results.push(this.getComponent(componentIndex, key));
       componentIndex += 1;
+      key += 1;
 
       // @ts-ignore
       lastTextIndex = FIND_REPLACEMENTS.lastIndex;

ts/components/conversation/ContactName.tsx

@@ -1,17 +1,21 @@
 import React from 'react';
 
 import { Emojify } from './Emojify';
+import { Intl } from '../Intl';
+import { LocalizerType } from '../../types/util';
 
 interface Props {
-  phoneNumber: string;
+  phoneNumber?: string;
   name?: string;
   profileName?: string;
   module?: string;
+  isMe?: boolean;
+  i18n?: LocalizerType;
 }
 
 export class ContactName extends React.Component<Props> {
   public render() {
-    const { phoneNumber, name, profileName, module } = this.props;
+    const { phoneNumber, name, profileName, module, isMe, i18n } = this.props;
     const prefix = module ? module : 'module-contact-name';
 
     const title = name ? name : phoneNumber;
@@ -22,11 +26,21 @@ export class ContactName extends React.Component<Props> {
       </span>
     ) : null;
 
-    return (
-      <span className={prefix} dir="auto">
+    const fragment = (
+      <>
         <Emojify text={title} />
         {shouldShowProfile ? ' ' : null}
         {profileElement}
+      </>
+    );
+
+    return (
+      <span className={prefix} dir="auto">
+        {isMe ? (
+          <Intl i18n={i18n} id="ContactName--you" components={[fragment]} />
+        ) : (
+          fragment
+        )}
       </span>
     );
   }

ts/components/conversation/ReactionViewer.md

@@ -7,8 +7,18 @@
   <ReactionViewer
     i18n={util.i18n}
     reactions={[
-      { emoji: '❤️', from: { id: '+14155552671', name: 'Amelia Briggs' } },
-      { emoji: '👍', from: { id: '+14155552671', name: 'Joel Ferrari' } },
+      {
+        emoji: '❤️',
+        from: { id: '+14155552671', name: 'Amelia Briggs', isMe: true },
+      },
+      {
+        emoji: '👍',
+        from: {
+          id: '+14155552671',
+          phoneNumber: '+14155552671',
+          profileName: 'Joel Ferrari',
+        },
+      },
     ]}
   />
 </util.ConversationContext>
@@ -24,7 +34,11 @@
       {
         emoji: '❤️',
         timestamp: 1,
-        from: { id: '+14155552671', name: 'Ameila Briggs' },
+        from: {
+          id: '+14155552671',
+          phoneNumber: '+14155552671',
+          profileName: 'Ameila Briggs',
+        },
       },
       {
         emoji: '❤️',
@@ -59,12 +73,16 @@
       {
         emoji: '❤️',
         timestamp: 7,
-        from: { id: '+14155552678', name: 'Adam Burrel' },
+        from: {
+          id: '+14155552678',
+          phoneNumber: '+14155552678',
+          profileName: 'Adam Burrel',
+        },
       },
       {
         emoji: '❤️',
         timestamp: 8,
-        from: { id: '+14155552679', name: 'Rick Owens' },
+        from: { id: '+14155552679', name: 'Rick Owens', isMe: true },
       },
       {
         emoji: '👍',
@@ -112,6 +130,23 @@
         emoji: '❤️',
         from: { id: '+14155552671', name: 'Foo McBarringtonMcBazzingtonMcKay' },
       },
+      {
+        emoji: '❤️',
+        from: {
+          id: '+14155552671',
+          name: 'Foo McBarringtonMcBazzingtonMcKay',
+          isMe: true,
+        },
+      },
+      {
+        emoji: '❤️',
+        from: {
+          id: '+14155552671',
+          phoneNumber: '+14155552671',
+          profileName: 'Foo McBarringtonMcBazzingtonMcKay',
+          isMe: true,
+        },
+      },
     ]}
   />
 </util.ConversationContext>

ts/components/conversation/ReactionViewer.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { groupBy, mapValues, orderBy, sortBy } from 'lodash';
 import classNames from 'classnames';
+import { ContactName } from './ContactName';
 import { Avatar, Props as AvatarProps } from '../Avatar';
 import { Emoji } from '../emoji/Emoji';
 import { useRestoreFocus } from '../hooks';
@@ -11,10 +12,11 @@ export type Reaction = {
   from: {
     id: string;
     color?: string;
-    profileName?: string;
-    name?: string;
-    isMe?: boolean;
     avatarPath?: string;
+    name?: string;
+    profileName?: string;
+    isMe?: boolean;
+    phoneNumber?: string;
   };
 };
 
@@ -63,10 +65,14 @@ export const ReactionViewer = React.forwardRef<HTMLDivElement, Props>(
       const emojiSet = new Set<string>();
       reactions.forEach(re => emojiSet.add(re.emoji));
 
-      return sortBy(
-        Array.from(emojiSet),
-        emoji => emojisOrder.indexOf(emoji) || Infinity
-      );
+      return sortBy(Array.from(emojiSet), emoji => {
+        const idx = emojisOrder.indexOf(emoji);
+        if (idx > -1) {
+          return idx;
+        }
+
+        return Infinity;
+      });
     }, [reactions]);
 
     // If we have previously selected a reaction type that is no longer present
@@ -119,22 +125,30 @@ export const ReactionViewer = React.forwardRef<HTMLDivElement, Props>(
             })}
         </header>
         <main className="module-reaction-viewer__body">
-          {selectedReactions.map(re => (
+          {selectedReactions.map(({ from, emoji }) => (
             <div
-              key={`${re.from.id}-${re.emoji}`}
+              key={`${from.id}-${emoji}`}
               className="module-reaction-viewer__body__row"
             >
               <div className="module-reaction-viewer__body__row__avatar">
                 <Avatar
-                  avatarPath={re.from.avatarPath}
+                  avatarPath={from.avatarPath}
                   conversationType="direct"
                   size={32}
+                  name={from.name}
+                  profileName={from.profileName}
+                  phoneNumber={from.phoneNumber}
                   i18n={i18n}
                 />
               </div>
-              <span className="module-reaction-viewer__body__row__name">
-                {re.from.name || re.from.profileName}
-              </span>
+              <ContactName
+                module="module-reaction-viewer__body__row__name"
+                i18n={i18n}
+                name={from.name}
+                profileName={from.profileName}
+                phoneNumber={from.phoneNumber}
+                isMe={from.isMe}
+              />
             </div>
           ))}
         </main>