From c3f564605fd9653a593d0685cc8b8e2addd1281e Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Tue, 31 Oct 2023 14:17:57 +1100
Subject: [PATCH] Render reaction with string only key (#1522)

---
 src/app/organisms/room/message/Reactions.tsx  |  3 +-
 .../room/reaction-viewer/ReactionViewer.tsx   | 30 ++++++++++++-------
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/app/organisms/room/message/Reactions.tsx b/src/app/organisms/room/message/Reactions.tsx
index 17b914e..728cf81 100644
--- a/src/app/organisms/room/message/Reactions.tsx
+++ b/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();
 
diff --git a/src/app/organisms/room/reaction-viewer/ReactionViewer.tsx b/src/app/organisms/room/reaction-viewer/ReactionViewer.tsx
index 5626981..7bcc0cc 100644
--- a/src/app/organisms/room/reaction-viewer/ReactionViewer.tsx
+++ b/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]) => (
-                <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>