From 2f5fdbef44ecacd895ad66e7aee9269ae8fcf914 Mon Sep 17 00:00:00 2001
From: Adrian <107351903+6lr61@users.noreply.github.com>
Date: Thu, 12 Sep 2024 12:20:26 +0200
Subject: [PATCH] refactor: move badge privder into message container

---
 src/App.tsx                         | 13 +++++--------
 src/components/MessageContainer.tsx |  5 ++++-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index d3d578a..7de53bf 100644
--- 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
index 1f5c8e7..b181598 100644
--- 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>
   );
 }