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

13 files changed, 383 insertions, 49 deletions

diff --git a/webapp/components/create_comment.jsx b/webapp/components/create_comment.jsx
index 2aa85265a..a0a4ddcd2 100644
--- a/webapp/components/create_comment.jsx
+++ b/webapp/components/create_comment.jsx
@@ -5,6 +5,7 @@ import $ from 'jquery';
 import ReactDOM from 'react-dom';
 import AppDispatcher from '../dispatcher/app_dispatcher.jsx';
 import Client from 'client/web_client.jsx';
+import EmojiStore from 'stores/emoji_store.jsx';
 import UserStore from 'stores/user_store.jsx';
 import PostDeletedModal from './post_deleted_modal.jsx';
 import PostStore from 'stores/post_store.jsx';
@@ -17,6 +18,7 @@ import FilePreview from './file_preview.jsx';
 import * as Utils from 'utils/utils.jsx';
 import * as UserAgent from 'utils/user_agent.jsx';
 import * as GlobalActions from 'actions/global_actions.jsx';
+import * as PostActions from 'actions/post_actions.jsx';
 
 import Constants from 'utils/constants.jsx';
 
@@ -25,6 +27,8 @@ import {FormattedMessage} from 'react-intl';
 const ActionTypes = Constants.ActionTypes;
 const KeyCodes = Constants.KeyCodes;
 
