several

src/features/bracket/components/preview.tsx

@@ -10,17 +10,22 @@ import { useEffect, useState } from "react";
 import { bracketQueries } from "../queries";
 import { useQuery } from "@tanstack/react-query";
 import { createBracketMaps, BracketMaps } from "../utils/bracket-maps";
-import { BracketData, Match, Team } from "../types";
+import { BracketData, Match } from "../types";
 import Bracket from "./bracket";
 import "./styles.module.css";
 
+interface PreviewTeam {
+  id: string;
+  name: string;
+}
+
 export const PreviewBracket: React.FC = () => {
   const [teamCount, setTeamCount] = useState(20);
-  const { data, isLoading, error } = useQuery<BracketData>(
+  const { data, isLoading, error } = useQuery(
     bracketQueries.preview(teamCount)
   );
 
-  const [teams, setTeams] = useState<Team[]>([]);
+  const [teams, setTeams] = useState<PreviewTeam[]>([]);
 
   useEffect(() => {
     setTeams(
@@ -40,7 +45,7 @@ export const PreviewBracket: React.FC = () => {
   useEffect(() => {
     if (!data || teams.length === 0) return;
 
-    const maps = createBracketMaps(data);
+    const maps = createBracketMaps(data as BracketData);
     setBracketMaps(maps);
 
     const mapBracket = (bracket: Match[][]) => {
@@ -73,8 +78,9 @@ export const PreviewBracket: React.FC = () => {
       );
     };
 
-    setSeededWinnersBracket(mapBracket(data.winners));
-    setSeededLosersBracket(mapBracket(data.losers));
+    const bracketData = data as BracketData;
+    setSeededWinnersBracket(mapBracket(bracketData.winners));
+    setSeededLosersBracket(mapBracket(bracketData.losers));
   }, [teams, data]);
 
   if (error) return <p>Error loading bracket</p>;
@@ -82,10 +88,7 @@ export const PreviewBracket: React.FC = () => {
   return (
     <Container p={0} w="100%" style={{ userSelect: "none" }}>
       <Flex w="100%" justify="space-between" align="center" h="3rem">
-        <Text fw={600} size="lg">
-          Preview Bracket (Double Elimination)
-        </Text>
-        <Group gap="sm">
+        <Group gap="sm" mx='auto'>
           <Text size="sm" c="dimmed">
             Teams:
           </Text>

src/features/bracket/server.ts

@@ -3,6 +3,7 @@ import { createServerFn } from "@tanstack/react-start";
 import { z } from "zod";
 import { Logger } from "@/lib/logger";
 import brackets from './utils';
+import { BracketData } from "./types";
 
 const logger = new Logger("Bracket Generation")
 
@@ -13,5 +14,5 @@ export const previewBracket = createServerFn()
     logger.info('Generating bracket', teams);
     if (!Object.keys(brackets).includes(teams.toString()))
       throw Error("Bracket not available")
-      return brackets[teams];
+      return brackets[teams as keyof typeof brackets] as BracketData;
   });

src/features/bracket/types.ts

@@ -1,12 +1,16 @@
-import { Team } from "../teams/types";
+
+export interface Slot {
+  seed?: number;
+  team?: any;
+}
 
 export interface Match {
   lid: number;
   round: number;
   order: number | null;
   type: string;
-  home: Team;
-  away?: Team;
+  home: Slot;
+  away: Slot;
   reset?: boolean;
 }