app models: move supabase client instantiation to request handler

Per https://github.com/orgs/vercel/discussions/6994, Vercel <> Supabase
connection has broken this somehow. Testing tentative fix

app/models/report.server.ts

@@ -1,5 +1,6 @@
-import { db } from "~/db.server";
+import { AuthSession } from "~/models/auth";
 import type { Database } from "~/models/database.types";
+import { getSupabase } from "~/supabase";
 
 type ReportTable = Database["public"]["Tables"]["reports"];
 
@@ -9,8 +10,10 @@ export async function insertReport(
   gameId: string,
   reason: string,
   userId?: string,
+  accessToken?: AuthSession["accessToken"],
 ) {
-  const { data, error } = await db
+  const client = getSupabase(accessToken);
+  const { data, error } = await client
     .from<"reports", ReportTable>("reports")
     .insert<ReportTable["Insert"]>({
       created_by: userId,

app/models/room-event.server.ts

@@ -1,14 +1,19 @@
-import { db } from "~/db.server";
 import type { ActionType } from "~/engine";
+import { AuthSession } from "~/models/auth";
 import type { Database, Json } from "~/models/database.types";
+import { getSupabase } from "~/supabase";
 
 type RoomEventTable = Database["public"]["Tables"]["room_events"];
 export type DbRoomEvent = RoomEventTable["Row"];
 
 /* Reads */
 
-export async function getRoomEvents(roomId: number): Promise<DbRoomEvent[]> {
-  const { data, error } = await db
+export async function getRoomEvents(
+  roomId: number,
+  accessToken?: AuthSession["accessToken"],
+): Promise<DbRoomEvent[]> {
+  const client = getSupabase(accessToken);
+  const { data, error } = await client
     .from<"room_events", RoomEventTable>("room_events")
     .select("*")
     .order("ts", { ascending: true })
@@ -27,8 +32,10 @@ export async function createRoomEvent(
   roomId: number,
   type: ActionType,
   payload?: Json,
+  accessToken?: AuthSession["accessToken"],
 ) {
-  const { data, error } = await db
+  const client = getSupabase(accessToken);
+  const { data, error } = await client
     .from<"room_events", RoomEventTable>("room_events")
     .insert<RoomEventTable["Insert"]>({
       room_id: roomId,

app/models/room.server.ts

@@ -1,14 +1,19 @@
-import { db } from "~/db.server";
+import { AuthSession } from "~/models/auth";
 import type { Database } from "~/models/database.types";
+import { getSupabase } from "~/supabase";
 import { getRandomWord } from "~/utils";
 
 type RoomTable = Database["public"]["Tables"]["rooms"];
 type Room = RoomTable["Row"];
 
 /* Reads */
 
-export async function getRoom(roomId: number): Promise<Room | null> {
-  const { data, error } = await db
+export async function getRoom(
+  roomId: number,
+  accessToken?: AuthSession["accessToken"],
+): Promise<Room | null> {
+  const client = getSupabase(accessToken);
+  const { data, error } = await client
     .from<"rooms", RoomTable>("rooms")
     .select("*")
     .eq("id", roomId);
@@ -27,10 +32,11 @@ export async function getRoom(roomId: number): Promise<Room | null> {
 
 /* Writes */
 
-export async function createRoom(gameId: string) {
+export async function createRoom(gameId: string, accessToken?: string) {
+  const client = getSupabase(accessToken);
   const word = getRandomWord();
 
-  const { data, error } = await db
+  const { data, error } = await client
     .from<"rooms", RoomTable>("rooms")
     .insert<RoomTable["Insert"]>({ name: word, game_id: gameId })
     .select();

app/routes/game_.$gameId.play.tsx

@@ -1,16 +1,18 @@
 import type { LoaderFunctionArgs } from "@remix-run/node";
 import { redirect } from "@remix-run/node";
+import { getValidAuthSession } from "~/models/auth";
 
 import { createRoom } from "~/models/room.server";
 
-export async function loader({ params }: LoaderFunctionArgs) {
+export async function loader({ request, params }: LoaderFunctionArgs) {
   const gameId = params.gameId;
 
   if (!gameId) {
     throw new Response("game ID not found", { status: 404 });
   }
 
-  const roomName = await createRoom(gameId);
+  const authSession = await getValidAuthSession(request);
+  const roomName = await createRoom(gameId, authSession?.accessToken);
 
   throw redirect(`/room/${roomName}`);
 }

app/routes/report.tsx

@@ -62,7 +62,7 @@ export async function action({ request }: ActionFunctionArgs) {
     const roomId = parseInt(parts[0]);
     const name = parts[1];
 
-    const room = await getRoom(roomId);
+    const room = await getRoom(roomId, authSession?.accessToken);
     if (!room || room.name !== name) {
       return json(
         { success: false, message: `room "${roomNameAndId}" not found` },
@@ -71,7 +71,12 @@ export async function action({ request }: ActionFunctionArgs) {
     }
 
     const reason = formData.get("reason") as string;
-    await insertReport(room.game_id, reason, authSession?.userId);
+    await insertReport(
+      room.game_id,
+      reason,
+      authSession?.userId,
+      authSession?.accessToken,
+    );
 
     return json({
       success: true,
@@ -100,7 +105,12 @@ export async function action({ request }: ActionFunctionArgs) {
     }
 
     const reason = formData.get("reason") as string;
-    await insertReport(gameId, reason, authSession?.userId);
+    await insertReport(
+      gameId,
+      reason,
+      authSession?.userId,
+      authSession?.accessToken,
+    );
 
     return json(
       { success: true, message: `Reported game ${gameId}.` },

app/routes/room.$roomId.answer.tsx

@@ -2,6 +2,7 @@ import type { ActionFunctionArgs } from "@remix-run/node";
 import { json } from "@remix-run/node";
 
 import { ActionType } from "~/engine";
+import { getValidAuthSession } from "~/models/auth";
 import { createRoomEvent } from "~/models/room-event.server";
 import { getRoom } from "~/models/room.server";
 
@@ -39,11 +40,17 @@ export async function action({ request, params }: ActionFunctionArgs) {
     return json({ type: ActionType.Answer, payload: { i, j, userId, answer } });
   }
 
-  const room = await getRoom(roomId);
+  const authSession = await getValidAuthSession(request);
+  const room = await getRoom(roomId, authSession?.accessToken);
   if (!room) {
     throw new Response("room not found", { status: 404 });
   }
 
-  await createRoomEvent(room.id, ActionType.Answer, { i, j, userId, answer });
+  await createRoomEvent(
+    room.id,
+    ActionType.Answer,
+    { i, j, userId, answer },
+    authSession?.accessToken,
+  );
   return null;
 }

app/routes/room.$roomId.buzz.tsx

@@ -2,6 +2,7 @@ import type { ActionFunctionArgs } from "@remix-run/node";
 import { json } from "@remix-run/node";
 
 import { ActionType } from "~/engine";
+import { getValidAuthSession } from "~/models/auth";
 import { createRoomEvent } from "~/models/room-event.server";
 import { getRoom } from "~/models/room.server";
 
@@ -40,17 +41,23 @@ export async function action({ request, params }: ActionFunctionArgs) {
     return json({ type: ActionType.Buzz, payload: { i, j, userId, deltaMs } });
   }
 
-  const room = await getRoom(roomId);
+  const authSession = await getValidAuthSession(request);
+  const room = await getRoom(roomId, authSession?.accessToken);
   if (!room) {
     throw new Response("room not found", { status: 404 });
   }
 
-  await createRoomEvent(room.id, ActionType.Buzz, {
-    i,
-    j,
-    userId,
-    deltaMs,
-  });
+  await createRoomEvent(
+    room.id,
+    ActionType.Buzz,
+    {
+      i,
+      j,
+      userId,
+      deltaMs,
+    },
+    authSession?.accessToken,
+  );
 
   return null;
 }

app/routes/room.$roomId.check.tsx

@@ -2,6 +2,7 @@ import type { ActionFunctionArgs } from "@remix-run/node";
 import { json } from "@remix-run/node";
 
 import { ActionType } from "~/engine";
+import { getValidAuthSession } from "~/models/auth";
 import { createRoomEvent } from "~/models/room-event.server";
 import { getRoom } from "~/models/room.server";
 
@@ -44,17 +45,23 @@ export async function action({ request, params }: ActionFunctionArgs) {
     });
   }
 
-  const room = await getRoom(roomId);
+  const authSession = await getValidAuthSession(request);
+  const room = await getRoom(roomId, authSession?.accessToken);
   if (!room) {
     throw new Response("room not found", { status: 404 });
   }
 
-  await createRoomEvent(room.id, ActionType.Check, {
-    i,
-    j,
-    userId,
-    correct,
-  });
+  await createRoomEvent(
+    room.id,
+    ActionType.Check,
+    {
+      i,
+      j,
+      userId,
+      correct,
+    },
+    authSession?.accessToken,
+  );
 
   return null;
 }

app/routes/room.$roomId.choose-clue.tsx

@@ -2,6 +2,7 @@ import type { ActionFunctionArgs } from "@remix-run/node";
 import { json } from "@remix-run/node";
 
 import { ActionType } from "~/engine";
+import { getValidAuthSession } from "~/models/auth";
 import { createRoomEvent } from "~/models/room-event.server";
 import { getRoom } from "~/models/room.server";
 
@@ -34,16 +35,22 @@ export async function action({ request, params }: ActionFunctionArgs) {
     return json({ type: ActionType.ChooseClue, payload: { i, j, userId } });
   }
 
-  const room = await getRoom(roomId);
+  const authSession = await getValidAuthSession(request);
+  const room = await getRoom(roomId, authSession?.accessToken);
   if (!room) {
     throw new Response("room not found", { status: 404 });
   }
 
-  await createRoomEvent(room.id, ActionType.ChooseClue, {
-    i,
-    j,
-    userId,
-  });
+  await createRoomEvent(
+    room.id,
+    ActionType.ChooseClue,
+    {
+      i,
+      j,
+      userId,
+    },
+    authSession?.accessToken,
+  );
 
   return null;
 }

app/routes/room.$roomId.next-clue.tsx

@@ -2,6 +2,7 @@ import type { ActionFunctionArgs } from "@remix-run/node";
 import { json } from "@remix-run/node";
 
 import { ActionType } from "~/engine";
+import { getValidAuthSession } from "~/models/auth";
 import { createRoomEvent } from "~/models/room-event.server";
 import { getRoom } from "~/models/room.server";
 
@@ -34,16 +35,22 @@ export async function action({ request, params }: ActionFunctionArgs) {
     return json({ type: ActionType.NextClue, payload: { i, j, userId } });
   }
 
-  const room = await getRoom(roomId);
+  const authSession = await getValidAuthSession(request);
+  const room = await getRoom(roomId, authSession?.accessToken);
   if (!room) {
     throw new Response("room not found", { status: 404 });
   }
 
-  await createRoomEvent(room.id, ActionType.NextClue, {
-    i,
-    j,
-    userId,
-  });
+  await createRoomEvent(
+    room.id,
+    ActionType.NextClue,
+    {
+      i,
+      j,
+      userId,
+    },
+    authSession?.accessToken,
+  );
 
   return null;
 }

app/routes/room.$roomId.player.tsx

@@ -34,12 +34,12 @@ export async function action({ request, params }: ActionFunctionArgs) {
     return json({ type, payload: { userId, name } });
   }
 
-  const room = await getRoom(roomId);
+  const authSession = await getValidAuthSession(request);
+  const room = await getRoom(roomId, authSession?.accessToken);
   if (!room) {
     throw new Response("room not found", { status: 404 });
   }
 
-  const authSession = await getValidAuthSession(request);
   // Mark the game as started if it hasn't been already
   if (authSession && request.method === "POST") {
     const solve = await getSolve(
@@ -57,10 +57,15 @@ export async function action({ request, params }: ActionFunctionArgs) {
     }
   }
 
-  await createRoomEvent(room.id, type, {
-    userId,
-    name,
-  });
+  await createRoomEvent(
+    room.id,
+    type,
+    {
+      userId,
+      name,
+    },
+    authSession?.accessToken,
+  );
 
   return null;
 }