Render reaction with string only key (#1522)

src/app/organisms/room/message/Reactions.tsx

@@ -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();
 

src/app/organisms/room/reaction-viewer/ReactionViewer.tsx

@@ -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]) => (
+              {reactions.map(([key, evts]) => {
-                <Reaction
+                if (typeof key !== 'string') return null;
-                  key={key}
+                return (
-                  mx={mx}
+                  <Reaction
-                  reaction={key}
+                    key={key}
-                  count={evts.size}
+                    mx={mx}
-                  aria-selected={key === selectedKey}
+                    reaction={key}
-                  onClick={() => setSelectedKey(key)}
+                    count={evts.size}
-                />
+                    aria-selected={key === selectedKey}
-              ))}
+                    onClick={() => setSelectedKey(key)}
+                  />
+                );
+              })}
             </Box>
           </Scroll>
         </Box>