From 63cdb89144f27929928f819b4ffae936ff79ac15 Mon Sep 17 00:00:00 2001
From: Harrison Healey <harrisonmhealey@gmail.com>
Date: Tue, 4 Apr 2017 00:21:15 -0400
Subject: [PATCH] PLT-6147 Fixed reactions not rendering properly while loading
 (#5958)

---
 .../components/reaction_list_container.jsx    | 18 ++++------
 .../components/reaction_list_view.jsx         | 20 +++++++----
 webapp/sass/layout/_post.scss                 |  4 ---
 webapp/stores/reaction_store.jsx              | 34 +++++++++----------
 4 files changed, 37 insertions(+), 39 deletions(-)

diff --git a/webapp/components/post_view/components/reaction_list_container.jsx b/webapp/components/post_view/components/reaction_list_container.jsx
index 906145eed9..cdc58003b0 100644
--- a/webapp/components/post_view/components/reaction_list_container.jsx
+++ b/webapp/components/post_view/components/reaction_list_container.jsx
@@ -81,16 +81,12 @@ export default class ReactionListContainer extends React.Component {
     }
 
     render() {
-        if (this.props.post.has_reactions && this.state.reactions.length > 0) {
-            return (
-                <ReactionListView
-                    post={this.props.post}
-                    reactions={this.state.reactions}
-                    emojis={this.state.emojis}
-                />
-            );
-        }
-
-        return null;
+        return (
+            <ReactionListView
+                post={this.props.post}
+                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 c322ce727c..b6c4b3a194 100644
--- a/webapp/components/post_view/components/reaction_list_view.jsx
+++ b/webapp/components/post_view/components/reaction_list_view.jsx
@@ -13,17 +13,23 @@ export default class ReactionListView extends React.Component {
     }
 
     render() {
+        if (!this.props.post.has_reactions || (this.props.reactions && this.props.reactions.length === 0)) {
+            return null;
+        }
+
         const reactionsByName = new Map();
         const emojiNames = [];
 
-        for (const reaction of this.props.reactions) {
-            const emojiName = reaction.emoji_name;
+        if (this.props.reactions) {
+            for (const reaction of this.props.reactions) {
+                const emojiName = reaction.emoji_name;
 
-            if (reactionsByName.has(emojiName)) {
-                reactionsByName.get(emojiName).push(reaction);
-            } else {
-                emojiNames.push(emojiName);
-                reactionsByName.set(emojiName, [reaction]);
+                if (reactionsByName.has(emojiName)) {
+                    reactionsByName.get(emojiName).push(reaction);
+                } else {
+                    emojiNames.push(emojiName);
+                    reactionsByName.set(emojiName, [reaction]);
+                }
             }
         }
 
diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index 751980c433..a3b2282418 100644
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -1287,10 +1287,6 @@ form {
 
         .post-reaction-list {
             min-height: 30px;
-
-            &:empty {
-                display: none;
-            }
         }
 
         .post-reaction {
diff --git a/webapp/stores/reaction_store.jsx b/webapp/stores/reaction_store.jsx
index 166569e3db..51ad5140e7 100644
--- a/webapp/stores/reaction_store.jsx
+++ b/webapp/stores/reaction_store.jsx
@@ -37,36 +37,36 @@ class ReactionStore extends EventEmitter {
     }
 
     addReaction(postId, reaction) {
-        const reactions = [];
+        let reactions = this.getReactions(postId) || [];
 
-        for (const existing of this.getReactions(postId)) {
-            // make sure not to add duplicates
-            if (existing.user_id !== reaction.user_id || existing.post_id !== reaction.post_id ||
-                existing.emoji_name !== reaction.emoji_name) {
-                reactions.push(existing);
-            }
+        // Make sure not to add duplicates
+        const existingIndex = reactions.findIndex((existing) => {
+            return existing.user_id === reaction.user_id && existing.post_id === reaction.post_id && existing.emoji_name === reaction.emoji_name;
+        });
+
+        if (existingIndex === -1) {
+            reactions = [...reactions, reaction];
         }
 
-        reactions.push(reaction);
-
         this.setReactions(postId, reactions);
     }
 
     removeReaction(postId, reaction) {
-        const reactions = [];
+        let reactions = this.getReactions(postId) || [];
 
-        for (const existing of this.getReactions(postId)) {
-            if (existing.user_id !== reaction.user_id || existing.post_id !== reaction.post_id ||
-                existing.emoji_name !== reaction.emoji_name) {
-                reactions.push(existing);
-            }
+        const existingIndex = reactions.findIndex((existing) => {
+            return existing.user_id === reaction.user_id && existing.post_id === reaction.post_id && existing.emoji_name === reaction.emoji_name;
+        });
+
+        if (existingIndex !== -1) {
+            reactions = reactions.slice(0, existingIndex).concat(reactions.slice(existingIndex + 1));
         }
 
         this.setReactions(postId, reactions);
     }
 
     getReactions(postId) {
-        return this.reactions.get(postId) || [];
+        return this.reactions.get(postId);
     }
 
     handleEventPayload(payload) {
@@ -89,4 +89,4 @@ class ReactionStore extends EventEmitter {
     }
 }
 
-export default new ReactionStore();
\ No newline at end of file
+export default new ReactionStore();