feat: eventsub context and hook

src/App.tsx

@@ -1,18 +1,24 @@
 import { useContext } from "react";
-import "./App.css";
 import { AuthStateContext } from "./contexts/auth-state/AuthStateContext";
 import LoginButton from "./components/LoginButton";
+import "./App.css";
+import { useEventSub } from "./hooks/useEventSub";
 
 export default function App() {
-  const context = useContext(AuthStateContext);
+  const authContext = useContext(AuthStateContext);
+  const { lastMessage } = useEventSub("channel.chat.message", {
+    broadcaster_user_id: authContext?.authState?.user.id,
+    user_id: authContext?.authState?.user.id,
+  });
 
-  if (!context) {
+  if (!authContext) {
     return <p>Missing AuthStateContext provider?</p>;
   }
 
   return (
     <>
-      <p>Hello: {context.authState?.user.login}</p>
+      <p>Hello: {authContext.authState?.user.login}</p>
+      <p>Last message: {JSON.stringify(lastMessage)}</p>
       <LoginButton />
     </>
   );

src/contexts/event-sub/EventSubContext.ts

@@ -0,0 +1,8 @@
+import { createContext } from "react";
+import type { EventSub } from "../../utils/event-sub/EventSub";
+
+interface Value {
+  subscribe: typeof EventSub.instance.subscribe;
+}
+
+export const EventSubContext = createContext<Value | null>(null);

src/contexts/event-sub/EventSubProvider.tsx

@@ -0,0 +1,18 @@
+import { EventSub } from "../../utils/event-sub/EventSub";
+import { EventSubContext } from "./EventSubContext";
+
+interface Props {
+  children: React.ReactNode;
+}
+
+export default function EventSubProvider({
+  children,
+}: Props): React.ReactElement {
+  const subscribe = EventSub.instance.subscribe.bind(EventSub.instance);
+
+  return (
+    <EventSubContext.Provider value={{ subscribe }}>
+      {children}
+    </EventSubContext.Provider>
+  );
+}

src/hooks/useEventSub.ts

@@ -0,0 +1,52 @@
+import { useCallback, useContext, useEffect, useState } from "react";
+import { EventSubContext } from "../contexts/event-sub/EventSubContext";
+import { AuthStateContext } from "../contexts/auth-state/AuthStateContext";
+
+export function useEventSub(
+  type: string | string[],
+  condition: Record<string, unknown>,
+  bufferSize = 50
+) {
+  const authStateContext = useContext(AuthStateContext);
+  const eventSubContext = useContext(EventSubContext);
+  const [messages, setMessages] = useState<Record<string, unknown>[]>([]);
+  const [lastMessage, setLastMessage] = useState<Record<string, unknown>>();
+
+  if (!authStateContext) {
+    throw new Error("useEventSub: Needs an AuthStateContext Provider!");
+  }
+
+  if (!eventSubContext) {
+    throw new Error("useEventSub: Needs a EventSubContext Provider!");
+  }
+
+  const { subscribe } = eventSubContext;
+
+  const handleMessage = useCallback(
+    (message: Record<string, unknown>) => {
+      setMessages((messages) => [...messages.slice(-bufferSize + 1), message]);
+      setLastMessage(() => message);
+    },
+    [bufferSize]
+  );
+
+  useEffect(() => {
+    const { authState } = authStateContext;
+
+    if (!authState) {
+      return;
+    }
+
+    if (Object.values(condition).some((value) => value === undefined)) {
+      console.error(
+        "useEventSub: Was given a bad subscription condition:",
+        condition
+      );
+      return;
+    }
+
+    return subscribe(authState, type, condition, handleMessage);
+  }, [authStateContext, condition, handleMessage, subscribe, type]);
+
+  return { lastMessage, messages };
+}

src/main.tsx

@@ -3,6 +3,7 @@ import { createRoot } from "react-dom/client";
 import App from "./App.tsx";
 import "./index.css";
 import AuthStateProvider from "./contexts/auth-state/AuthStateProvider.tsx";
+import EventSubProvider from "./contexts/event-sub/EventSubProvider.tsx";
 
 const rootElement = document.querySelector("#root");
 
@@ -13,7 +14,9 @@ if (!(rootElement instanceof HTMLDivElement)) {
 createRoot(rootElement).render(
   <StrictMode>
     <AuthStateProvider>
-      <App />
+      <EventSubProvider>
+        <App />
+      </EventSubProvider>
     </AuthStateProvider>
   </StrictMode>
 );

src/utils/api/event-sub/subscribe.ts

@@ -0,0 +1,65 @@
+import type { AuthState } from "../../../contexts/auth-state/AuthStateContext";
+
+interface SubscriptionsResponse {
+  data: [
+    {
+      id: string;
+      status: "enabled";
+      type: string;
+      version: string;
+      condition: Record<string, unknown>;
+      /** RFC3339 Date Time */
+      created_at: string;
+      transport: {
+        method: "websocket";
+        session_id: string;
+      };
+      connected_at: string;
+      cost: number;
+    }
+  ];
+  total: number;
+  total_cost: number;
+  max_total_cost: number;
+}
+
+export async function subscribe(
+  authState: AuthState,
+  sessionId: string,
+  type: string,
+  version: string,
+  condition: Record<string, unknown>
+): Promise<SubscriptionsResponse> {
+  const response = await fetch(
+    "https://api.twitch.tv/helix/eventsub/subscriptions",
+    {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${authState.token.value}`,
+        "Client-Id": authState.client.id,
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        type,
+        version,
+        condition,
+        transport: {
+          method: "websocket",
+          session_id: sessionId,
+        },
+      }),
+    }
+  );
+
+  if (!response.ok) {
+    throw new Error(
+      `subscriptions: Bad HTTP response ${response.status.toString()} ${
+        response.statusText
+      }`
+    );
+  }
+
+  const result = (await response.json()) as SubscriptionsResponse;
+
+  return result;
+}

src/utils/api/event-sub/unsubscribe.ts

@@ -0,0 +1,25 @@
+import type { AuthState } from "../../../contexts/auth-state/AuthStateContext";
+
+export async function unsubscribe(
+  authState: AuthState,
+  subscriptionId: string
+): Promise<void> {
+  const url = new URL("https://api.twitch.tv/helix/eventsub/subscriptions");
+  url.searchParams.set("id", subscriptionId);
+
+  const response = await fetch(url, {
+    method: "DELETE",
+    headers: {
+      Authorization: `Bearer ${authState.token.value}`,
+      "Client-Id": authState.client.id,
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error(
+      `subscriptions: Bad HTTP response ${response.status.toString()} ${
+        response.statusText
+      }`
+    );
+  }
+}