+import {REACTION_PATTERN} from './create_post.jsx';
+
 import React from 'react';
 
 export default class CreateComment extends React.Component {
@@ -34,6 +38,8 @@ export default class CreateComment extends React.Component {
         this.lastTime = 0;
 
         this.handleSubmit = this.handleSubmit.bind(this);
+        this.handleSubmitPost = this.handleSubmitPost.bind(this);
+        this.handleSubmitReaction = this.handleSubmitReaction.bind(this);
         this.commentMsgKeyPress = this.commentMsgKeyPress.bind(this);
         this.handleChange = this.handleChange.bind(this);
         this.handleKeyDown = this.handleKeyDown.bind(this);
@@ -100,15 +106,9 @@ export default class CreateComment extends React.Component {
             return;
         }
 
-        const post = {};
-        post.file_ids = [];
-        post.message = this.state.message;
-
-        if (post.message.trim().length === 0 && this.state.fileInfos.length === 0) {
-            return;
-        }
+        const message = this.state.message;
 
-        if (post.message.length > Constants.CHARACTER_LIMIT) {
+        if (message.length > Constants.CHARACTER_LIMIT) {
             this.setState({
                 postError: (
                     <FormattedMessage
@@ -121,15 +121,43 @@ export default class CreateComment extends React.Component {
             return;
         }
 
-        MessageHistoryStore.storeMessageInHistory(this.state.message);
+        MessageHistoryStore.storeMessageInHistory(message);
+
+        if (message.trim().length === 0 && this.state.previews.length === 0) {
+            return;
+        }
+
+        const isReaction = REACTION_PATTERN.exec(message);
+        if (isReaction && EmojiStore.has(isReaction[2])) {
+            this.handleSubmitReaction(isReaction);
+        } else {
+            this.handleSubmitPost(message);
+        }
+
+        this.setState({
+            message: '',
+            submitting: false,
+            postError: null,
+            fileInfos: [],
+            serverError: null
+        });
 
+        const fasterThanHumanWillClick = 150;
+        const forceFocus = (Date.now() - this.state.lastBlurAt < fasterThanHumanWillClick);
+        this.focusTextbox(forceFocus);
+    }
+
+    handleSubmitPost(message) {
         const userId = UserStore.getCurrentId();
+        const time = Utils.getTimestamp();
 
+        const post = {};
+        post.file_ids = [];
+        post.message = message;
         post.channel_id = this.props.channelId;
         post.root_id = this.props.rootId;
         post.parent_id = this.props.rootId;
         post.file_ids = this.state.fileInfos.map((info) => info.id);
-        const time = Utils.getTimestamp();
         post.pending_post_id = `${userId}:${time}`;
         post.user_id = userId;
         post.create_at = time;
@@ -160,18 +188,21 @@ export default class CreateComment extends React.Component {
                 });
             }
         );
+    }
 
-        this.setState({
-            message: '',
-            submitting: false,
-            postError: null,
-            fileInfos: [],
-            serverError: null
-        });
+    handleSubmitReaction(isReaction) {
+        const action = isReaction[1];
 
-        const fasterThanHumanWillClick = 150;
-        const forceFocus = (Date.now() - this.state.lastBlurAt < fasterThanHumanWillClick);
-        this.focusTextbox(forceFocus);
+        const emojiName = isReaction[2];
+        const postId = this.props.latestPostId;
+
+        if (action === '+') {
+            PostActions.addReaction(this.props.channelId, postId, emojiName);
+        } else if (action === '-') {
+            PostActions.removeReaction(this.props.channelId, postId, emojiName);
+        }
+
+        PostStore.storeCommentDraft(this.props.rootId, null);
     }
 
     commentMsgKeyPress(e) {
@@ -455,5 +486,6 @@ export default class CreateComment extends React.Component {
 
 CreateComment.propTypes = {
     channelId: React.PropTypes.string.isRequired,
-    rootId: React.PropTypes.string.isRequired
+    rootId: React.PropTypes.string.isRequired,
+    latestPostId: React.PropTypes.string.isRequired
 };
diff --git a/webapp/components/create_post.jsx b/webapp/components/create_post.jsx
index db61aca41..2ba79af36 100644
--- a/webapp/components/create_post.jsx
+++ b/webapp/components/create_post.jsx
@@ -9,14 +9,16 @@ import FilePreview from './file_preview.jsx';
 import PostDeletedModal from './post_deleted_modal.jsx';
 import TutorialTip from './tutorial/tutorial_tip.jsx';
 
-import AppDispatcher from '../dispatcher/app_dispatcher.jsx';
+import AppDispatcher from 'dispatcher/app_dispatcher.jsx';
 import * as GlobalActions from 'actions/global_actions.jsx';
 import Client from 'client/web_client.jsx';
 import * as Utils from 'utils/utils.jsx';
 import * as UserAgent from 'utils/user_agent.jsx';
 import * as ChannelActions from 'actions/channel_actions.jsx';
+import * as PostActions from 'actions/post_actions.jsx';
 
 import ChannelStore from 'stores/channel_store.jsx';
+import EmojiStore from 'stores/emoji_store.jsx';
 import PostStore from 'stores/post_store.jsx';
 import MessageHistoryStore from 'stores/message_history_store.jsx';
 import UserStore from 'stores/user_store.jsx';
@@ -34,6 +36,8 @@ const KeyCodes = Constants.KeyCodes;
 
 import React from 'react';
 
+export const REACTION_PATTERN = /^(\+|-):([^:\s]+):\s*$/;
+
 export default class CreatePost extends React.Component {
     constructor(props) {
         super(props);
@@ -101,6 +105,7 @@ export default class CreatePost extends React.Component {
 
         this.setState({submitting: true, serverError: null});
 
+        const isReaction = REACTION_PATTERN.exec(post.message);
         if (post.message.indexOf('/') === 0) {
             PostStore.storeDraft(this.state.channelId, null);
             this.setState({message: '', postError: null, fileInfos: []});
@@ -123,14 +128,18 @@ export default class CreatePost extends React.Component {
                         const state = {};
                         state.serverError = err.message;
                         state.submitting = false;
-                        this.setState(state);
+                        this.setState({state});
                     }
                 }
             );
+        } else if (isReaction && EmojiStore.has(isReaction[2])) {
+            this.sendReaction(isReaction);
         } else {
             this.sendMessage(post);
         }
 
+        this.setState({message: '', submitting: false, postError: null, fileInfos: [], serverError: null});
+
         const fasterThanHumanWillClick = 150;
         const forceFocus = (Date.now() - this.state.lastBlurAt < fasterThanHumanWillClick);
         this.focusTextbox(forceFocus);
@@ -148,7 +157,6 @@ export default class CreatePost extends React.Component {
         post.parent_id = this.state.parentId;
 
         GlobalActions.emitUserPostedEvent(post);
-        this.setState({message: '', submitting: false, postError: null, fileInfos: [], serverError: null});
 
         Client.createPost(post,
             (data) => {
@@ -177,6 +185,21 @@ export default class CreatePost extends React.Component {
         );
     }
 
+    sendReaction(isReaction) {
+        const action = isReaction[1];
+
+        const emojiName = isReaction[2];
+        const postId = PostStore.getLatestPost(this.state.channelId).id;
+
+        if (action === '+') {
+            PostActions.addReaction(this.state.channelId, postId, emojiName);
+        } else if (action === '-') {
+            PostActions.removeReaction(this.state.channelId, postId, emojiName);
+        }
+
+        PostStore.storeCurrentDraft(null);
+    }
+
     focusTextbox(keepFocus = false) {
         if (keepFocus || !Utils.isMobile()) {
             this.refs.textbox.focus();
diff --git a/webapp/components/emoji/components/add_emoji.jsx b/webapp/components/emoji/components/add_emoji.jsx
index 9e4babc19..d859da0df 100644
--- a/webapp/components/emoji/components/add_emoji.jsx
+++ b/webapp/components/emoji/components/add_emoji.jsx
@@ -85,7 +85,7 @@ export default class AddEmoji extends React.Component {
             });
 
             return;
-        } else if (EmojiStore.getSystemEmojis().has(emoji.name)) {
+        } else if (EmojiStore.hasSystemEmoji(emoji.name)) {
             this.setState({
                 saving: false,
                 error: (
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>
+        );
+    }
+}
diff --git a/webapp/components/rhs_comment.jsx b/webapp/components/rhs_comment.jsx
index 416c0fe4b..f4cc0d8e5 100644
--- a/webapp/components/rhs_comment.jsx
+++ b/webapp/components/rhs_comment.jsx
@@ -6,6 +6,7 @@ import FileAttachmentListContainer from './file_attachment_list_container.jsx';
 import PendingPostOptions from 'components/post_view/components/pending_post_options.jsx';
 import PostMessageContainer from 'components/post_view/components/post_message_container.jsx';
 import ProfilePicture from 'components/profile_picture.jsx';
+import ReactionListContainer from 'components/post_view/components/reaction_list_container.jsx';
 import RhsDropdown from 'components/rhs_dropdown.jsx';
 
 import TeamStore from 'stores/team_store.jsx';
@@ -404,6 +405,10 @@ export default class RhsComment extends React.Component {
                                 {message}
                             </div>
                             {fileAttachment}
+                            <ReactionListContainer
+                                post={post}
+                                currentUserId={this.props.currentUser.id}
+                            />
                         </div>
                     </div>
                 </div>
diff --git a/webapp/components/rhs_root_post.jsx b/webapp/components/rhs_root_post.jsx
index 22795967a..4681f3fd3 100644
--- a/webapp/components/rhs_root_post.jsx
+++ b/webapp/components/rhs_root_post.jsx
@@ -6,6 +6,7 @@ import PostBodyAdditionalContent from 'components/post_view/components/post_body
 import PostMessageContainer from 'components/post_view/components/post_message_container.jsx';
 import FileAttachmentListContainer from './file_attachment_list_container.jsx';
 import ProfilePicture from 'components/profile_picture.jsx';
+import ReactionListContainer from 'components/post_view/components/reaction_list_container.jsx';
 import RhsDropdown from 'components/rhs_dropdown.jsx';
 
 import ChannelStore from 'stores/channel_store.jsx';
@@ -389,6 +390,10 @@ export default class RhsRootPost extends React.Component {
                                 message={messageWrapper}
                             />
                             {fileAttachment}
+                            <ReactionListContainer
+                                post={post}
+                                currentUserId={this.props.currentUser.id}
+                            />
                         </div>
                     </div>
                 </div>
diff --git a/webapp/components/rhs_thread.jsx b/webapp/components/rhs_thread.jsx
index 11c79d722..a3266e9ba 100644
--- a/webapp/components/rhs_thread.jsx
+++ b/webapp/components/rhs_thread.jsx
@@ -339,6 +339,7 @@ export default class RhsThread extends React.Component {
                                 <CreateComment
                                     channelId={selected.channel_id}
                                     rootId={selected.id}
+                                    latestPostId={postsArray.length > 0 ? postsArray[postsArray.length - 1].id : selected.id}
                                 />
                             </div>
                         </div>
diff --git a/webapp/components/suggestion/emoticon_provider.jsx b/webapp/components/suggestion/emoticon_provider.jsx
index c2b6b9a50..d04750159 100644
--- a/webapp/components/suggestion/emoticon_provider.jsx
+++ b/webapp/components/suggestion/emoticon_provider.jsx
@@ -46,20 +46,23 @@ export default class EmoticonProvider {
     handlePretextChanged(suggestionId, pretext) {
         let hasSuggestions = false;
 
-        // look for partial matches among the named emojis
-        const captured = (/(?:^|\s)(:([^:\s]*))$/g).exec(pretext);
+        // look for the potential emoticons at the start of the text, after whitespace, and at the start of emoji reaction commands
+        const captured = (/(^|\s|^\+|^-)(:([^:\s]*))$/g).exec(pretext);
         if (captured) {
-            const text = captured[1];
-            const partialName = captured[2];
+            const prefix = captured[1];
+            const text = captured[2];
+            const partialName = captured[3];
 
             const matched = [];
 
-            // check for text emoticons
-            for (const emoticon of Object.keys(Emoticons.emoticonPatterns)) {
-                if (Emoticons.emoticonPatterns[emoticon].test(text)) {
-                    SuggestionStore.addSuggestion(suggestionId, text, EmojiStore.get(emoticon), EmoticonSuggestion, text);
+            // check for text emoticons if this isn't for an emoji reaction
+            if (prefix !== '-' && prefix !== '+') {
+                for (const emoticon of Object.keys(Emoticons.emoticonPatterns)) {
+                    if (Emoticons.emoticonPatterns[emoticon].test(text)) {
+                        SuggestionStore.addSuggestion(suggestionId, text, EmojiStore.get(emoticon), EmoticonSuggestion, text);
 
-                    hasSuggestions = true;
+                        hasSuggestions = true;
+                    }
                 }
             }
 
@@ -76,11 +79,14 @@ export default class EmoticonProvider {
 
             // sort the emoticons so that emoticons starting with the entered text come first
             matched.sort((a, b) => {
-                const aPrefix = a.name.startsWith(partialName);
-                const bPrefix = b.name.startsWith(partialName);
+                const aName = a.name || a.aliases[0];
+                const bName = b.name || b.aliases[0];
+
+                const aPrefix = aName.startsWith(partialName);
+                const bPrefix = bName.startsWith(partialName);
 
                 if (aPrefix === bPrefix) {
-                    return a.name.localeCompare(b.name);
+                    return aName.localeCompare(bName);
                 } else if (aPrefix) {
                     return -1;
                 }
@@ -88,7 +94,7 @@ export default class EmoticonProvider {
                 return 1;
             });
 
-            const terms = matched.map((emoticon) => ':' + emoticon.name + ':');
+            const terms = matched.map((emoticon) => ':' + (emoticon.name || emoticon.aliases[0]) + ':');
 
             SuggestionStore.clearSuggestions(suggestionId);
             if (terms.length > 0) {
diff --git a/webapp/components/textbox.jsx b/webapp/components/textbox.jsx
index 9192cd4f9..6ba925ed7 100644
--- a/webapp/components/textbox.jsx
+++ b/webapp/components/textbox.jsx
@@ -26,7 +26,6 @@ export default class Textbox extends React.Component {
 
         this.focus = this.focus.bind(this);
         this.recalculateSize = this.recalculateSize.bind(this);
-        this.getStateFromStores = this.getStateFromStores.bind(this);
         this.onRecievedError = this.onRecievedError.bind(this);
         this.handleKeyPress = this.handleKeyPress.bind(this);
         this.handleKeyDown = this.handleKeyDown.bind(this);
@@ -48,16 +47,6 @@ export default class Textbox extends React.Component {
         }
     }
 
-    getStateFromStores() {
-        const error = ErrorStore.getLastError();
-
-        if (error) {
-            return {message: error.message};
-        }
-
-        return {message: null};
-    }
-
     componentDidMount() {
         ErrorStore.addChangeListener(this.onRecievedError);
     }