Refactor game search.

src/pages/games/browser/GameGrid.tsx

@@ -1,22 +1,22 @@
 import classNames from "classnames";
 import { Timestamp } from "../Timestamp.tsx";
-import type { Game } from "../services/supabase/supabase.types.ts";
+import { GameSearchEntry } from "../services/supabase/supabase.ts";
 import { btnSecondary } from "../ui/theme.ts";
 import { DownloadButton } from "./Controls.tsx";
 import { ScoreboardLink } from "./Scoreboard.tsx";
 import { useDemoScoreSpoiler } from "./hooks.ts";
 
-export const GameGrid = ({ games }: { games: Game[] | null }) => {
+export const GameGrid = ({ games }: { games: GameSearchEntry[] }) => {
   return (
     <div className="grid grid-cols-servers gap-4">
-      {games?.map((game) => (
+      {games.map((game: GameSearchEntry) => (
         <GridItem key={game.id} game={game} />
       ))}
     </div>
   );
 };
 
-const GridItem = (props: { game: Game }) => {
+const GridItem = (props: { game: GameSearchEntry }) => {
   const { game } = props;
   const { isVisible, show } = useDemoScoreSpoiler();
 

src/pages/games/browser/GameList.tsx

@@ -1,13 +1,13 @@
 import { Timestamp } from "../Timestamp.tsx";
+import { GameSearchEntry } from "../services/supabase/supabase.ts";
 import type {
-  Game,
   GamePlayer,
   GameTeam,
 } from "../services/supabase/supabase.types.ts";
 import { DownloadButton, PlayButton } from "./Controls.tsx";
 import { ScoreSpoiler } from "./ScoreSpoiler.tsx";
 
-export const GameList = ({ games }: { games: Game[] | null }) => {
+export const GameList = ({ games }: { games: GameSearchEntry[] | null }) => {
   return (
     <table className="text-left">
       <thead>
@@ -28,7 +28,7 @@ export const GameList = ({ games }: { games: Game[] | null }) => {
   );
 };
 
-const ListItem = ({ Game }: { Game: Game }) => {
+const ListItem = ({ Game }: { Game: GameSearchEntry }) => {
   return (
     <tr className="odd:bg-[#1a1a2a] hover:bg-white/10">
       <td className="py-1 px-3 text-slate-400 text-xs">

src/pages/games/browser/Scoreboard.tsx

@@ -1,7 +1,6 @@
 import classNames from "classnames";
 import { getMapshotCssUrl } from "../../../services/mapshots.ts";
 import type {
-  Game,
   GamePlayer,
   GameTeam,
 } from "../services/supabase/supabase.types.ts";
@@ -10,9 +9,10 @@ import type {
 // @ts-ignore
 // @typescript-eslint/ban-ts-comment
 import { Scoreboard as LegacyScoreboard } from "../../../servers/Scoreboard.jsx";
+import { GameSearchEntry } from "../services/supabase/supabase.ts";
 
 type ScoreboardProps = {
-  game: Game;
+  game: GameSearchEntry;
   showScores?: boolean;
   showMapName?: boolean;
 };
@@ -70,7 +70,7 @@ export const Scoreboard = ({
 };
 
 type ScoreboardLinkProps = {
-  game: Game;
+  game: GameSearchEntry;
   showScores?: boolean;
 };
 

src/pages/games/browser/context.tsx

@@ -7,14 +7,14 @@ import {
 } from "react";
 import { useIsFirstRender } from "usehooks-ts";
 import {
+  GameSearchEntry,
   searchGamesCount,
   searchGamesRows,
 } from "../services/supabase/supabase.ts";
-import type { Game } from "../services/supabase/supabase.types.ts";
 import { useGameSettings } from "./settings/context.tsx";
 
 type GameContextProps = {
-  games: Game[];
+  games: GameSearchEntry[];
   hasGames: boolean;
   count: number;
   isLoading: boolean;
@@ -29,7 +29,7 @@ const GameContext = createContext<GameContextProps>({
 
 export const GamesProvider = ({ children }: { children: ReactNode }) => {
   const { setPage, playerQuery, gameMode, map, page } = useGameSettings();
-  const [games, setGames] = useState<Game[]>([]);
+  const [games, setGames] = useState<GameSearchEntry[]>([]);
   const [count, setCount] = useState<number>(0);
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const isFirstRender = useIsFirstRender();
@@ -38,13 +38,11 @@ export const GamesProvider = ({ children }: { children: ReactNode }) => {
     async function run() {
       setIsLoading(true);
       const count = await searchGamesCount({ gameMode, map, playerQuery });
+      let games: GameSearchEntry[] = [];
 
-      let games: Game[] = [];
-
-      const settings = { gameMode, map, playerQuery, page: 1 };
       if (count > 0) {
-        const { data } = await searchGamesRows(settings);
-        games = data || [];
+        const settings = { gameMode, map, playerQuery, page: 1 };
+        games = await searchGamesRows(settings);
       }
 
       setGames(games);
@@ -64,8 +62,7 @@ export const GamesProvider = ({ children }: { children: ReactNode }) => {
     async function run() {
       setIsLoading(true);
       const settings = { playerQuery, gameMode, map, page };
-      const { data: games } = await searchGamesRows(settings);
-      setGames(games || []);
+      setGames(await searchGamesRows(settings));
       setIsLoading(false);
     }
 

src/pages/games/services/supabase/supabase.ts

@@ -3,7 +3,7 @@ import { createClient } from "@supabase/supabase-js";
 import type { Database } from "./database.types.ts";
 
 import type { GameMode } from "../../browser/settings/types.ts";
-import { Game, GameFields } from "./supabase.types.ts";
+import { Game } from "./supabase.types.ts";
 
 const supabase = createClient<Database>(
   import.meta.env.VITE_SUPABASE_URL,
@@ -60,22 +60,20 @@ export async function searchGamesCount(settings: {
   return result?.count ?? 0;
 }
 
+export type GameSearchEntry = Pick<
+  Game,
+  "id" | "timestamp" | "mode" | "map" | "teams" | "players" | "demo_sha256"
+>;
+
 export async function searchGamesRows(settings: {
   gameMode: GameMode;
   map: string;
   playerQuery: string;
   page: number;
-}) {
-  const fields: GameFields[] = [
-    "id",
-    "timestamp",
-    "mode",
-    "map",
-    "teams",
-    "players",
-    "demo_sha256",
-  ];
-  let qb = supabase.from("games").select(fields.join(", "));
+}): Promise<GameSearchEntry[]> {
+  let qb = supabase
+    .from("games")
+    .select("id,timestamp,mode,map,teams,players,demo_sha256");
 
   const { gameMode, map, playerQuery } = settings;
 
@@ -95,5 +93,8 @@ export async function searchGamesRows(settings: {
   const limit = 15;
   const from = (settings.page - 1) * limit;
   const to = from + limit - 1;
-  return qb.order("timestamp", { ascending: false }).range(from, to);
+  const { data } = await qb
+    .order("timestamp", { ascending: false })
+    .range(from, to);
+  return data || [];
 }