refactor: move badge privder into message container

6lr61 · Sep 12, 2024 · 2f5fdbe · 2f5fdbe
1 parent f204bc9
commit 2f5fdbe
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -2,7 +2,6 @@ import { useContext } from "react";
 import { AuthStateContext } from "./contexts/auth-state/AuthStateContext";
 import LoginButton from "./components/LoginButton";
 import { useTwitchChat } from "./hooks/useTwitchChat";
-import TwitchBadgeProvider from "./contexts/badges/TwitchBadgeProvider";
 import Message from "./components/Message";
 import MessageContainer from "./components/MessageContainer";
 
@@ -24,13 +23,11 @@ export default function App() {
           </p>
           <article>
             <h2>Chat Messages:</h2>
-            <TwitchBadgeProvider>
-              <MessageContainer messages={messages}>
-                {messages.map((message) => (
-                  <Message key={message.message_id} message={message} />
-                ))}
-              </MessageContainer>
-            </TwitchBadgeProvider>
+            <MessageContainer messages={messages}>
+              {messages.map((message) => (
+                <Message key={message.message_id} message={message} />
+              ))}
+            </MessageContainer>
           </article>
         </section>
       )}

diff --git a/src/components/MessageContainer.tsx b/src/components/MessageContainer.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useRef } from "react";
 import type { ChatMessage } from "../hooks/useTwitchChat";
+import TwitchBadgeProvider from "../contexts/badges/TwitchBadgeProvider";
 
 export default function MessageContainer({
   children,
@@ -20,7 +21,9 @@ export default function MessageContainer({
 
   return (
     <section ref={ref} className="h-[600px] justify-end overflow-y-auto">
-      <article className="flex flex-col gap-1">{children}</article>
+      <TwitchBadgeProvider>
+        <article className="flex flex-col gap-1">{children}</article>
+      </TwitchBadgeProvider>
     </section>
   );
 }