diff --git a/src/pages/games/browser/GameGrid.tsx b/src/pages/games/browser/GameGrid.tsx index f3a5da9..bda2136 100644 --- a/src/pages/games/browser/GameGrid.tsx +++ b/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 (
- {games?.map((game) => ( + {games.map((game: GameSearchEntry) => ( ))}
); }; -const GridItem = (props: { game: Game }) => { +const GridItem = (props: { game: GameSearchEntry }) => { const { game } = props; const { isVisible, show } = useDemoScoreSpoiler(); diff --git a/src/pages/games/browser/GameList.tsx b/src/pages/games/browser/GameList.tsx index 7bc3d2e..8273222 100644 --- a/src/pages/games/browser/GameList.tsx +++ b/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 ( @@ -28,7 +28,7 @@ export const GameList = ({ games }: { games: Game[] | null }) => { ); }; -const ListItem = ({ Game }: { Game: Game }) => { +const ListItem = ({ Game }: { Game: GameSearchEntry }) => { return (
diff --git a/src/pages/games/browser/Scoreboard.tsx b/src/pages/games/browser/Scoreboard.tsx index 627504b..80ddd88 100644 --- a/src/pages/games/browser/Scoreboard.tsx +++ b/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; }; diff --git a/src/pages/games/browser/context.tsx b/src/pages/games/browser/context.tsx index f15df22..aeed87b 100644 --- a/src/pages/games/browser/context.tsx +++ b/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({ export const GamesProvider = ({ children }: { children: ReactNode }) => { const { setPage, playerQuery, gameMode, map, page } = useGameSettings(); - const [games, setGames] = useState([]); + const [games, setGames] = useState([]); const [count, setCount] = useState(0); const [isLoading, setIsLoading] = useState(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); } diff --git a/src/pages/games/services/supabase/supabase.ts b/src/pages/games/services/supabase/supabase.ts index c00e8d0..12ebeca 100644 --- a/src/pages/games/services/supabase/supabase.ts +++ b/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( 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 { + 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 || []; }