IntenseWebs/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2025-02-25 18:55:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

PLT-4903 Rendered a placeholder for user reactions where the user hasn't been loaded (#4784)

Browse Source 
* Rendered a placeholder for user reactions where the user hasn't been loaded

* Added id to reaction Tooltip

* Removed FormattedHTMLMessage from Reaction and improved support for different verb conjugations
This commit is contained in:
Harrison Healey
2016-12-14 11:31:00 -05:00
committed by Joram Wilander
parent 778e89aab4
commit c3d02100a9
2 changed files with 93 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

104
webapp/components/post_view/components/reaction.jsx
View File

@@ -7,7 +7,7 @@ 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 {FormattedMessage} from 'react-intl';
import {OverlayTrigger, Tooltip} from 'react-bootstrap';
export default class Reaction extends React.Component {
@@ -42,11 +42,19 @@ export default class Reaction extends React.Component {
let currentUserReacted = false;
const users = [];
let otherUsers = 0;
for (const reaction of this.props.reactions) {
if (reaction.user_id === this.props.currentUserId) {
currentUserReacted = true;
} else {
users.push(Utils.displayUsername(reaction.user_id));
const displayName = Utils.displayUsername(reaction.user_id);
if (displayName) {
users.push(displayName);
} else {
// Just count users that we don't have loaded
otherUsers += 1;
}
}
}
@@ -56,32 +64,90 @@ export default class Reaction extends React.Component {
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>'
let names;
if (otherUsers > 0) {
if (users.length > 0) {
names = (
<FormattedMessage
id='reaction.usersAndOthersReacted'
defaultMessage='{users} and {otherUsers, number} other {otherUsers, plural, one {user} other {users}}'
values={{
users: users.join(', '),
otherUsers
}}
/>
);
} else {
names = (
<FormattedMessage
id='reaction.othersReacted'
defaultMessage='{otherUsers, number} {otherUsers, plural, one {user} other {users}}'
values={{
otherUsers
}}
/>
);
}
} else if (users.length > 1) {
names = (
<FormattedMessage
id='reaction.usersReacted'
defaultMessage='{users} and {lastUser}'
values={{
users: users.slice(0, -1).join(', '),
lastUser: users[users.length - 1],
emojiName: this.props.emojiName
lastUser: users[users.length - 1]
}}
/>
);
} else {
tooltip = (
<FormattedHTMLMessage
id='reaction.oneReacted'
defaultMessage='<b>{user}</b> reacted with <b>:{emojiName}:</b>'
values={{
user: users[0],
emojiName: this.props.emojiName
}}
names = users[0];
}
let reactionVerb;
if (users.length + otherUsers > 1) {
if (currentUserReacted) {
reactionVerb = (
<FormattedMessage
id='reaction.reactionVerb.youAndUsers'
defaultMessage='reacted'
/>
);
} else {
reactionVerb = (
<FormattedMessage
id='reaction.reactionVerb.users'
defaultMessage='reacted'
/>
);
}
} else if (currentUserReacted) {
reactionVerb = (
<FormattedMessage
id='reaction.reactionVerb.you'
defaultMessage='reacted'
/>
);
} else {
reactionVerb = (
<FormattedMessage
id='reaction.reactionVerb.user'
defaultMessage='reacted'
/>
);
}
const tooltip = (
<FormattedMessage
id='reaction.reacted'
defaultMessage='{users} {reactionVerb} with {emoji}'
values={{
users: <b>{names}</b>,
reactionVerb,
emoji: <b>{':' + this.props.emojiName + ':'}</b>
}}
/>
);
let handleClick;
let clickTooltip;
let className = 'post-reaction';
@@ -111,7 +177,7 @@ export default class Reaction extends React.Component {
placement='top'
shouldUpdatePosition={true}
overlay={
<Tooltip>
<Tooltip id={`${this.props.post.id}-${this.props.emojiName}-reaction`}>
{tooltip}
<br/>
{clickTooltip}