website: cleanup emoji handling, hide all unknown emojis (#1082)

website/src/components/Messages/MessageEmojiButton.tsx

@@ -1,28 +1,6 @@
 import { Button } from "@chakra-ui/react";
-import { BoxSelect, Flag, LucideProps, ThumbsDown, ThumbsUp } from "lucide-react";
-import { ReactElement } from "react";
 import { MessageEmoji } from "src/types/Conversation";
-
+import { emojiIcons } from "src/types/Emoji";
-type EmojiIconPurpose = "MINI_BUTTON" | "NORMAL";
-
-const defaultIconProps: (purpose: EmojiIconPurpose) => LucideProps = (purpose: EmojiIconPurpose) => {
-  if (purpose === "MINI_BUTTON") return { height: "1em" };
-  return {};
-};
-
-export const getEmojiIcon = (name: string, purpose: EmojiIconPurpose): ReactElement => {
-  switch (name) {
-    case "+1":
-      return <ThumbsUp {...defaultIconProps(purpose)} />;
-    case "-1":
-      return <ThumbsDown {...defaultIconProps(purpose)} />;
-    case "flag":
-    case "red_flag":
-      return <Flag {...defaultIconProps(purpose)} />;
-    default:
-      return <BoxSelect {...defaultIconProps(purpose)} />;
-  }
-};
 
 interface MessageEmojiButtonProps {
   emoji: MessageEmoji;
@@ -31,6 +9,8 @@ interface MessageEmojiButtonProps {
 }
 
 export const MessageEmojiButton = ({ emoji, checked, onClick }: MessageEmojiButtonProps) => {
+  const EmojiIcon = emojiIcons[emoji.name];
+  if (!EmojiIcon) return <></>;
   return (
     <Button
       onClick={onClick}
@@ -41,7 +21,7 @@ export const MessageEmojiButton = ({ emoji, checked, onClick }: MessageEmojiButt
       minWidth={0}
       padding="0"
     >
-      {getEmojiIcon(emoji.name, "MINI_BUTTON")}
+      <EmojiIcon style={{ height: "1em" }} />
       <span style={{ marginInlineEnd: "0.25em" }}>{emoji.count}</span>
     </Button>
   );

website/src/components/Messages/MessageTableEntry.tsx

@@ -20,11 +20,12 @@ import { useSession } from "next-auth/react";
 import { useTranslation } from "next-i18next";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { LabelMessagePopup } from "src/components/Messages/LabelPopup";
-import { getEmojiIcon, MessageEmojiButton } from "src/components/Messages/MessageEmojiButton";
+import { MessageEmojiButton } from "src/components/Messages/MessageEmojiButton";
 import { ReportPopup } from "src/components/Messages/ReportPopup";
 import { del, post } from "src/lib/api";
 import { colors } from "src/styles/Theme/colors";
 import { Message, MessageEmojis } from "src/types/Conversation";
+import { emojiIcons, isKnownEmoji } from "src/types/Emoji";
 import { mutate } from "swr";
 import useSWRMutation from "swr/mutation";
 
@@ -99,7 +100,7 @@ export function MessageTableEntry({ message, enabled, highlight }: MessageTableE
           onClick={(e) => e.stopPropagation()}
         >
           {Object.entries(emojiState.emojis)
-            .filter(([k]) => !k.startsWith("_"))
+            .filter(([emoji]) => isKnownEmoji(emoji))
             .map(([emoji, count]) => (
               <MessageEmojiButton
                 key={emoji}
@@ -133,10 +134,10 @@ const EmojiMenuItem = ({
   react: (emoji: string, state: boolean) => void;
 }) => {
   const activeColor = useColorModeValue(colors.light.active, colors.dark.active);
-
+  const EmojiIcon = emojiIcons[emoji];
   return (
     <MenuItem onClick={() => react(emoji, !checked)} justifyContent="center" color={checked ? activeColor : undefined}>
-      {getEmojiIcon(emoji, "NORMAL")}
+      <EmojiIcon />
     </MenuItem>
   );
 };

website/src/types/Emoji.ts

@@ -0,0 +1,10 @@
+import { Flag, LucideIcon, ThumbsDown, ThumbsUp } from "lucide-react";
+
+export const emojiIcons: { [emoji: string]: LucideIcon } = {
+  "+1": ThumbsUp,
+  "-1": ThumbsDown,
+  flag: Flag,
+  red_flag: Flag,
+};
+
+export const isKnownEmoji = (emoji: string) => !!emojiIcons[emoji];