1 files changed, 48 insertions, 0 deletions
diff --git a/webapp/components/post_view/components/reaction_list_view.jsx b/webapp/components/post_view/components/reaction_list_view.jsx
new file mode 100644
index 000000000..345b7a24c
--- /dev/null
+++ b/webapp/components/post_view/components/reaction_list_view.jsx
@@ -0,0 +1,48 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+
+import Reaction from './reaction.jsx';
+
+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)
+    }
+
+    render() {
+        const reactionsByName = new Map();
+        const emojiNames = [];
+
+        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]);
+            }
+        }
+
+        const children = emojiNames.map((emojiName) => {
+            return (
+                <Reaction
+                    key={emojiName}
+                    post={this.props.post}
+                    currentUserId={this.props.currentUserId}
+                    emojiName={emojiName}
+                    reactions={reactionsByName.get(emojiName)}
+                />
+            );
+        });
+
+        return (
+            <div className='post-reaction-list'>
+                {children}
+            </div>
+        );
+    }
+}