diff --git a/src/components/Message.tsx b/src/components/Message.tsx index 4d7fe92..4d1bd91 100644 --- a/src/components/Message.tsx +++ b/src/components/Message.tsx @@ -1,4 +1,4 @@ -import { memo, type ReactElement } from "react"; +import type { ReactElement } from "react"; import type { ChatMessage, Processed } from "../hooks/useTwitchChat"; import ProfilePicture from "./ProfilePicture"; import BadgeList from "./BadgeList"; @@ -24,26 +24,27 @@ function colorToRgba(color?: string): string | undefined { return `rgba(${red}, ${green}, ${blue}, 0.25)`; } -function fragmentToComponent( - fragment: Processed, - index: number -): React.ReactElement | undefined { +function FragmentToComponent({ + fragment, +}: { + fragment: Processed; +}): React.ReactElement | undefined { switch (fragment.type) { case "text": - return ; + return ; case "emote": - return ; + return ; case "mention": - return ; + return ; case "7tv-emote": case "bttv-emote": - return ; + return ; default: return; } } -function MessageComponent({ +export default function MessageComponent({ message, twitchBadges, }: { @@ -70,12 +71,11 @@ function MessageComponent({
{message.message.fragments .slice(message.reply ? 1 : 0) // Drop the first mention fragment - .map((fragment, index) => fragmentToComponent(fragment, index))} + .map((fragment, index) => ( + + ))}
); } - -const Message = memo(MessageComponent); -export default Message;