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 👍 and 👎 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
Этот коммит содержится в:
Harrison Healey
коммит произвёл
GitHub
GitHub
родитель
2bf0342d13
Коммит
165ad0d4f7
@@ -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}
|
||||
|
||||
@@ -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,
|
||||
|
||||
136
webapp/components/post_view/components/reaction.jsx
Обычный файл
136
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>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
48
webapp/components/post_view/components/reaction_list_view.jsx
Обычный файл
48
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>
|
||||
);
|
||||
}
|
||||
}
|
||||
Ссылка в новой задаче
Block a user