From 0a0b45fb8e84863731d379cdead5512438c60aae Mon Sep 17 00:00:00 2001
From: Ajay Bura <ajbura@gmail.com>
Date: Mon, 24 Jan 2022 14:54:53 +0530
Subject: [PATCH] twemojify names in reaction tooltip

Signed-off-by: Ajay Bura <ajbura@gmail.com>
---
 src/app/molecules/message/Message.jsx | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/app/molecules/message/Message.jsx b/src/app/molecules/message/Message.jsx
index 6fe001b..c0975b1 100644
--- a/src/app/molecules/message/Message.jsx
+++ b/src/app/molecules/message/Message.jsx
@@ -298,19 +298,17 @@ function pickEmoji(e, roomId, eventId, roomTimeline) {
 }
 
 function genReactionMsg(userIds, reaction) {
-  const genLessContText = (text) => <span style={{ opacity: '.6' }}>{text}</span>;
-  let msg = <></>;
-  userIds.forEach((userId, index) => {
-    if (index === 0) msg = <>{getUsername(userId)}</>;
-    // eslint-disable-next-line react/jsx-one-expression-per-line
-    else if (index === userIds.length - 1) msg = <>{msg}{genLessContText(' and ')}{getUsername(userId)}</>;
-    // eslint-disable-next-line react/jsx-one-expression-per-line
-    else msg = <>{msg}{genLessContText(', ')}{getUsername(userId)}</>;
-  });
   return (
     <>
-      {msg}
-      {genLessContText(' reacted with')}
+      {userIds.map((userId, index) => (
+        <>
+          {twemojify(getUsername(userId))}
+          <span style={{ opacity: '.6' }}>
+            {index === userIds.length - 1 ? ' and ' : ', '}
+          </span>
+        </>
+      ))}
+      <span style={{ opacity: '.6' }}>{' reacted with '}</span>
       {twemojify(reaction, { className: 'react-emoji' })}
     </>
   );