From b5ffdf5c5490ad1ac97ecb2725af878cda61810b Mon Sep 17 00:00:00 2001
From: Harrison Healey <harrisonmhealey@gmail.com>
Date: Mon, 27 Feb 2017 11:10:02 -0500
Subject: Made reactions re-render when custom emojis change (#5545)

---
 webapp/components/post_view/components/reaction.jsx    |  7 ++++---
 .../post_view/components/reaction_list_container.jsx   | 18 +++++++++++++++++-
 .../post_view/components/reaction_list_view.jsx        |  4 +++-
 3 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/webapp/components/post_view/components/reaction.jsx b/webapp/components/post_view/components/reaction.jsx
index 79a8b70df..92ec675b6 100644
--- a/webapp/components/post_view/components/reaction.jsx
+++ b/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}
diff --git a/webapp/components/post_view/components/reaction_list_container.jsx b/webapp/components/post_view/components/reaction_list_container.jsx
index 0ac4fa35a..e21bfa24b 100644
--- a/webapp/components/post_view/components/reaction_list_container.jsx
+++ b/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}
             />
         );
     }
diff --git a/webapp/components/post_view/components/reaction_list_view.jsx b/webapp/components/post_view/components/reaction_list_view.jsx
index 345b7a24c..aaa896c9a 100644
--- a/webapp/components/post_view/components/reaction_list_view.jsx
+++ b/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}
                 />
             );
         });
-- 
cgit v1.2.3-1-g7c22