[FIX] Real names were not displayed in the reactions (API/UI) (#13495)

* Fix display real names in api when it is enabled

* Prefer real names over usernames in reactions

* Verify if user exist before return the name

* Add memoize and improve the code

app/ui-message/client/message.html

@@ -142,11 +142,9 @@
 				<li data-emoji="{{reaction.emoji}}" {{markUserReaction reaction}}>
 					<span class="reaction-emoji">{{> renderEmoji reaction.emoji}}</span>
 					<span class="reaction-count">{{reaction.count}}</span>
-					<ul class="people">
-						<span style="font-weight: bold;">
-							{{reaction.usernames}} <span style="color: #aaa;">{{reaction.reaction}}</span>
-						</span>
-					</ul>
+					<span class="people" style="font-weight: bold">
+						{{reaction.usernames}} <span style="color: #aaa;">{{reaction.reaction}}</span>
+					</span>
 				</li>
 			{{/each}}
 			<li class="add-reaction">

app/ui-message/client/message.js

@@ -295,32 +295,36 @@ Template.message.helpers({
 		return true;
 	},
 	reactions() {
-		const userUsername = Meteor.user() && Meteor.user().username;
-		return Object.keys(this.reactions || {}).map((emoji) => {
-			const reaction = this.reactions[emoji];
-			const total = reaction.usernames.length;
-			let usernames = reaction.usernames
-				.slice(0, 15)
-				.map((username) => (username === userUsername ? t('You').toLowerCase() : `@${ username }`))
-				.join(', ');
-			if (total > 15) {
-				usernames = `${ usernames } ${ t('And_more', {
-					length: total - 15,
-				}).toLowerCase() }`;
-			} else {
-				usernames = usernames.replace(/,([^,]+)$/, ` ${ t('and') }$1`);
-			}
-			if (usernames[0] !== '@') {
-				usernames = usernames[0].toUpperCase() + usernames.substr(1);
-			}
-			return {
-				emoji,
-				count: reaction.usernames.length,
-				usernames,
-				reaction: ` ${ t('Reacted_with').toLowerCase() } ${ emoji }`,
-				userReacted: reaction.usernames.indexOf(userUsername) > -1,
-			};
-		});
+		const { username: myUsername, name: myName } = Meteor.user() || {};
+
+		return Object.entries(this.reactions || {})
+			.map(([emoji, reaction]) => {
+				const myDisplayName = reaction.names ? myName : `@${ myUsername }`;
+				const displayNames = (reaction.names || reaction.usernames.map((username) => `@${ username }`));
+				const selectedDisplayNames = displayNames.slice(0, 15).filter((displayName) => displayName !== myDisplayName);
+
+				if (displayNames.some((displayName) => displayName === myDisplayName)) {
+					selectedDisplayNames.unshift(t('You'));
+				}
+
+				let usernames;
+
+				if (displayNames.length > 15) {
+					usernames = `${ selectedDisplayNames.join(', ') }${ t('And_more', { length: displayNames.length - 15 }).toLowerCase() }`;
+				} else if (displayNames.length > 1) {
+					usernames = `${ selectedDisplayNames.slice(0, -1).join(', ') } ${ t('and') } ${ selectedDisplayNames[selectedDisplayNames.length - 1] }`;
+				} else {
+					usernames = selectedDisplayNames[0];
+				}
+
+				return {
+					emoji,
+					count: displayNames.length,
+					usernames,
+					reaction: ` ${ t('Reacted_with').toLowerCase() } ${ emoji }`,
+					userReacted: displayNames.indexOf(myDisplayName) > -1,
+				};
+			});
 	},
 	markUserReaction(reaction) {
 		if (reaction.userReacted) {

app/utils/server/lib/composeMessageObjectWithUser.js

@@ -1,22 +1,33 @@
 import { Users } from '../../../models';
 import { settings } from '../../../settings';
+import memoize from 'mem';
 
-const getUser = (userId) => Users.findOneById(userId);
+const maxAgeInMS = 1000;
+
+const getUserByUsername = (username) => Users.findOneByUsername(username, { fields: { name: 1 } });
+const getNameOfUser = memoize((username) => {
+	const user = getUserByUsername(username);
+	return user ? user.name : undefined;
+}, { maxAge: maxAgeInMS });
 
 export const composeMessageObjectWithUser = function(message, userId) {
 	if (message) {
 		if (message.starred && Array.isArray(message.starred)) {
 			message.starred = message.starred.filter((star) => star._id === userId);
 		}
-		if (message.u && message.u._id && settings.get('UI_Use_Real_Name')) {
-			const user = getUser(message.u._id);
-			message.u.name = user && user.name;
-		}
-		if (message.mentions && message.mentions.length && settings.get('UI_Use_Real_Name')) {
-			message.mentions.forEach((mention) => {
-				const user = getUser(mention._id);
-				mention.name = user && user.name;
-			});
+		if (settings.get('UI_Use_Real_Name')) {
+			if (message.u && message.u._id) {
+				message.u.name = getNameOfUser(message.u.username);
+			}
+			if (message.mentions && message.mentions.length) {
+				message.mentions.forEach((mention) => mention.name = getNameOfUser(mention.username));
+			}
+			if (message.reactions && Object.keys(message.reactions).length) {
+				Object.keys(message.reactions).forEach((reaction) => {
+					const names = message.reactions[reaction].usernames.map(getNameOfUser);
+					message.reactions[reaction].names = names;
+				});
+			}
 		}
 	}
 	return message;