FIX - filtered duplicate reactions in reactions viewer

This commit is contained in:
Your name 2024-10-20 17:17:22 +05:30
parent c110e64341
commit 2cbe0000a8
2 changed files with 49 additions and 11 deletions

View file

@ -40,7 +40,25 @@ export const Reactions = as<'div', ReactionsProps>(
const reactions = useRelations(
relations,
useCallback((rel) => [...(rel.getSortedAnnotationsByKey() ?? [])], [])
);
).map((reaction) => {
const events = Array.from(reaction[1]);
// Track unique userIds using a Set to filter efficiently
const existingUserIds = new Set();
const uniqueEvents = events.filter((event) => {
const userId = event.sender?.userId;
if (!userId || existingUserIds.has(userId)) {
return false; // If already exist, filter out the event
}
existingUserIds.add(userId); // Mark this userId as exis
return true;
});
// eslint-disable-next-line no-param-reassign
reaction[1] = new Set(uniqueEvents);
return reaction;
});
const handleViewReaction: MouseEventHandler<HTMLButtonElement> = (evt) => {
evt.stopPropagation();

View file

@ -40,7 +40,25 @@ export const ReactionViewer = as<'div', ReactionViewerProps>(
const reactions = useRelations(
relations,
useCallback((rel) => [...(rel.getSortedAnnotationsByKey() ?? [])], [])
);
).map((reaction) => {
const events = Array.from(reaction[1]);
// Track unique userIds using a Set to filter efficiently
const existingUserIds = new Set();
const uniqueEvents = events.filter((event) => {
const userId = event.sender?.userId;
if (!userId || existingUserIds.has(userId)) {
return false; // If already exist, filter out the event
}
existingUserIds.add(userId); // Mark this userId as exis
return true;
});
// eslint-disable-next-line no-param-reassign
reaction[1] = new Set(uniqueEvents);
return reaction;
});
const [selectedKey, setSelectedKey] = useState<string>(() => {
if (initialKey) return initialKey;
@ -111,15 +129,17 @@ export const ReactionViewer = as<'div', ReactionViewerProps>(
const name = (member ? getName(member) : getMxIdLocalPart(senderId)) ?? senderId;
const avatarMxcUrl = member?.getMxcAvatarUrl();
const avatarUrl = avatarMxcUrl ? mx.mxcUrlToHttp(
avatarMxcUrl,
100,
100,
'crop',
undefined,
false,
useAuthentication
) : undefined;
const avatarUrl = avatarMxcUrl
? mx.mxcUrlToHttp(
avatarMxcUrl,
100,
100,
'crop',
undefined,
false,
useAuthentication
)
: undefined;
return (
<MenuItem