diff options
Diffstat (limited to 'webapp/components')
-rw-r--r-- | webapp/components/post_view/components/reaction.jsx | 104 |
1 files changed, 85 insertions, 19 deletions
diff --git a/webapp/components/post_view/components/reaction.jsx b/webapp/components/post_view/components/reaction.jsx index 5bb62d859..0056953b0 100644 --- a/webapp/components/post_view/components/reaction.jsx +++ b/webapp/components/post_view/components/reaction.jsx @@ -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} |