Made reactions re-render when custom emojis change (#5545)

webapp/components/post_view/components/reaction.jsx

@@ -15,7 +15,8 @@ export default class Reaction extends React.Component {
         post: React.PropTypes.object.isRequired,
         currentUserId: React.PropTypes.string.isRequired,
         emojiName: React.PropTypes.string.isRequired,
-        reactions: React.PropTypes.arrayOf(React.PropTypes.object)
+        reactions: React.PropTypes.arrayOf(React.PropTypes.object),
+        emojis: React.PropTypes.object.isRequired
     }
 
     constructor(props) {
@@ -36,7 +37,7 @@ export default class Reaction extends React.Component {
     }
 
     render() {
-        if (!EmojiStore.has(this.props.emojiName)) {
+        if (!this.props.emojis.has(this.props.emojiName)) {
             return null;
         }
 
@@ -190,7 +191,7 @@ export default class Reaction extends React.Component {
                 >
                     <span
                         className='post-reaction__emoji emoticon'
-                        style={{backgroundImage: 'url(' + EmojiStore.getEmojiImageUrl(EmojiStore.get(this.props.emojiName)) + ')'}}
+                        style={{backgroundImage: 'url(' + EmojiStore.getEmojiImageUrl(this.props.emojis.get(this.props.emojiName)) + ')'}}
                     />
                     <span className='post-reaction__count'>
                         {this.props.reactions.length}

webapp/components/post_view/components/reaction_list_container.jsx

@@ -4,6 +4,7 @@
 import React from 'react';
 
 import * as AsyncClient from 'utils/async_client.jsx';
+import EmojiStore from 'stores/emoji_store.jsx';
 import ReactionStore from 'stores/reaction_store.jsx';
 
 import ReactionListView from './reaction_list_view.jsx';
@@ -18,14 +19,17 @@ export default class ReactionListContainer extends React.Component {
         super(props);
 
         this.handleReactionsChanged = this.handleReactionsChanged.bind(this);
+        this.handleEmojisChanged = this.handleEmojisChanged.bind(this);
 
         this.state = {
-            reactions: ReactionStore.getReactions(this.props.post.id)
+            reactions: ReactionStore.getReactions(this.props.post.id),
+            emojis: EmojiStore.getEmojis()
         };
     }
 
     componentDidMount() {
         ReactionStore.addChangeListener(this.props.post.id, this.handleReactionsChanged);
+        EmojiStore.addChangeListener(this.handleEmojisChanged);
 
         if (this.props.post.has_reactions) {
             AsyncClient.listReactions(this.props.post.channel_id, this.props.post.id);
@@ -53,11 +57,16 @@ export default class ReactionListContainer extends React.Component {
             return true;
         }
 
+        if (nextState.emojis !== this.state.emojis) {
+            return true;
+        }
+
         return false;
     }
 
     componentWillUnmount() {
         ReactionStore.removeChangeListener(this.props.post.id, this.handleReactionsChanged);
+        EmojiStore.removeChangeListener(this.handleEmojisChanged);
     }
 
     handleReactionsChanged() {
@@ -66,6 +75,12 @@ export default class ReactionListContainer extends React.Component {
         });
     }
 
+    handleEmojisChanged() {
+        this.setState({
+            emojis: EmojiStore.getEmojis()
+        });
+    }
+
     render() {
         if (!this.props.post.has_reactions) {
             return null;
@@ -76,6 +91,7 @@ export default class ReactionListContainer extends React.Component {
                 post={this.props.post}
                 currentUserId={this.props.currentUserId}
                 reactions={this.state.reactions}
+                emojis={this.state.emojis}
             />
         );
     }

webapp/components/post_view/components/reaction_list_view.jsx

@@ -9,7 +9,8 @@ export default class ReactionListView extends React.Component {
     static propTypes = {
         post: React.PropTypes.object.isRequired,
         currentUserId: React.PropTypes.string.isRequired,
-        reactions: React.PropTypes.arrayOf(React.PropTypes.object)
+        reactions: React.PropTypes.arrayOf(React.PropTypes.object),
+        emojis: React.PropTypes.object.isRequired
     }
 
     render() {
@@ -35,6 +36,7 @@ export default class ReactionListView extends React.Component {
                     currentUserId={this.props.currentUserId}
                     emojiName={emojiName}
                     reactions={reactionsByName.get(emojiName)}
+                    emojis={this.props.emojis}
                 />
             );
         });