PLT-5035 Added loading of missing profiles when hovering over reactions (#5887)

1 files changed, 19 insertions, 19 deletions

diff --git a/webapp/components/post_view/components/reaction.jsx b/webapp/components/post_view/components/reaction.jsx
index 92ec675b6..ae658da1f 100644
--- a/webapp/components/post_view/components/reaction.jsx
+++ b/webapp/components/post_view/components/reaction.jsx
@@ -2,13 +2,12 @@
 // See License.txt for license information.
 
 import React from 'react';
+import {OverlayTrigger, Tooltip} from 'react-bootstrap';
+import {FormattedMessage} from 'react-intl';
 
 import EmojiStore from 'stores/emoji_store.jsx';
-import * as PostActions from 'actions/post_actions.jsx';
-import * as Utils from 'utils/utils.jsx';
 
-import {FormattedMessage} from 'react-intl';
-import {OverlayTrigger, Tooltip} from 'react-bootstrap';
+import * as Utils from 'utils/utils.jsx';
 
 export default class Reaction extends React.Component {
     static propTypes = {
@@ -16,7 +15,14 @@ export default class Reaction extends React.Component {
         currentUserId: React.PropTypes.string.isRequired,
         emojiName: React.PropTypes.string.isRequired,
         reactions: React.PropTypes.arrayOf(React.PropTypes.object),
-        emojis: React.PropTypes.object.isRequired
+        emojis: React.PropTypes.object.isRequired,
+        profiles: React.PropTypes.array.isRequired,
+        otherUsers: React.PropTypes.number.isRequired,
+        actions: React.PropTypes.shape({
+            addReaction: React.PropTypes.func.isRequired,
+            getMissingProfiles: React.PropTypes.func.isRequired,
+            removeReaction: React.PropTypes.func.isRequired
+        })
     }
 
     constructor(props) {
@@ -28,12 +34,12 @@ export default class Reaction extends React.Component {
 
     addReaction(e) {
         e.preventDefault();
-        PostActions.addReaction(this.props.post.channel_id, this.props.post.id, this.props.emojiName);
+        this.props.actions.addReaction(this.props.post.channel_id, this.props.post.id, this.props.emojiName);
     }
 
     removeReaction(e) {
         e.preventDefault();
-        PostActions.removeReaction(this.props.post.channel_id, this.props.post.id, this.props.emojiName);
+        this.props.actions.removeReaction(this.props.post.channel_id, this.props.post.id, this.props.emojiName);
     }
 
     render() {
@@ -43,23 +49,16 @@ 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) {
+        const otherUsers = this.props.otherUsers;
+        for (const user of this.props.profiles) {
+            if (user.id === this.props.currentUserId) {
                 currentUserReacted = true;
             } else {
-                const displayName = Utils.displayUsername(reaction.user_id);
-
-                if (displayName) {
-                    users.push(displayName);
-                } else {
-                    // Just count users that we don't have loaded
-                    otherUsers += 1;
-                }
+                users.push(Utils.displayUsernameForUser(user));
             }
         }
 
-        // sort users in alphabetical order with "you" being first if the current user reacted
+        // Sort users in alphabetical order with "you" being first if the current user reacted
         users.sort();
         if (currentUserReacted) {
             users.unshift(Utils.localizeMessage('reaction.you', 'You'));
@@ -184,6 +183,7 @@ export default class Reaction extends React.Component {
                         {clickTooltip}
                     </Tooltip>
                 }
+                onEnter={this.props.actions.getMissingProfiles}
             >
                 <div
                     className={className}