refactor: don't allow null for context

throw if the provider is missing and the context doesn't have a value

give it that kasper je ne sais quoi

src/App.tsx

@@ -1,11 +1,11 @@
 import { useContext, useMemo } from "react";
-import { AuthStateContext } from "./contexts/auth-state/AuthStateContext";
+import { AuthContext } from "./contexts/auth-state/AuthContext";
 import LoginButton from "./components/LoginButton";
 import Chat from "./components/Chat";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 export default function App() {
-  const authContext = useContext(AuthStateContext);
+  const { authState } = useContext(AuthContext);
   const queryClient = useMemo(
     () =>
       new QueryClient({
@@ -14,19 +14,13 @@ export default function App() {
     []
   );
 
-  if (!authContext) {
-    return <p>Missing AuthStateContext provider?</p>;
-  }
-
   return (
     <>
       <QueryClientProvider client={queryClient}>
         <LoginButton />
-        {authContext.authState && (
+        {authState && (
           <section>
-            <p className="bg-pink-50">
-              Hello: {authContext.authState.user.login}
-            </p>
+            <p className="bg-pink-50">Hello: {authState.user.login}</p>
             <article>
               <h2>Chat Messages:</h2>
               <Chat />

src/components/BadgeList.tsx

@@ -20,7 +20,7 @@ export default function BadgeList({
 }: Props): React.ReactElement | undefined {
   const twitchBadges = useContext(TwitchBadgeConext);
 
-  if (!twitchBadges || badges.length === 0) {
+  if (badges.length === 0) {
     return;
   }
 

src/components/LoginButton.tsx

@@ -1,22 +1,18 @@
 import { useContext } from "react";
-import { AuthStateContext } from "../contexts/auth-state/AuthStateContext";
+import { AuthContext } from "../contexts/auth-state/AuthContext";
 
 export default function LoginButton(): React.ReactElement {
-  const context = useContext(AuthStateContext);
+  const { authState, login, signOut } = useContext(AuthContext);
 
-  if (!context) {
-    throw new Error("LoginButton: Missing AuthStateContext");
-  }
-
-  if (context.authState) {
+  if (authState) {
     return (
-      <button type="button" onClick={context.signOut}>
+      <button type="button" onClick={signOut}>
         Sign out
       </button>
     );
   } else {
     return (
-      <button type="button" onClick={context.login}>
+      <button type="button" onClick={login}>
         Login
       </button>
     );

src/components/MentionSegment.tsx

@@ -1,5 +1,5 @@
 import { useContext } from "react";
-import { AuthStateContext } from "../contexts/auth-state/AuthStateContext";
+import { AuthContext } from "../contexts/auth-state/AuthContext";
 
 interface MentionProps {
   text: string;
@@ -9,12 +9,12 @@ export default function MentionSegment({
   text,
 }: MentionProps): React.ReactElement {
   const mentioned = text.replace("@", "").toLocaleLowerCase();
-  const authStateContext = useContext(AuthStateContext);
+  const { authState } = useContext(AuthContext);
 
   return (
     <span
       className={
-        mentioned === authStateContext?.authState?.user.login
+        mentioned === authState?.user.login
           ? "font-bold p-1 rounded-sm bg-slate-600"
           : "p-1 rounded-sm bg-slate-700"
       }

src/contexts/auth-state/AuthStateContext.ts → src/contexts/auth-state/AuthContext.ts

@@ -27,4 +27,10 @@ interface Value {
   signOut: () => void;
 }
 
-export const AuthStateContext = createContext<Value | null>(null);
+export const AuthContext = createContext<Value>(
+  new Proxy({} as Value, {
+    get() {
+      throw new Error("AuthContext must be provided");
+    },
+  })
+);

src/contexts/auth-state/AuthStateProvider.tsx → src/contexts/auth-state/AuthProvider.tsx

@@ -3,11 +3,11 @@ import { useLocalStorage } from "../../hooks/useLocalStorage";
 import { validateToken } from "../../utils/validateToken";
 import type { OAuthMessage } from "../../callback";
 import { revokeToken } from "../../utils/revokeToken";
-import { type AuthState, AuthStateContext } from "./AuthStateContext";
+import { type AuthState, AuthContext } from "./AuthContext";
 
 const OAUTH2_URL = "https://id.twitch.tv/oauth2/authorize";
 
-export default function AuthStateProvider({
+export default function AuthProvider({
   children,
 }: {
   children: React.ReactNode;
@@ -101,9 +101,5 @@ export default function AuthStateProvider({
 
   const value = { login, signOut, authState };
 
-  return (
-    <AuthStateContext.Provider value={value}>
-      {children}
-    </AuthStateContext.Provider>
-  );
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
 }

src/contexts/badges/TwitchBadgeContext.ts

@@ -1,9 +1,10 @@
 import { createContext } from "react";
 import type { Badge, BadgeSet } from "../../utils/api/getBadges";
 
-export type TwitchBadges = Map<
-  `${BadgeSet["set_id"]}/${Badge["id"]}`,
-  Omit<Badge, "id">
->;
+export type BadgeKey = `${BadgeSet["set_id"]}/${Badge["id"]}`;
+export type BadgeValue = Omit<Badge, "id">;
+export type TwitchBadges = Map<BadgeKey, BadgeValue>;
 
-export const TwitchBadgeConext = createContext<TwitchBadges | null>(null);
+export const TwitchBadgeConext = createContext<TwitchBadges>(
+  new Map<BadgeKey, BadgeValue>()
+);

src/contexts/badges/TwitchBadgeProvider.tsx

@@ -1,6 +1,11 @@
 import { useContext, useEffect, useState } from "react";
-import { TwitchBadgeConext, type TwitchBadges } from "./TwitchBadgeContext";
-import { AuthStateContext } from "../auth-state/AuthStateContext";
+import {
+  TwitchBadgeConext,
+  type BadgeKey,
+  type BadgeValue,
+  type TwitchBadges,
+} from "./TwitchBadgeContext";
+import { AuthContext } from "../auth-state/AuthContext";
 import { getBadges } from "../../utils/api/getBadges";
 
 interface Props {
@@ -10,21 +15,19 @@ interface Props {
 export default function TwitchBadgeProvider({
   children,
 }: Props): React.ReactElement {
-  const [badges, setBadges] = useState<TwitchBadges | null>(null);
-  const authStateContext = useContext(AuthStateContext);
+  const [badges, setBadges] = useState<TwitchBadges>(
+    () => new Map<BadgeKey, BadgeValue>()
+  );
+  const { authState } = useContext(AuthContext);
 
   useEffect(() => {
-    if (!authStateContext?.authState) {
+    let keep = true;
+
+    if (!authState) {
       return;
     }
 
-    let keep = true;
-
-    getBadges(
-      authStateContext.authState.token.value,
-      authStateContext.authState.client.id,
-      authStateContext.authState.user.id
-    )
+    getBadges(authState.token.value, authState.client.id, authState.user.id)
       .then((sets) => {
         const tmp = sets.flatMap(({ set_id, versions }) =>
           versions.map(({ id, ...rest }) => [`${set_id}/${id}`, rest] as const)
@@ -41,7 +44,7 @@ export default function TwitchBadgeProvider({
     return () => {
       keep = false;
     };
-  }, [authStateContext]);
+  }, [authState]);
 
   return (
     <TwitchBadgeConext.Provider value={badges}>

src/contexts/event-sub/EventSubContext.ts

@@ -5,4 +5,10 @@ interface Value {
   subscribe: typeof EventSub.instance.subscribe;
 }
 
-export const EventSubContext = createContext<Value | null>(null);
+export const EventSubContext = createContext<Value>(
+  new Proxy({} as Value, {
+    get() {
+      throw new Error("EventSubContext must be provided");
+    },
+  })
+);

src/hooks/useEventSub.ts

@@ -1,25 +1,17 @@
 import { useCallback, useContext, useEffect, useState } from "react";
 import { EventSubContext } from "../contexts/event-sub/EventSubContext";
-import { AuthStateContext } from "../contexts/auth-state/AuthStateContext";
+import { AuthContext } from "../contexts/auth-state/AuthContext";
 
 export function useEventSub(
   type: string | string[],
   condition: Record<string, unknown>,
   bufferSize = 50
 ) {
-  const authStateContext = useContext(AuthStateContext);
+  const { authState } = useContext(AuthContext);
   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(
@@ -31,8 +23,6 @@ export function useEventSub(
   );
 
   useEffect(() => {
-    const { authState } = authStateContext;
-
     if (!authState) {
       return;
     }
@@ -46,7 +36,7 @@ export function useEventSub(
     }
 
     return subscribe(authState, type, condition, handleMessage);
-  }, [authStateContext, condition, handleMessage, subscribe, type]);
+  }, [authState, condition, handleMessage, subscribe, type]);
 
   return { lastMessage, messages };
 }

src/hooks/useGetProfile.ts

@@ -1,11 +1,10 @@
 import { useContext } from "react";
-import { AuthStateContext } from "../contexts/auth-state/AuthStateContext";
+import { AuthContext } from "../contexts/auth-state/AuthContext";
 import { getUser } from "../utils/api/getUser";
 import { useQuery } from "@tanstack/react-query";
 
 export function useGetProfile(login: string) {
-  const authStateContext = useContext(AuthStateContext);
-  const authState = authStateContext?.authState;
+  const { authState } = useContext(AuthContext);
 
   return useQuery({
     enabled: !!authState,

src/hooks/useTwitchChat.ts

@@ -1,5 +1,5 @@
 import { useCallback, useContext, useEffect, useState } from "react";
-import { AuthStateContext } from "../contexts/auth-state/AuthStateContext";
+import { AuthContext } from "../contexts/auth-state/AuthContext";
 import type { ChatMessageEvent } from "../utils/event-sub/events/chat/message";
 import { EventSubContext } from "../contexts/event-sub/EventSubContext";
 import type { ChatEventCommon } from "../utils/event-sub/events/chat/_common";
@@ -31,18 +31,10 @@ const subscriptions = [
 ];
 
 export function useTwitchChat(bufferSize = 50, channelId?: string) {
-  const authStateContext = useContext(AuthStateContext);
+  const { authState } = useContext(AuthContext);
   const eventSubContext = useContext(EventSubContext);
   const [messages, setMessages] = useState<ChatMessage[]>([]);
 
-  if (!authStateContext) {
-    throw new Error("useTwitchChat: Needs an AuthStateContext Provider!");
-  }
-
-  if (!eventSubContext) {
-    throw new Error("useTwitchChat: Needs a EventSubContext Provider!");
-  }
-
   const { subscribe } = eventSubContext;
 
   const handleMessage = useCallback(
@@ -82,8 +74,6 @@ export function useTwitchChat(bufferSize = 50, channelId?: string) {
   );
 
   useEffect(() => {
-    const { authState } = authStateContext;
-
     if (!authState) {
       return;
     }
@@ -94,7 +84,7 @@ export function useTwitchChat(bufferSize = 50, channelId?: string) {
     };
 
     return subscribe(authState, subscriptions, condition, handleMessage);
-  }, [authStateContext, channelId, handleMessage, subscribe]);
+  }, [authState, channelId, handleMessage, subscribe]);
 
   return messages;
 }

src/main.tsx

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

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

@@ -1,4 +1,4 @@
-import type { AuthState } from "../../../contexts/auth-state/AuthStateContext";
+import type { AuthState } from "../../../contexts/auth-state/AuthContext";
 
 interface SubscriptionsResponse {
   data: [

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

@@ -1,4 +1,4 @@
-import type { AuthState } from "../../../contexts/auth-state/AuthStateContext";
+import type { AuthState } from "../../../contexts/auth-state/AuthContext";
 
 export async function unsubscribe(
   authState: AuthState,

src/utils/event-sub/EventSub.ts

@@ -1,4 +1,4 @@
-import type { AuthState } from "../../contexts/auth-state/AuthStateContext";
+import type { AuthState } from "../../contexts/auth-state/AuthContext";
 import { subscribe } from "../api/event-sub/subscribe";
 import type {
   EventSubMessage,