refactor bracket feature

2025-08-23 15:05:47 -05:00
parent 3283d1e9a0
commit d7dd723495
6 changed files with 295 additions and 246 deletions
--- a/src/features/bracket/components/preview.tsx
+++ b/src/features/bracket/components/preview.tsx
@@ -0,0 +1,119 @@
+import {
+  Text,
+  Container,
+  Flex,
+  NumberInput,
+  Group,
+  Loader,
+} from "@mantine/core";
+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 Bracket from "./bracket";
+import "./styles.module.css";
+
+export const PreviewBracket: React.FC = () => {
+  const [teamCount, setTeamCount] = useState(20);
+  const { data, isLoading, error } = useQuery<BracketData>(
+    bracketQueries.preview(teamCount)
+  );
+
+  const [teams, setTeams] = useState<Team[]>([]);
+
+  useEffect(() => {
+    setTeams(
+      Array.from({ length: teamCount }, (_, i) => ({
+        id: `team-${i + 1}`,
+        name: `Team ${i + 1}`,
+      }))
+    );
+  }, [teamCount]);
+
+  const [seededWinnersBracket, setSeededWinnersBracket] = useState<Match[][]>(
+    []
+  );
+  const [seededLosersBracket, setSeededLosersBracket] = useState<Match[][]>([]);
+  const [bracketMaps, setBracketMaps] = useState<BracketMaps | null>(null);
+
+  useEffect(() => {
+    if (!data || teams.length === 0) return;
+
+    const maps = createBracketMaps(data);
+    setBracketMaps(maps);
+
+    const mapBracket = (bracket: Match[][]) => {
+      return bracket.map((round) =>
+        round.map((match) => {
+          const mappedMatch = { ...match };
+
+          if (match.home?.seed && match.home.seed > 0) {
+            const teamIndex = match.home.seed - 1;
+            if (teams[teamIndex]) {
+              mappedMatch.home = {
+                ...match.home,
+                team: teams[teamIndex],
+              };
+            }
+          }
+
+          if (match.away?.seed && match.away.seed > 0) {
+            const teamIndex = match.away.seed - 1;
+            if (teams[teamIndex]) {
+              mappedMatch.away = {
+                ...match.away,
+                team: teams[teamIndex],
+              };
+            }
+          }
+
+          return mappedMatch;
+        })
+      );
+    };
+
+    setSeededWinnersBracket(mapBracket(data.winners));
+    setSeededLosersBracket(mapBracket(data.losers));
+  }, [teams, data]);
+
+  if (error) return <p>Error loading bracket</p>;
+
+  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">
+          <Text size="sm" c="dimmed">
+            Teams:
+          </Text>
+          <NumberInput
+            value={teamCount}
+            onChange={(value) => setTeamCount(Number(value) || 12)}
+            min={12}
+            max={20}
+            size="sm"
+            w={80}
+            allowDecimal={false}
+            clampBehavior="strict"
+          />
+        </Group>
+      </Flex>
+      <Flex w="100%" gap={24}>
+        {isLoading ? (
+          <Flex justify="center" align="center" h="20vh" w="100%">
+            <Loader size="xl" />
+          </Flex>
+        ) : (
+          <Bracket
+            winners={seededWinnersBracket}
+            losers={seededLosersBracket}
+            bracketMaps={bracketMaps}
+          />
+        )}
+      </Flex>
+    </Container>
+  );
+};