diff --git a/mobile/src/components/features/chat-space/chat-view/components/MessageReactions.tsx b/mobile/src/components/features/chat-space/chat-view/components/MessageReactions.tsx index d46c6106b..1bdc81899 100644 --- a/mobile/src/components/features/chat-space/chat-view/components/MessageReactions.tsx +++ b/mobile/src/components/features/chat-space/chat-view/components/MessageReactions.tsx @@ -34,10 +34,20 @@ const MessageReactions = ({ messageID, channelID, message_reactions }: { message const reactions: ReactionObject[] = useMemo(() => { //Parse the string to a JSON object and get an array of reactions const parsed_json = JSON.parse(message_reactions ?? '{}') as Record - return Object.values(parsed_json) + + const allReactions = Object.values(parsed_json) + + if (allReactions.length > 8) { + const firstEight = allReactions.slice(0, 8) + const others = allReactions.slice(8) + return firstEight.concat({ reaction: `${others.length} more...`, users: [], count: 0 }) + } else { + return allReactions + } + }, [message_reactions]) - return
+ return
{reactions.map((reaction) => )}
} @@ -71,12 +81,14 @@ const ReactionButton = ({ reaction, onReactionClick, allUsers }: ReactionButtonP className={className} onClick={onClick} > - + {emoji} - - {count} - + {count ? + + {count} + : null + } }