Gaboule/chat
1
0
Fork 0
Code Issues Pull requests Activity

Render reaction with string only key (#1522)

Browse source
This commit is contained in:
Ajay Bura 2023-10-31 14:17:57 +11:00 • committed by GitHub
commit c3f564605f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

30
src/app/organisms/room/reaction-viewer/ReactionViewer.tsx
View file

@ -41,7 +41,12 @@ export const ReactionViewer = as<'div', ReactionViewerProps>(
relations,
useCallback((rel) => [...(rel.getSortedAnnotationsByKey() ?? [])], [])
);
const [selectedKey, setSelectedKey] = useState<string>(initialKey ?? reactions[0][0]);
const [selectedKey, setSelectedKey] = useState<string>(() => {
if (initialKey) return initialKey;
const defaultReaction = reactions.find((reaction) => typeof reaction[0] === 'string');
return defaultReaction ? defaultReaction[0] : '';
});
const getName = (member: RoomMember) =>
getMemberDisplayName(room, member.userId) ?? getMxIdLocalPart(member.userId) ?? member.userId;
@ -68,16 +73,19 @@ export const ReactionViewer = as<'div', ReactionViewerProps>(
<Box shrink="No" className={css.Sidebar}>
<Scroll visibility="Hover" hideTrack size="300">
<Box className={css.SidebarContent} direction="Column" gap="200">
{reactions.map(([key, evts]) => (
<Reaction
key={key}
mx={mx}
reaction={key}
count={evts.size}
aria-selected={key === selectedKey}
onClick={() => setSelectedKey(key)}
/>
))}
{reactions.map(([key, evts]) => {
if (typeof key !== 'string') return null;
return (
<Reaction
key={key}
mx={mx}
reaction={key}
count={evts.size}
aria-selected={key === selectedKey}
onClick={() => setSelectedKey(key)}
/>
);
})}
</Box>
</Scroll>
</Box>