refactor: use useQuery instead of context

src/components/BadgeList.tsx

@@ -1,5 +1,4 @@
-import { useContext } from "react";
-import { TwitchBadgeConext } from "../contexts/badges/TwitchBadgeContext";
+import { useBadges } from "../hooks/useBadges";
 
 interface Props {
   // FIXME: Derive this from a single point of truth
@@ -18,7 +17,7 @@ function makeKey(setId: string, id: string): `${string}/${string}` {
 export default function BadgeList({
   badges,
 }: Props): React.ReactElement | undefined {
-  const twitchBadges = useContext(TwitchBadgeConext);
+  const twitchBadges = useBadges();
 
   if (badges.length === 0) {
     return;
@@ -29,7 +28,7 @@ export default function BadgeList({
       {badges.map(({ set_id, id }) => (
         <img
           key={makeKey(set_id, id)}
-          src={twitchBadges.get(makeKey(set_id, id))?.image_url_1x}
+          src={twitchBadges?.get(makeKey(set_id, id))?.image_url_1x}
         />
       ))}
     </div>

src/components/Chat.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useRef } from "react";
-import TwitchBadgeProvider from "../contexts/badges/TwitchBadgeProvider";
 import { useTwitchChat } from "../hooks/useTwitchChat";
 import Message from "./Message";
 
@@ -17,13 +16,11 @@ export default function Chat(): React.ReactElement {
 
   return (
     <section ref={ref} className="h-[600px] justify-end overflow-y-auto">
-      <TwitchBadgeProvider>
-        <article className="flex flex-col gap-1">
-          {messages.map((message) => (
-            <Message key={message.message_id} message={message} />
-          ))}
-        </article>
-      </TwitchBadgeProvider>
+      <article className="flex flex-col gap-1">
+        {messages.map((message) => (
+          <Message key={message.message_id} message={message} />
+        ))}
+      </article>
     </section>
   );
 }

src/components/Message.tsx

@@ -55,8 +55,8 @@ export default function Message({ message }: Props): React.ReactElement {
           style={{ backgroundColor: colorToRgba(message.color) }}
         >
           <BadgeList badges={message.badges} />
-            <UserName message={message} />
-            <Pronoun login={message.chatter_user_login} />
+          <UserName message={message} />
+          <Pronoun login={message.chatter_user_login} />
           <ElapsedTime startingDate={message.timestamp} />
         </header>
         {message.reply && <Reply message={message.reply} />}

src/hooks/useBadges.ts

@@ -0,0 +1,30 @@
+import { useQuery } from "@tanstack/react-query";
+import { getBadges, type Badge, type BadgeSet } from "../utils/api/getBadges";
+import { useContext } from "react";
+import { AuthContext } from "../contexts/auth-state/AuthContext";
+
+type BadgeKey = `${BadgeSet["set_id"]}/${Badge["id"]}`;
+type BadgeValue = Omit<Badge, "id">;
+type TwitchBadges = Map<BadgeKey, BadgeValue>;
+
+function makeBadgeMap(data: BadgeSet[]): TwitchBadges {
+  return new Map(
+    data.flatMap(({ set_id, versions }) =>
+      versions.map(({ id, ...rest }) => [`${set_id}/${id}`, rest] as const)
+    )
+  );
+}
+
+export function useBadges(userId?: string) {
+  const { authState } = useContext(AuthContext);
+
+  const { data } = useQuery({
+    enabled: !!authState,
+    queryKey: ["twitchBadges", userId],
+    // @ts-expect-error authState is not undefinend when query is exectued
+    queryFn: () => getBadges(authState, userId ?? authState?.user.id),
+    select: makeBadgeMap,
+  });
+
+  return data;
+}

src/utils/api/getBadges.ts

@@ -1,3 +1,5 @@
+import type { AuthState } from "../../contexts/auth-state/AuthContext";
+
 const CHANNEL_BADGES_URL = "https://api.twitch.tv/helix/chat/badges";
 const GLOBAL_BADGES_URL = "https://api.twitch.tv/helix/chat/badges/global";
 
@@ -45,16 +47,19 @@ async function getBadgeSet(
 }
 
 export async function getBadges(
-  accessToken: string,
-  clientId: string,
+  authState: AuthState,
   userId: string
 ): Promise<BadgeSet[]> {
   const url = new URL(CHANNEL_BADGES_URL);
   url.searchParams.set("broadcaster_id", userId);
 
   const [channelBadges, globalBadges] = await Promise.all([
-    await getBadgeSet(accessToken, clientId, url),
-    await getBadgeSet(accessToken, clientId, GLOBAL_BADGES_URL),
+    await getBadgeSet(authState.token.value, authState.client.id, url),
+    await getBadgeSet(
+      authState.token.value,
+      authState.client.id,
+      GLOBAL_BADGES_URL
+    ),
   ]);
 
   return [...globalBadges.data, ...channelBadges.data];