feat: pop-up window with chat

6lr61 · Sep 19, 2024 · 7451eb5 · 7451eb5
1 parent 858777e
commit 7451eb5
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 16 deletions.
diff --git a/chat/index.html b/chat/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body style="padding: 4px">
+    <div id="root"></div>
+    <script type="module" src="/src/chat.tsx"></script>
+  </body>
+</html>
diff --git a/index.html b/index.html
@@ -1,8 +1,7 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React + TS</title>
   </head>

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,9 +1,16 @@
 import { useContext, useMemo } from "react";
 import { AuthContext } from "./contexts/auth-state/AuthContext";
 import LoginButton from "./components/LoginButton";
-import Messages from "./components/Messages";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
+function openChat() {
+  window.open(
+    "http://localhost:5173/chat/index.html",
+    undefined,
+    "popup=yes,innerWidth=480,innerHeight=784"
+  );
+}
+
 export default function App() {
   const { authState } = useContext(AuthContext);
   const queryClient = useMemo(
@@ -21,10 +28,7 @@ export default function App() {
         {authState && (
           <section>
             <p className="bg-pink-50">Hello: {authState.user.login}</p>
-            <article>
-              <h2>Chat Messages:</h2>
-              <Messages />
-            </article>
+            <button onClick={openChat}>Open Chat</button>
           </section>
         )}
       </QueryClientProvider>

diff --git a/src/chat.tsx b/src/chat.tsx
@@ -0,0 +1,39 @@
+import { StrictMode, useMemo, type ReactElement } from "react";
+import { createRoot } from "react-dom/client";
+import "./index.css";
+import AuthProvider from "./contexts/auth-state/AuthProvider.tsx";
+import EventSubProvider from "./contexts/event-sub/EventSubProvider.tsx";
+import Messages from "./components/Messages.tsx";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const rootElement = document.querySelector("#root");
+
+if (!(rootElement instanceof HTMLDivElement)) {
+  throw new Error("Couldn't find the root element for the React App");
+}
+
+function Chat(): ReactElement {
+  const queryClient = useMemo(
+    () =>
+      new QueryClient({
+        defaultOptions: { queries: { staleTime: Infinity } },
+      }),
+    []
+  );
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <Messages />
+    </QueryClientProvider>
+  );
+}
+
+createRoot(rootElement).render(
+  <StrictMode>
+    <AuthProvider>
+      <EventSubProvider>
+        <Chat />
+      </EventSubProvider>
+    </AuthProvider>
+  </StrictMode>
+);
diff --git a/src/components/Messages.tsx b/src/components/Messages.tsx
@@ -1,24 +1,30 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useState } from "react";
 import { useTwitchChat } from "../hooks/useTwitchChat";
 import { useBadges } from "../hooks/useBadges";
 import Message from "./Message";
 
 export default function Messages(): React.ReactElement {
   const messages = useTwitchChat();
-  const ref = useRef<HTMLDivElement>(null);
   const twitchBadges = useBadges();
+  const [scroll, setScroll] = useState(true);
 
   useEffect(() => {
-    if (!ref.current) {
-      return;
+    if (scroll) {
+      window.scroll(0, document.body.scrollHeight);
     }
-
-    ref.current.scroll(0, ref.current.scrollHeight);
-  }, [messages]);
+  }, [messages, scroll]);
 
   return (
-    <section ref={ref} className="h-[600px] justify-end overflow-y-auto">
-      <article className="flex flex-col gap-1">
+    <section
+      onMouseEnter={() => {
+        setScroll(false);
+      }}
+      onMouseLeave={() => {
+        setScroll(true);
+      }}
+      className="justify-end overflow-y-auto"
+    >
+      <article className="flex flex-grow flex-col gap-1">
         {messages.map((message) => (
           <Message
             key={message.message_id}

diff --git a/vite.config.ts b/vite.config.ts
@@ -10,6 +10,7 @@ export default defineConfig({
       input: {
         main: resolve(__dirname, "index.html"),
         callback: resolve(__dirname, "callback/index.html"),
+        chat: resolve(__dirname, "chat/index.html"),
       },
     },
   },