From 036070227cf238dea3efd623f4e237198d95c6b0 Mon Sep 17 00:00:00 2001
From: Dylan <36567925+Airyzz@users.noreply.github.com>
Date: Mon, 15 Aug 2022 19:40:16 +0930
Subject: [PATCH] Remove translation from message reaction tooltip

---
 src/app/molecules/message/Message.jsx | 31 ++++++++++++---------------
 1 file changed, 14 insertions(+), 17 deletions(-)

diff --git a/src/app/molecules/message/Message.jsx b/src/app/molecules/message/Message.jsx
index e21103a3..e9b41bb3 100644
--- a/src/app/molecules/message/Message.jsx
+++ b/src/app/molecules/message/Message.jsx
@@ -360,24 +360,21 @@ function pickEmoji(e, roomId, eventId, roomTimeline) {
 }
 
 function genReactionMsg(userIds, reaction, shortcode) {
-  let i18nKey = 'Molecules.Message.user_reacted';
-
-  if (userIds.length <= 3) {
-    i18nKey += `_${userIds.length}`;
-  }
-
   return (
-    <Trans
-      i18nKey={i18nKey}
-      values={{ count: userIds.length, other_count: userIds.length - 3 }}
-      components={{
-        bold: <b />,
-        user_one: <Twemojify text={getUsername(userIds?.[0])} />,
-        user_two: <Twemojify text={getUsername(userIds?.[1])} />,
-        user_three: <Twemojify text={getUsername(userIds?.[2])} />,
-        emoji: <Twemojify text={shortcode ? `:${shortcode}:` : reaction} />,
-      }}
-    />
+    <>
+      {userIds.map((userId, index) => (
+        <React.Fragment key={userId}>
+          {twemojify(getUsername(userId))}
+          {index < userIds.length - 1 && (
+            <span style={{ opacity: '.6' }}>
+              {index === userIds.length - 2 ? ' and ' : ', '}
+            </span>
+          )}
+        </React.Fragment>
+      ))}
+      <span style={{ opacity: '.6' }}>{' reacted with '}</span>
+      {twemojify(shortcode ? `:${shortcode}:` : reaction, { className: 'react-emoji' })}
+    </>
   );
 }