PLT-4903 Rendered a placeholder for user reactions where the user hasn't been loaded (#4784)

* Rendered a placeholder for user reactions where the user hasn't been loaded

* Added id to reaction Tooltip

* Removed FormattedHTMLMessage from Reaction and improved support for different verb conjugations

2 files changed, 93 insertions, 21 deletions

diff --git a/webapp/components/post_view/components/reaction.jsx b/webapp/components/post_view/components/reaction.jsx
index 5bb62d859..0056953b0 100644
--- a/webapp/components/post_view/components/reaction.jsx
+++ b/webapp/components/post_view/components/reaction.jsx
@@ -7,7 +7,7 @@ import EmojiStore from 'stores/emoji_store.jsx';
 import * as PostActions from 'actions/post_actions.jsx';
 import * as Utils from 'utils/utils.jsx';
 
-import {FormattedHTMLMessage, FormattedMessage} from 'react-intl';
+import {FormattedMessage} from 'react-intl';
 import {OverlayTrigger, Tooltip} from 'react-bootstrap';
 
 export default class Reaction extends React.Component {
@@ -42,11 +42,19 @@ export default class Reaction extends React.Component {
 
         let currentUserReacted = false;
         const users = [];
+        let otherUsers = 0;
         for (const reaction of this.props.reactions) {
             if (reaction.user_id === this.props.currentUserId) {
                 currentUserReacted = true;
             } else {
-                users.push(Utils.displayUsername(reaction.user_id));
+                const displayName = Utils.displayUsername(reaction.user_id);
+
+                if (displayName) {
+                    users.push(displayName);
+                } else {
+                    // Just count users that we don't have loaded
+                    otherUsers += 1;
+                }
             }
         }
 
@@ -56,32 +64,90 @@ export default class Reaction extends React.Component {
             users.unshift(Utils.localizeMessage('reaction.you', 'You'));
         }
 
-        let tooltip;
-        if (users.length > 1) {
-            tooltip = (
-                <FormattedHTMLMessage
-                    id='reaction.multipleReacted'
-                    defaultMessage='<b>{users} and {lastUser}</b> reacted with <b>:{emojiName}:</b>'
+        let names;
+        if (otherUsers > 0) {
+            if (users.length > 0) {
+                names = (
+                    <FormattedMessage
+                        id='reaction.usersAndOthersReacted'
+                        defaultMessage='{users} and {otherUsers, number} other {otherUsers, plural, one {user} other {users}}'
+                        values={{
+                            users: users.join(', '),
+                            otherUsers
+                        }}
+                    />
+                );
+            } else {
+                names = (
+                    <FormattedMessage
+                        id='reaction.othersReacted'
+                        defaultMessage='{otherUsers, number} {otherUsers, plural, one {user} other {users}}'
+                        values={{
+                            otherUsers
+                        }}
+                    />
+                );
+            }
+        } else if (users.length > 1) {
+            names = (
+                <FormattedMessage
+                    id='reaction.usersReacted'
+                    defaultMessage='{users} and {lastUser}'
                     values={{
                         users: users.slice(0, -1).join(', '),
-                        lastUser: users[users.length - 1],
-                        emojiName: this.props.emojiName
+                        lastUser: users[users.length - 1]
                     }}
                 />
             );
         } else {
-            tooltip = (
-                <FormattedHTMLMessage
-                    id='reaction.oneReacted'
-                    defaultMessage='<b>{user}</b> reacted with <b>:{emojiName}:</b>'
-                    values={{
-                        user: users[0],
-                        emojiName: this.props.emojiName
-                    }}
+            names = users[0];
+        }
+
+        let reactionVerb;
+        if (users.length + otherUsers > 1) {
+            if (currentUserReacted) {
+                reactionVerb = (
+                    <FormattedMessage
+                        id='reaction.reactionVerb.youAndUsers'
+                        defaultMessage='reacted'
+                    />
+                );
+            } else {
+                reactionVerb = (
+                    <FormattedMessage
+                        id='reaction.reactionVerb.users'
+                        defaultMessage='reacted'
+                    />
+                );
+            }
+        } else if (currentUserReacted) {
+            reactionVerb = (
+                <FormattedMessage
+                    id='reaction.reactionVerb.you'
+                    defaultMessage='reacted'
+                />
+            );
+        } else {
+            reactionVerb = (
+                <FormattedMessage
+                    id='reaction.reactionVerb.user'
+                    defaultMessage='reacted'
                 />
             );
         }
 
+        const tooltip = (
+            <FormattedMessage
+                id='reaction.reacted'
+                defaultMessage='{users} {reactionVerb} with {emoji}'
+                values={{
+                    users: <b>{names}</b>,
+                    reactionVerb,
+                    emoji: <b>{':' + this.props.emojiName + ':'}</b>
+                }}
+            />
+        );
+
         let handleClick;
         let clickTooltip;
         let className = 'post-reaction';
@@ -111,7 +177,7 @@ export default class Reaction extends React.Component {
                 placement='top'
                 shouldUpdatePosition={true}
                 overlay={
-                    <Tooltip>
+                    <Tooltip id={`${this.props.post.id}-${this.props.emojiName}-reaction`}>
                         {tooltip}
                         <br/>
                         {clickTooltip}
diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index d0945ff54..896875bda 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -1643,8 +1643,14 @@
   "posts_view.newMsgBelow": "{count} new {count, plural, one {message} other {messages}} below",
   "reaction.clickToAdd": "(click to add)",
   "reaction.clickToRemove": "(click to remove)",
-  "reaction.multipleReacted": "<b>{users} and {lastUser}</b> reacted with <b>:{emojiName}:</b>",
-  "reaction.oneReacted": "<b>{user}</b> reacted with <b>:{emojiName}:</b>",
+  "reaction.reacted": "{users} {reactionVerb} with {emoji}",
+  "reaction.reactionVerb.you": "reacted",
+  "reaction.reactionVerb.user": "reacted",
+  "reaction.reactionVerb.users": "reacted",
+  "reaction.reactionVerb.youAndUsers": "reacted",
+  "reaction.othersReacted": "{otherUsers, number} {otherUsers, plural, one {user} other {users}}",
+  "reaction.usersReacted": "{users} and {lastUser}",
+  "reaction.usersAndOthersReacted": "{users} and {otherUsers, number} other {otherUsers, plural, one {user} other {users}}",
   "reaction.you": "You",
   "removed_channel.channelName": "the channel",
   "removed_channel.from": "Removed from ",