diff options
author | Harrison Healey <harrisonmhealey@gmail.com> | 2016-11-30 13:55:49 -0500 |
---|---|---|
committer | GitHub <noreply@github.com> | 2016-11-30 13:55:49 -0500 |
commit | 165ad0d4f791f8ae2109472d8a626d911fa368e0 (patch) | |
tree | 29001baf676d7d4ef4cd9462e9f2c6766ed6333a /webapp/components | |
parent | 2bf0342d130b3a77c5ed02e98e0857f28a5787f0 (diff) | |
download | chat-165ad0d4f791f8ae2109472d8a626d911fa368e0.tar.gz chat-165ad0d4f791f8ae2109472d8a626d911fa368e0.tar.bz2 chat-165ad0d4f791f8ae2109472d8a626d911fa368e0.zip |
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
Diffstat (limited to 'webapp/components')
-rw-r--r-- | webapp/components/create_comment.jsx | 74 | ||||
-rw-r--r-- | webapp/components/create_post.jsx | 29 | ||||
-rw-r--r-- | webapp/components/emoji/components/add_emoji.jsx | 2 | ||||
-rw-r--r-- | webapp/components/post_view/components/post.jsx | 1 | ||||
-rw-r--r-- | webapp/components/post_view/components/post_body.jsx | 6 | ||||
-rw-r--r-- | webapp/components/post_view/components/reaction.jsx | 136 | ||||
-rw-r--r-- | webapp/components/post_view/components/reaction_list_container.jsx | 82 | ||||
-rw-r--r-- | webapp/components/post_view/components/reaction_list_view.jsx | 48 | ||||
-rw-r--r-- | webapp/components/rhs_comment.jsx | 5 | ||||
-rw-r--r-- | webapp/components/rhs_root_post.jsx | 5 | ||||
-rw-r--r-- | webapp/components/rhs_thread.jsx | 1 | ||||
-rw-r--r-- | webapp/components/suggestion/emoticon_provider.jsx | 32 | ||||
-rw-r--r-- | webapp/components/textbox.jsx | 11 |
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); } |