From 165ad0d4f791f8ae2109472d8a626d911fa368e0 Mon Sep 17 00:00:00 2001 From: Harrison Healey Date: Wed, 30 Nov 2016 13:55:49 -0500 Subject: 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 --- webapp/components/post_view/components/post.jsx | 1 + .../components/post_view/components/post_body.jsx | 6 + .../components/post_view/components/reaction.jsx | 136 +++++++++++++++++++++ .../components/reaction_list_container.jsx | 82 +++++++++++++ .../post_view/components/reaction_list_view.jsx | 48 ++++++++ 5 files changed, 273 insertions(+) create mode 100644 webapp/components/post_view/components/reaction.jsx create mode 100644 webapp/components/post_view/components/reaction_list_container.jsx create mode 100644 webapp/components/post_view/components/reaction_list_view.jsx (limited to 'webapp/components/post_view') 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 { /> {messageWithAdditionalContent} {fileAttachmentHolder} + ); @@ -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 = ( + + ); + } else { + tooltip = ( + + ); + } + + let handleClick; + let clickTooltip; + let className = 'post-reaction'; + if (currentUserReacted) { + handleClick = this.removeReaction; + clickTooltip = ( + + ); + + className += ' post-reaction--current-user'; + } else { + handleClick = this.addReaction; + clickTooltip = ( + + ); + } + + return ( + + {tooltip} +
+ {clickTooltip} + + } + > +
+ + + {this.props.reactions.length} + +
+ + ); + } +} 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 ( + + ); + } +} 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 ( + + ); + }); + + return ( +
+ {children} +
+ ); + } +} -- cgit v1.2.3-1-g7c22