Commit 90114cb8 authored by Harrison Healey's avatar Harrison Healey Committed by GitHub

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 🇨🇦

* 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
parent 3f3dc1d8
......@@ -252,3 +252,23 @@ export function loadProfilesForPosts(posts) {
AsyncClient.getProfilesByIds(list);
}
export function addReaction(channelId, postId, emojiName) {
const reaction = {
post_id: postId,
user_id: UserStore.getCurrentId(),
emoji_name: emojiName
};
AsyncClient.saveReaction(channelId, reaction);
}
export function removeReaction(channelId, postId, emojiName) {
const reaction = {
post_id: postId,
user_id: UserStore.getCurrentId(),
emoji_name: emojiName
};
AsyncClient.deleteReaction(channelId, reaction);
}
......@@ -11,6 +11,7 @@ import BrowserStore from 'stores/browser_store.jsx';
import ErrorStore from 'stores/error_store.jsx';
import NotificationStore from 'stores/notification_store.jsx'; //eslint-disable-line no-unused-vars
import AppDispatcher from 'dispatcher/app_dispatcher.jsx';
import Client from 'client/web_client.jsx';
import WebSocketClient from 'client/web_websocket_client.jsx';
import * as WebrtcActions from './webrtc_actions.jsx';
......@@ -23,7 +24,7 @@ import {loadProfilesAndTeamMembersForDMSidebar} from 'actions/user_actions.jsx';
import {loadChannelsForCurrentUser} from 'actions/channel_actions.jsx';
import * as StatusActions from 'actions/status_actions.jsx';
import {Constants, SocketEvents, UserStatuses} from 'utils/constants.jsx';
import {ActionTypes, Constants, SocketEvents, UserStatuses} from 'utils/constants.jsx';
import {browserHistory} from 'react-router/es6';
......@@ -165,6 +166,14 @@ function handleEvent(msg) {
handleWebrtc(msg);
break;
case SocketEvents.REACTION_ADDED:
handleReactionAddedEvent(msg);
break;
case SocketEvents.REACTION_REMOVED:
handleReactionRemovedEvent(msg);
break;
default:
}
}
......@@ -320,3 +329,23 @@ function handleWebrtc(msg) {
const data = msg.data;
return WebrtcActions.handle(data);
}
function handleReactionAddedEvent(msg) {
const reaction = JSON.parse(msg.data.reaction);
AppDispatcher.handleServerAction({
type: ActionTypes.ADDED_REACTION,
postId: reaction.post_id,
reaction
});
}
function handleReactionRemovedEvent(msg) {
const reaction = JSON.parse(msg.data.reaction);
AppDispatcher.handleServerAction({
type: ActionTypes.REMOVED_REACTION,
postId: reaction.post_id,
reaction
});
}
......@@ -2005,11 +2005,11 @@ export default class Client {
removeCertificateFile(filename, success, error) {
request.
post(`${this.getAdminRoute()}/remove_certificate`).
set(this.defaultHeaders).
accept('application/json').
send({filename}).
end(this.handleResponse.bind(this, 'removeCertificateFile', success, error));
post(`${this.getAdminRoute()}/remove_certificate`).
set(this.defaultHeaders).
accept('application/json').
send({filename}).
end(this.handleResponse.bind(this, 'removeCertificateFile', success, error));
}
samlCertificateStatus(success, error) {
......@@ -2030,6 +2030,33 @@ export default class Client {
});
}
saveReaction(channelId, reaction, success, error) {
request.
post(`${this.getChannelNeededRoute(channelId)}/posts/${reaction.post_id}/reactions/save`).
set(this.defaultHeaders).
accept('application/json').
send(reaction).
end(this.handleResponse.bind(this, 'saveReaction', success, error));
}
deleteReaction(channelId, reaction, success, error) {
request.
post(`${this.getChannelNeededRoute(channelId)}/posts/${reaction.post_id}/reactions/delete`).
set(this.defaultHeaders).
accept('application/json').
send(reaction).
end(this.handleResponse.bind(this, 'deleteReaction', success, error));
}
listReactions(channelId, postId, success, error) {
request.
get(`${this.getChannelNeededRoute(channelId)}/posts/${postId}/reactions`).
set(this.defaultHeaders).
type('application/json').
accept('application/json').
end(this.handleResponse.bind(this, 'listReactions', success, error));
}
webrtcToken(success, error) {
request.post(`${this.getWebrtcRoute()}/token`).
set(this.defaultHeaders).
......
......@@ -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
};
......@@ -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();
......
......@@ -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: (
......
......@@ -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,
......
// 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>
);
}
}
// 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}
/>
);
}
}
// 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>
);
}
}
......@@ -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>
......
......@@ -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>
......
......@@ -339,6 +339,7 @@ export default class RhsThread extends React.Component {
<CreateComment
channelId={selected.channel_id}