2 files changed, 24 insertions, 16 deletions

diff --git a/webapp/components/emoji/components/emoji_list.jsx b/webapp/components/emoji/components/emoji_list.jsx
index 340fc6afc..76c509f12 100644
--- a/webapp/components/emoji/components/emoji_list.jsx
+++ b/webapp/components/emoji/components/emoji_list.jsx
@@ -1,16 +1,20 @@
 // Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import React from 'react';
+import EmojiListItem from './emoji_list_item.jsx';
+import LoadingScreen from 'components/loading_screen.jsx';
 
-import * as AsyncClient from 'utils/async_client.jsx';
 import EmojiStore from 'stores/emoji_store.jsx';
+import UserStore from 'stores/user_store.jsx';
+
+import {loadEmoji} from 'actions/emoji_actions.jsx';
+
+import * as AsyncClient from 'utils/async_client.jsx';
 import * as Utils from 'utils/utils.jsx';
 
-import {FormattedMessage} from 'react-intl';
-import EmojiListItem from './emoji_list_item.jsx';
+import React from 'react';
 import {Link} from 'react-router';
-import LoadingScreen from 'components/loading_screen.jsx';
+import {FormattedMessage} from 'react-intl';
 
 export default class EmojiList extends React.Component {
     static get propTypes() {
@@ -24,28 +28,30 @@ export default class EmojiList extends React.Component {
         super(props);
 
         this.handleEmojiChange = this.handleEmojiChange.bind(this);
-
+        this.handleUserChange = this.handleUserChange.bind(this);
         this.deleteEmoji = this.deleteEmoji.bind(this);
-
         this.updateFilter = this.updateFilter.bind(this);
 
         this.state = {
             emojis: EmojiStore.getCustomEmojiMap(),
             loading: !EmojiStore.hasReceivedCustomEmojis(),
-            filter: ''
+            filter: '',
+            users: UserStore.getProfiles()
         };
     }
 
     componentDidMount() {
         EmojiStore.addChangeListener(this.handleEmojiChange);
+        UserStore.addChangeListener(this.handleUserChange);
 
         if (window.mm_config.EnableCustomEmoji === 'true') {
-            AsyncClient.listEmoji();
+            loadEmoji();
         }
     }
 
     componentWillUnmount() {
         EmojiStore.removeChangeListener(this.handleEmojiChange);
+        UserStore.removeChangeListener(this.handleUserChange);
     }
 
     handleEmojiChange() {
@@ -55,6 +61,10 @@ export default class EmojiList extends React.Component {
         });
     }
 
+    handleUserChange() {
+        this.setState({users: UserStore.getProfiles()});
+    }
+
     updateFilter(e) {
         this.setState({
             filter: e.target.value
@@ -98,6 +108,7 @@ export default class EmojiList extends React.Component {
                         emoji={emoji}
                         onDelete={onDelete}
                         filter={filter}
+                        creator={this.state.users[emoji.creator_id] || {}}
                     />
                 );
             }
diff --git a/webapp/components/emoji/components/emoji_list_item.jsx b/webapp/components/emoji/components/emoji_list_item.jsx
index 0428f0286..dc27f3691 100644
--- a/webapp/components/emoji/components/emoji_list_item.jsx
+++ b/webapp/components/emoji/components/emoji_list_item.jsx
@@ -4,7 +4,7 @@
 import React from 'react';
 
 import EmojiStore from 'stores/emoji_store.jsx';
-import UserStore from 'stores/user_store.jsx';
+
 import * as Utils from 'utils/utils.jsx';
 
 import {FormattedMessage} from 'react-intl';
@@ -14,7 +14,8 @@ export default class EmojiListItem extends React.Component {
         return {
             emoji: React.PropTypes.object.isRequired,
             onDelete: React.PropTypes.func.isRequired,
-            filter: React.PropTypes.string
+            filter: React.PropTypes.string,
+            creator: React.PropTypes.object.isRequired
         };
     }
 
@@ -22,10 +23,6 @@ export default class EmojiListItem extends React.Component {
         super(props);
 
         this.handleDelete = this.handleDelete.bind(this);
-
-        this.state = {
-            creator: UserStore.getProfile(this.props.emoji.creator_id)
-        };
     }
 
     handleDelete(e) {
@@ -57,7 +54,7 @@ export default class EmojiListItem extends React.Component {
 
     render() {
         const emoji = this.props.emoji;
-        const creator = this.state.creator;
+        const creator = this.props.creator;
         const filter = this.props.filter ? this.props.filter.toLowerCase() : '';
 
         if (!this.matchesFilter(emoji, creator, filter)) {