From 7451eb5c33b6ec717ffd0027463ecac78208cdba Mon Sep 17 00:00:00 2001
From: Adrian <107351903+6lr61@users.noreply.github.com>
Date: Thu, 19 Sep 2024 13:36:28 +0200
Subject: [PATCH] feat: pop-up window with chat
---
chat/index.html | 12 ++++++++++++
index.html | 3 +--
src/App.tsx | 14 ++++++++-----
src/chat.tsx | 39 +++++++++++++++++++++++++++++++++++++
src/components/Messages.tsx | 24 ++++++++++++++---------
vite.config.ts | 1 +
6 files changed, 77 insertions(+), 16 deletions(-)
create mode 100644 chat/index.html
create mode 100644 src/chat.tsx
diff --git a/chat/index.html b/chat/index.html
new file mode 100644
index 0000000..d88c4e5
--- /dev/null
+++ b/chat/index.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+ Vite + React + TS
+
+
+
+
+
+
diff --git a/index.html b/index.html
index e4b78ea..7e6449b 100644
--- a/index.html
+++ b/index.html
@@ -1,8 +1,7 @@
-
+
-
Vite + React + TS
diff --git a/src/App.tsx b/src/App.tsx
index ce21243..a8e5b7a 100644
--- 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 && (
Hello: {authState.user.login}
-
- Chat Messages:
-
-
+
)}
diff --git a/src/chat.tsx b/src/chat.tsx
new file mode 100644
index 0000000..bc79ed7
--- /dev/null
+++ 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 (
+
+
+
+ );
+}
+
+createRoot(rootElement).render(
+
+
+
+
+
+
+
+);
diff --git a/src/components/Messages.tsx b/src/components/Messages.tsx
index c19293c..648ea80 100644
--- 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(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 (
-
-
+ {
+ setScroll(false);
+ }}
+ onMouseLeave={() => {
+ setScroll(true);
+ }}
+ className="justify-end overflow-y-auto"
+ >
+
{messages.map((message) => (