diff options
Diffstat (limited to 'webapp/components/post_view')
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> + ); + } +} |