Merge branch 'rm/361007' into 'master'

reimplement reactions tooltip truncate See merge request kchat/webapp!923
Infomaniak · Sep 17, 2024 · 84f250a · 84f250a
2 parents 91775c5 + ad901db
commit 84f250a
Showing 1 changed file with 8 additions and 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
@@ -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