From ad901db97331704e3e6c8b6713a39614fb888654 Mon Sep 17 00:00:00 2001
From: "anton.buksa" <anton.buksa@infomaniak.com>
Date: Mon, 16 Sep 2024 13:10:20 +0200
Subject: [PATCH] reimplement reactions tooltip truncate

Changelog: added
---
 .../reaction/reaction_tooltip/reaction_tooltip.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/webapp/channels/src/components/post_view/reaction/reaction_tooltip/reaction_tooltip.tsx b/webapp/channels/src/components/post_view/reaction/reaction_tooltip/reaction_tooltip.tsx
index 19fdb91150..7a4a1028fe 100644
--- a/webapp/channels/src/components/post_view/reaction/reaction_tooltip/reaction_tooltip.tsx
+++ b/webapp/channels/src/components/post_view/reaction/reaction_tooltip/reaction_tooltip.tsx
@@ -15,6 +15,7 @@ type Props = {
     reactions: ReactionType[];
     users: string[];
 };
+const MAX_DISPLAY_USER = 20;
 
 const ReactionTooltip: React.FC<Props> = (props: Props) => {
     const {
@@ -27,17 +28,18 @@ const ReactionTooltip: React.FC<Props> = (props: Props) => {
         users,
     } = props;
 
-    const otherUsersCount = reactions.length - users.length;
+    const reduceUsers = users.slice(0, MAX_DISPLAY_USER);
+    const otherUsersCount = reactions.length - reduceUsers.length;
 
     let names: React.ReactNode;
     if (otherUsersCount > 0) {
-        if (users.length > 0) {
+        if (reduceUsers.length > 0) {
             names = (
                 <FormattedMessage
                     id='reaction.usersAndOthersReacted'
                     defaultMessage='{users} and {otherUsers, number} other {otherUsers, plural, one {user} other {users}}'
                     values={{
-                        users: users.join(', '),
+                        users: reduceUsers.join(', '),
                         otherUsers: otherUsersCount,
                     }}
                 />
@@ -59,8 +61,8 @@ const ReactionTooltip: React.FC<Props> = (props: Props) => {
                 id='reaction.usersReacted'
                 defaultMessage='{users} and {lastUser}'
                 values={{
-                    users: users.slice(0, -1).join(', '),
-                    lastUser: users[users.length - 1],
+                    users: reduceUsers.slice(0, -1).join(', '),
+                    lastUser: reduceUsers[reduceUsers.length - 1],
                 }}
             />
         );
@@ -69,7 +71,7 @@ const ReactionTooltip: React.FC<Props> = (props: Props) => {
     }
 
     let reactionVerb: React.ReactNode;
-    if (users.length + otherUsersCount > 1) {
+    if (users.length > 1) {
         if (currentUserReacted) {
             reactionVerb = (
                 <FormattedMessage