From 0a9f0aea929a359325c4a805cd69f81ab9ce2666 Mon Sep 17 00:00:00 2001
From: Adrian Cowan <othrayte@gmail.com>
Date: Sat, 4 Feb 2023 00:21:13 +1100
Subject: [PATCH] website: Fix bug introduced into optimised build in recent
 emoji cleanup (#1085)

The issue was the omtimised build was optimising the "+1" object key name to just "1" causing the context menu to try to shown an undefined emoji icon.
---
 .../components/Messages/MessageEmojiButton.tsx   |  2 +-
 .../components/Messages/MessageTableEntry.tsx    |  2 +-
 website/src/types/Emoji.ts                       | 16 +++++++++-------
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/website/src/components/Messages/MessageEmojiButton.tsx b/website/src/components/Messages/MessageEmojiButton.tsx
index 88580f8c..41d256bf 100644
--- a/website/src/components/Messages/MessageEmojiButton.tsx
+++ b/website/src/components/Messages/MessageEmojiButton.tsx
@@ -9,7 +9,7 @@ interface MessageEmojiButtonProps {
 }
 
 export const MessageEmojiButton = ({ emoji, checked, onClick }: MessageEmojiButtonProps) => {
-  const EmojiIcon = emojiIcons[emoji.name];
+  const EmojiIcon = emojiIcons.get(emoji.name);
   if (!EmojiIcon) return <></>;
   return (
     <Button
diff --git a/website/src/components/Messages/MessageTableEntry.tsx b/website/src/components/Messages/MessageTableEntry.tsx
index b252a525..cec724e5 100644
--- a/website/src/components/Messages/MessageTableEntry.tsx
+++ b/website/src/components/Messages/MessageTableEntry.tsx
@@ -134,7 +134,7 @@ const EmojiMenuItem = ({
   react: (emoji: string, state: boolean) => void;
 }) => {
   const activeColor = useColorModeValue(colors.light.active, colors.dark.active);
-  const EmojiIcon = emojiIcons[emoji];
+  const EmojiIcon = emojiIcons.get(emoji);
   return (
     <MenuItem onClick={() => react(emoji, !checked)} justifyContent="center" color={checked ? activeColor : undefined}>
       <EmojiIcon />
diff --git a/website/src/types/Emoji.ts b/website/src/types/Emoji.ts
index cf8fc00a..04b2a503 100644
--- a/website/src/types/Emoji.ts
+++ b/website/src/types/Emoji.ts
@@ -1,10 +1,12 @@
 import { Flag, LucideIcon, ThumbsDown, ThumbsUp } from "lucide-react";
 
-export const emojiIcons: { [emoji: string]: LucideIcon } = {
-  "+1": ThumbsUp,
-  "-1": ThumbsDown,
-  flag: Flag,
-  red_flag: Flag,
-};
+// Note: we use a Map here rather than just an object because the optimised
+// build "optimises" +1 to just 1 in the emoji name.
+export const emojiIcons = new Map<string, LucideIcon>([
+  ["+1", ThumbsUp],
+  ["-1", ThumbsDown],
+  ["flag", Flag],
+  ["red_flag", Flag],
+]);
 
-export const isKnownEmoji = (emoji: string) => !!emojiIcons[emoji];
+export const isKnownEmoji = (emoji: string) => emojiIcons.has(emoji);