2 files changed, 113 insertions, 0 deletions
diff --git a/webapp/components/post_view/reaction_list/index.js b/webapp/components/post_view/reaction_list/index.js
new file mode 100644
index 000000000..4fc9355d9
--- /dev/null
+++ b/webapp/components/post_view/reaction_list/index.js
@@ -0,0 +1,33 @@
+// Copyright (c) 2017 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import {connect} from 'react-redux';
+import {bindActionCreators} from 'redux';
+import {makeGetReactionsForPost} from 'mattermost-redux/selectors/entities/posts';
+import {getCustomEmojisAsMap} from 'mattermost-redux/selectors/entities/emojis';
+
+import * as Actions from 'mattermost-redux/actions/posts';
+
+import ReactionList from './reaction_list.jsx';
+
+function makeMapStateToProps() {
+    const getReactionsForPost = makeGetReactionsForPost();
+
+    return function mapStateToProps(state, ownProps) {
+        return {
+            ...ownProps,
+            reactions: getReactionsForPost(state, ownProps.post.id),
+            emojis: getCustomEmojisAsMap(state)
+        };
+    };
+}
+
+function mapDispatchToProps(dispatch) {
+    return {
+        actions: bindActionCreators({
+            getReactionsForPost: Actions.getReactionsForPost
+        }, dispatch)
+    };
+}
+
+export default connect(makeMapStateToProps, mapDispatchToProps)(ReactionList);
diff --git a/webapp/components/post_view/reaction_list/reaction_list.jsx b/webapp/components/post_view/reaction_list/reaction_list.jsx
new file mode 100644
index 000000000..516f5332f
--- /dev/null
+++ b/webapp/components/post_view/reaction_list/reaction_list.jsx
@@ -0,0 +1,80 @@
+// Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import Reaction from 'components/post_view/reaction';
+
+export default class ReactionListView extends React.PureComponent {
+    static propTypes = {
+
+        /**
+         * The post to render reactions for
+         */
+        post: PropTypes.object.isRequired,
+
+        /**
+         * The reactions to render
+         */
+        reactions: PropTypes.arrayOf(PropTypes.object),
+
+        /**
+         * The emojis for the different reactions
+         */
+        emojis: PropTypes.object.isRequired,
+        actions: PropTypes.shape({
+
+            /**
+             * Function to get reactions for a post
+             */
+            getReactionsForPost: PropTypes.func.isRequired
+        })
+    }
+
+    componentDidMount() {
+        if (this.props.post.has_reactions) {
+            this.props.actions.getReactionsForPost(this.props.post.id);
+        }
+    }
+
+    render() {
+        if (!this.props.post.has_reactions || (this.props.reactions && this.props.reactions.length === 0)) {
+            return null;
+        }
+
+        const reactionsByName = new Map();
+        const emojiNames = [];
+
+        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]);
+                }
+            }
+        }
+
+        const children = emojiNames.map((emojiName) => {
+            return (
+                <Reaction
+                    key={emojiName}
+                    post={this.props.post}
+                    emojiName={emojiName}
+                    reactions={reactionsByName.get(emojiName) || []}
+                    emojis={this.props.emojis}
+                />
+            );
+        });
+
+        return (
+            <div className='post-reaction-list'>
+                {children}
+            </div>
+        );
+    }
+}