noury/cinny
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases 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.preventDefault();
const key = evt.currentTarget.getAttribute('data-reaction-key');
console.log(key);
if (!key) setViewer(true);
else setViewer(key);
};
@ -58,7 +57,7 @@ export const Reactions = as<'div', ReactionsProps>(
>
{reactions.map(([key, 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 isPressed = !!myREvent?.getRelation();

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>