PLT-1378 Initial version of emoji reactions (#4520)

* Refactored emoji.json to support multiple aliases and emoji categories

* Added custom category to emoji.jsx and stabilized all fields

* Removed conflicting aliases for :mattermost: and :ca:

* fixup after store changes

* Added emoji reactions

* Removed reactions for an emoji when that emoji is deleted

* Fixed incorrect test case

* Renamed ReactionList to ReactionListView

* Fixed :+1: and :-1: not showing up as possible reactions

* Removed text emoticons from emoji reaction autocomplete

* Changed emoji reactions to be sorted by the order that they were first created

* Set a maximum number of listeners for the ReactionStore

* Removed unused code from Textbox component

* Fixed reaction permissions

* Changed error code when trying to modify reactions for another user

* Fixed merge conflicts

* Properly applied theme colours to reactions

* Fixed ESLint and gofmt errors

* Fixed ReactionListContainer to properly update when its post prop changes

* Removed unnecessary escape characters from reaction regexes

* Shared reaction message pattern between CreatePost and CreateComment

* Removed an unnecessary select query when saving a reaction

* Changed reactions route to be under /reactions

* Fixed copyright dates on newly added files

* Removed debug code that prevented all unit tests from being ran

* Cleaned up unnecessary code for reactions

* Renamed ReactionStore.List to ReactionStore.GetForPost

5 files changed, 273 insertions, 0 deletions

diff --git a/webapp/components/post_view/components/post.jsx b/webapp/components/post_view/components/post.jsx
index 823cb8ce7..58ea947b2 100644
--- a/webapp/components/post_view/components/post.jsx
+++ b/webapp/components/post_view/components/post.jsx
@@ -255,6 +255,7 @@ export default class Post extends React.Component {
                             />
                             <PostBody
                                 post={post}
+                                currentUser={this.props.currentUser}
                                 sameRoot={this.props.sameRoot}
                                 parentPost={parentPost}
                                 handleCommentClick={this.handleCommentClick}
diff --git a/webapp/components/post_view/components/post_body.jsx b/webapp/components/post_view/components/post_body.jsx
index cfcbe8930..60e682e8d 100644
--- a/webapp/components/post_view/components/post_body.jsx
+++ b/webapp/components/post_view/components/post_body.jsx
@@ -10,6 +10,7 @@ import FileAttachmentListContainer from 'components/file_attachment_list_contain
 import PostBodyAdditionalContent from './post_body_additional_content.jsx';
 import PostMessageContainer from './post_message_container.jsx';
 import PendingPostOptions from './pending_post_options.jsx';
+import ReactionListContainer from './reaction_list_container.jsx';
 
 import {FormattedMessage} from 'react-intl';
 
@@ -202,6 +203,10 @@ export default class PostBody extends React.Component {
                 <div className={'post__body ' + mentionHighlightClass}>
                     {messageWithAdditionalContent}
                     {fileAttachmentHolder}
+                    <ReactionListContainer
+                        post={post}
+                        currentUserId={this.props.currentUser.id}
+                    />
                 </div>
             </div>
         );
@@ -210,6 +215,7 @@ export default class PostBody extends React.Component {
 
 PostBody.propTypes = {
     post: React.PropTypes.object.isRequired,
+    currentUser: React.PropTypes.object.isRequired,
     parentPost: React.PropTypes.object,
     retryPost: React.PropTypes.func,
     handleCommentClick: React.PropTypes.func.isRequired,
diff --git a/webapp/components/post_view/components/reaction.jsx b/webapp/components/post_view/components/reaction.jsx
new file mode 100644
index 000000000..5bb62d859
--- /dev/null
+++ b/webapp/components/post_view/components/reaction.jsx
@@ -0,0 +1,136 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+
+import EmojiStore from 'stores/emoji_store.jsx';
+import * as PostActions from 'actions/post_actions.jsx';
+import * as Utils from 'utils/utils.jsx';
+
+import {FormattedHTMLMessage, FormattedMessage} from 'react-intl';
+import {OverlayTrigger, Tooltip} from 'react-bootstrap';
+
+export default class Reaction extends React.Component {
+    static propTypes = {
+        post: React.PropTypes.object.isRequired,
+        currentUserId: React.PropTypes.string.isRequired,
+        emojiName: React.PropTypes.string.isRequired,
+        reactions: React.PropTypes.arrayOf(React.PropTypes.object)
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.addReaction = this.addReaction.bind(this);
+        this.removeReaction = this.removeReaction.bind(this);
+    }
+
+    addReaction(e) {
+        e.preventDefault();
+        PostActions.addReaction(this.props.post.channel_id, this.props.post.id, this.props.emojiName);
+    }
+
+    removeReaction(e) {
+        e.preventDefault();
+        PostActions.removeReaction(this.props.post.channel_id, this.props.post.id, this.props.emojiName);
+    }
+
+    render() {
+        if (!EmojiStore.has(this.props.emojiName)) {
+            return null;
+        }
+
+        let currentUserReacted = false;
+        const users = [];
+        for (const reaction of this.props.reactions) {
+            if (reaction.user_id === this.props.currentUserId) {
+                currentUserReacted = true;
+            } else {
+                users.push(Utils.displayUsername(reaction.user_id));
+            }
+        }
+
+        // sort users in alphabetical order with "you" being first if the current user reacted
+        users.sort();
+        if (currentUserReacted) {
+            users.unshift(Utils.localizeMessage('reaction.you', 'You'));
+        }
+
+        let tooltip;
+        if (users.length > 1) {
+            tooltip = (
+                <FormattedHTMLMessage
+                    id='reaction.multipleReacted'
+                    defaultMessage='<b>{users} and {lastUser}</b> reacted with <b>:{emojiName}:</b>'
+                    values={{
+                        users: users.slice(0, -1).join(', '),
+                        lastUser: users[users.length - 1],
+                        emojiName: this.props.emojiName
+                    }}
+                />
+            );
+        } else {
+            tooltip = (
+                <FormattedHTMLMessage
+                    id='reaction.oneReacted'
+                    defaultMessage='<b>{user}</b> reacted with <b>:{emojiName}:</b>'
+                    values={{
+                        user: users[0],
+                        emojiName: this.props.emojiName
+                    }}
+                />
+            );
+        }
+
+        let handleClick;
+        let clickTooltip;
+        let className = 'post-reaction';
+        if (currentUserReacted) {
+            handleClick = this.removeReaction;
+            clickTooltip = (
+                <FormattedMessage
+                    id='reaction.clickToRemove'
+                    defaultMessage='(click to remove)'
+                />
+            );
+
+            className += ' post-reaction--current-user';
+        } else {
+            handleClick = this.addReaction;
+            clickTooltip = (
+                <FormattedMessage
+                    id='reaction.clickToAdd'
+                    defaultMessage='(click to add)'
+                />
+            );
+        }
+
+        return (
+            <OverlayTrigger
+                delayShow={1000}
+                placement='top'
+                shouldUpdatePosition={true}
+                overlay={
+                    <Tooltip>
+                        {tooltip}
+                        <br/>
+                        {clickTooltip}
+                    </Tooltip>
+                }
+            >
+                <div
+                    className={className}
+                    onClick={handleClick}
+                >
+                    <img
+                        className='post-reaction__emoji'
+                        src={EmojiStore.getEmojiImageUrl(EmojiStore.get(this.props.emojiName))}
+                    />
+                    <span className='post-reaction__count'>
+                        {this.props.reactions.length}
+                    </span>
+                </div>
+            </OverlayTrigger>
+        );
+    }
+}
diff --git a/webapp/components/post_view/components/reaction_list_container.jsx b/webapp/components/post_view/components/reaction_list_container.jsx
new file mode 100644
index 000000000..0ac4fa35a
--- /dev/null
+++ b/webapp/components/post_view/components/reaction_list_container.jsx
@@ -0,0 +1,82 @@
+// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+import React from 'react';
+
+import * as AsyncClient from 'utils/async_client.jsx';
+import ReactionStore from 'stores/reaction_store.jsx';
+
+import ReactionListView from './reaction_list_view.jsx';
+
+export default class ReactionListContainer extends React.Component {
+    static propTypes = {
+        post: React.PropTypes.object.isRequired,
+        currentUserId: React.PropTypes.string.isRequired
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.handleReactionsChanged = this.handleReactionsChanged.bind(this);
+
+        this.state = {
+            reactions: ReactionStore.getReactions(this.props.post.id)
+        };
+    }
+
+    componentDidMount() {
+        ReactionStore.addChangeListener(this.props.post.id, this.handleReactionsChanged);
+
+        if (this.props.post.has_reactions) {
+            AsyncClient.listReactions(this.props.post.channel_id, this.props.post.id);
+        }
+    }
+
+    componentWillReceiveProps(nextProps) {
+        if (nextProps.post.id !== this.props.post.id) {
+            ReactionStore.removeChangeListener(this.props.post.id, this.handleReactionsChanged);
+            ReactionStore.addChangeListener(nextProps.post.id, this.handleReactionsChanged);
+
+            this.setState({
+                reactions: ReactionStore.getReactions(nextProps.post.id)
+            });
+        }
+    }
+
+    shouldComponentUpdate(nextProps, nextState) {
+        if (nextProps.post.has_reactions !== this.props.post.has_reactions) {
+            return true;
+        }
+
+        if (nextState.reactions !== this.state.reactions) {
+            // this will only work so long as the entries in the ReactionStore are never mutated
+            return true;
+        }
+
+        return false;
+    }
+
+    componentWillUnmount() {
+        ReactionStore.removeChangeListener(this.props.post.id, this.handleReactionsChanged);
+    }
+
+    handleReactionsChanged() {
+        this.setState({
+            reactions: ReactionStore.getReactions(this.props.post.id)
+        });
+    }
+
+    render() {
+        if (!this.props.post.has_reactions) {
+            return null;
+        }
+
+        return (
+            <ReactionListView
+                post={this.props.post}
+                currentUserId={this.props.currentUserId}
+                reactions={this.state.reactions}
+            />
+        );
+    }
+}
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>
+        );
+    }
+}