diff --git a/website/src/components/Messages/MessageEmojiButton.tsx b/website/src/components/Messages/MessageEmojiButton.tsx
index 8b5c9ff7..88580f8c 100644
--- a/website/src/components/Messages/MessageEmojiButton.tsx
+++ b/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";
-
-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 ;
- case "-1":
- return ;
- case "flag":
- case "red_flag":
- return ;
- default:
- return ;
- }
-};
+import { emojiIcons } from "src/types/Emoji";
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 (
);
diff --git a/website/src/components/Messages/MessageTableEntry.tsx b/website/src/components/Messages/MessageTableEntry.tsx
index 63b1cf32..b252a525 100644
--- a/website/src/components/Messages/MessageTableEntry.tsx
+++ b/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]) => (
void;
}) => {
const activeColor = useColorModeValue(colors.light.active, colors.dark.active);
-
+ const EmojiIcon = emojiIcons[emoji];
return (
);
};
diff --git a/website/src/types/Emoji.ts b/website/src/types/Emoji.ts
new file mode 100644
index 00000000..cf8fc00a
--- /dev/null
+++ b/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];