hippoz/cinny
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki 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
parent c854c7f9d2
commit c3f564605f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/app/organisms/room/message/Reactions.tsx
View file

@ -43,7 +43,6 @@ export const Reactions = as<'div', ReactionsProps>(
evt.stopPropagation(); evt.stopPropagation();
evt.preventDefault(); evt.preventDefault();
const key = evt.currentTarget.getAttribute('data-reaction-key'); const key = evt.currentTarget.getAttribute('data-reaction-key');
console.log(key);
if (!key) setViewer(true); if (!key) setViewer(true);
else setViewer(key); else setViewer(key);
}; };
@ -58,7 +57,7 @@ export const Reactions = as<'div', ReactionsProps>(
> >
{reactions.map(([key, events]) => { {reactions.map(([key, events]) => {
const rEvents = Array.from(events); const rEvents = Array.from(events);
if (rEvents.length === 0) return null; if (rEvents.length === 0 || typeof key !== 'string') return null;
const myREvent = myUserId ? rEvents.find(factoryEventSentBy(myUserId)) : undefined; const myREvent = myUserId ? rEvents.find(factoryEventSentBy(myUserId)) : undefined;
const isPressed = !!myREvent?.getRelation(); const isPressed = !!myREvent?.getRelation();

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

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