refactor bracket feature

src/app/routes/_authed/admin/preview.tsx

@@ -1,4 +1,4 @@
-import { PreviewBracketPage } from '@/features/bracket/components/bracket-page'
+import { PreviewBracket } from '@/features/bracket/components/preview'
 import { createFileRoute } from '@tanstack/react-router'
 
 export const Route = createFileRoute('/_authed/admin/preview')({
@@ -6,5 +6,5 @@ export const Route = createFileRoute('/_authed/admin/preview')({
 })
 
 function RouteComponent() {
-  return <PreviewBracketPage />
+  return <PreviewBracket />
 }

src/features/bracket/components/bracket-page.tsx

@@ -1,172 +0,0 @@
-import { Text, Container, Flex, ScrollArea, NumberInput, Group } from "@mantine/core";
-import { SeedList } from "./seed-list";
-import BracketView from "./bracket-view";
-import { useEffect, useState } from "react";
-import { bracketQueries } from "../queries";
-import { useQuery } from "@tanstack/react-query";
-import './styles.module.css';
-import useAppShellHeight from "@/hooks/use-appshell-height";
-import { createBracketMaps, BracketMaps } from "../utils/bracket-maps";
-
-interface Team {
-  id: string;
-  name: string;
-}
-
-interface Match {
-  lid: number;
-  round: number;
-  order: number | null;
-  type: string;
-  home: any;
-  away?: any;
-  reset?: boolean;
-}
-
-interface BracketData {
-  winners: Match[][];
-  losers: Match[][];
-}
-
-
-export const PreviewBracketPage: React.FC = () => {
-  const height = useAppShellHeight();
-
-  const [teamCount, setTeamCount] = useState(20);
-  const { data, isLoading, error } = useQuery<BracketData>(bracketQueries.preview(teamCount));
-
-  // Create teams with proper structure
-  const [teams, setTeams] = useState<Team[]>([]);
-  
-  // Update teams when teamCount changes
-  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;
-
-    // Create bracket maps for easy lookups
-    const maps = createBracketMaps(data);
-    setBracketMaps(maps);
-
-    // Map brackets with team names
-    const mapBracket = (bracket: Match[][]) => {
-      return bracket.map(round => 
-        round.map(match => {
-          const mappedMatch = { ...match };
-
-          // Map home slot if it has a seed
-          if (match.home?.seed && match.home.seed > 0) {
-            const teamIndex = match.home.seed - 1;
-            if (teams[teamIndex]) {
-              mappedMatch.home = {
-                ...match.home,
-                team: teams[teamIndex]
-              };
-            }
-          }
-
-          // Map away slot if it has a seed
-          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]);
-
-  const handleSeedChange = (teamIndex: number, newSeedIndex: number) => {
-    const newTeams = [...teams];
-    const movingTeam = newTeams[teamIndex];
-    
-    // Remove the team from its current position
-    newTeams.splice(teamIndex, 1);
-    
-    // Insert it at the new position
-    newTeams.splice(newSeedIndex, 0, movingTeam);
-    
-    setTeams(newTeams);
-  };
-
-  if (isLoading) return <p>Loading...</p>;
-  if (error) return <p>Error loading bracket</p>;
-  if (!data || !bracketMaps || teams.length === 0) return <p>No data available</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}>
-        <div style={{ minWidth: 250, display: 'none' }}>
-          <Text fw={600} pb={16}>
-            Seed Teams
-          </Text>
-          <SeedList teams={teams} onSeedChange={handleSeedChange} />
-        </div>
-        <ScrollArea
-          h={`calc(${height} - 4rem)`}
-          className="bracket-container"
-          style={{
-            backgroundImage: `radial-gradient(circle, var(--mantine-color-default-border) 1px, transparent 1px)`,
-            backgroundSize: '16px 16px',
-            backgroundPosition: '0 0, 8px 8px'
-          }}
-        >
-          <div>
-            <Text fw={600} size="md" m={16}>
-              Winners Bracket
-            </Text>
-            <BracketView 
-              bracket={seededWinnersBracket} 
-              bracketMaps={bracketMaps}
-            />
-          </div>
-          <div>
-            <Text fw={600} size="md" m={16}>
-              Losers Bracket
-            </Text>
-            <BracketView 
-              bracket={seededLosersBracket} 
-              bracketMaps={bracketMaps}
-            />
-          </div>
-        </ScrollArea>
-      </Flex>
-    </Container>
-  );
-};

src/features/bracket/components/bracket-view.tsx

@@ -1,7 +1,7 @@
-import { ActionIcon, Card, Flex, Text } from '@mantine/core';
+import { ActionIcon, Card, Flex, Text } from "@mantine/core";
-import { PlayIcon } from '@phosphor-icons/react';
+import { PlayIcon } from "@phosphor-icons/react";
-import React from 'react';
+import React from "react";
-import { BracketMaps } from '../utils/bracket-maps';
+import { BracketMaps } from "../utils/bracket-maps";
 
 interface Match {
   lid: number;
@@ -19,42 +19,63 @@ interface BracketViewProps {
   onAnnounce?: (teamOne: any, teamTwo: any) => void;
 }
 
-const BracketView: React.FC<BracketViewProps> = ({ bracket, bracketMaps, onAnnounce }) => {
+const BracketView: React.FC<BracketViewProps> = ({
-  // Helper to check match type
+  bracket,
+  bracketMaps,
+  onAnnounce,
+}) => {
   const isMatchType = (type: string, expected: string) => {
     return type?.toLowerCase() === expected.toLowerCase();
   };
 
-  // Helper to get parent match order number using the new bracket maps
   const getParentMatchOrder = (parentLid: number): number | string => {
     const parentMatch = bracketMaps.matchByLid.get(parentLid);
-    if (parentMatch && parentMatch.order !== null && parentMatch.order !== undefined) {
+    if (
+      parentMatch &&
+      parentMatch.order !== null &&
+      parentMatch.order !== undefined
+    ) {
       return parentMatch.order;
     }
-    // If no order (like for byes), return the parentLid with a different prefix
     return `Match ${parentLid}`;
   };
 
   return (
-    <Flex direction='row' gap={24} justify='left' pos='relative' p='xl'>
+    <Flex direction="row" gap={24} justify="left" pos="relative" p="xl">
-        {bracket.map((round, roundIndex) => (
+      {bracket.map((round, roundIndex) => (
-        <Flex direction='column' key={roundIndex} gap={24} justify='space-around'>
+        <Flex
+          direction="column"
+          key={roundIndex}
+          gap={24}
+          justify="space-around"
+        >
           {round.map((match, matchIndex) => {
             if (!match) return null;
 
-            // Handle bye matches (no away slot) - check both 'TBye' and 'bye'
+            if (
-            if (isMatchType(match.type, 'bye') || isMatchType(match.type, 'tbye')) {
+              isMatchType(match.type, "bye") ||
-              return (
+              isMatchType(match.type, "tbye")
-                <Flex key={matchIndex}>
+            ) {
-                </Flex>
+              return <Flex key={matchIndex}></Flex>;
-              );
             }
 
-            // Regular matches with both home and away
             return (
-              <Flex direction='row' key={matchIndex} align='center' justify='end' gap={8}>
+              <Flex
-                <Text c='dimmed' fw='bolder'>{match.order}</Text>
+                direction="row"
-                <Card withBorder pos='relative' w={200} style={{ overflow: 'visible' }}>
+                key={matchIndex}
+                align="center"
+                justify="end"
+                gap={8}
+              >
+                <Text c="dimmed" fw="bolder">
+                  {match.order}
+                </Text>
+                <Card
+                  withBorder
+                  pos="relative"
+                  w={200}
+                  style={{ overflow: "visible" }}
+                >
                   <Card.Section withBorder p={0}>
                     <Flex align="stretch">
                       {match.home?.seed && (
@@ -64,32 +85,40 @@ const BracketView: React.FC<BracketViewProps> = ({ bracket, bracketMaps, onAnnou
                           py="4"
                           bg="var(--mantine-color-default-hover)"
                           style={{
-                            width: '32px',
+                            width: "32px",
-                            textAlign: 'center',
+                            textAlign: "center",
-                            color: 'var(--mantine-color-text)',
+                            color: "var(--mantine-color-text)",
-                            display: 'flex',
+                            display: "flex",
-                            alignItems: 'center',
+                            alignItems: "center",
-                            justifyContent: 'center',
+                            justifyContent: "center",
-                            borderTopLeftRadius: 'var(--mantine-radius-default)',
+                            borderTopLeftRadius:
-                            borderBottomLeftRadius: 'var(--mantine-radius-default)'
+                              "var(--mantine-radius-default)",
+                            borderBottomLeftRadius:
+                              "var(--mantine-radius-default)",
                           }}
                         >
                           {match.home.seed}
                         </Text>
                       )}
-                      <div style={{ flex: 1, padding: '4px 8px' }}>
+                      <div style={{ flex: 1, padding: "4px 8px" }}>
                         {match.home?.seed ? (
                           match.home.team ? (
-                            <Text size='xs'>{match.home.team.name}</Text>
+                            <Text size="xs">{match.home.team.name}</Text>
                           ) : (
-                            <Text size='xs' c='dimmed'>Team {match.home.seed}</Text>
+                            <Text size="xs" c="dimmed">
+                              Team {match.home.seed}
+                            </Text>
                           )
-                        ) : (match.home?.parent_lid !== null && match.home?.parent_lid !== undefined) ? (
+                        ) : match.home?.parent_lid !== null &&
-                          <Text c='dimmed' size='xs'>
+                          match.home?.parent_lid !== undefined ? (
-                            {match.home.loser ? 'Loser' : 'Winner'} of Match {getParentMatchOrder(match.home.parent_lid)}
+                          <Text c="dimmed" size="xs">
+                            {match.home.loser ? "Loser" : "Winner"} of Match{" "}
+                            {getParentMatchOrder(match.home.parent_lid)}
                           </Text>
                         ) : (
-                          <Text c='dimmed' size='xs' fs='italic'>TBD</Text>
+                          <Text c="dimmed" size="xs" fs="italic">
+                            TBD
+                          </Text>
                         )}
                       </div>
                     </Flex>
@@ -103,61 +132,69 @@ const BracketView: React.FC<BracketViewProps> = ({ bracket, bracketMaps, onAnnou
                           py="4"
                           bg="var(--mantine-color-default-hover)"
                           style={{
-                            width: '32px',
+                            width: "32px",
-                            textAlign: 'center',
+                            textAlign: "center",
-                            color: 'var(--mantine-color-text)',
+                            color: "var(--mantine-color-text)",
-                            display: 'flex',
+                            display: "flex",
-                            alignItems: 'center',
+                            alignItems: "center",
-                            justifyContent: 'center',
+                            justifyContent: "center",
-                            borderTopLeftRadius: 'var(--mantine-radius-default)',
+                            borderTopLeftRadius:
-                            borderBottomLeftRadius: 'var(--mantine-radius-default)'
+                              "var(--mantine-radius-default)",
+                            borderBottomLeftRadius:
+                              "var(--mantine-radius-default)",
                           }}
                         >
                           {match.away.seed}
                         </Text>
                       )}
-                      <div style={{ flex: 1, padding: '4px 8px' }}>
+                      <div style={{ flex: 1, padding: "4px 8px" }}>
                         {match.away?.seed ? (
                           match.away.team ? (
-                            <Text size='xs'>{match.away.team.name}</Text>
+                            <Text size="xs">{match.away.team.name}</Text>
                           ) : (
-                            <Text size='xs' c='dimmed'>Team {match.away.seed}</Text>
+                            <Text size="xs" c="dimmed">
+                              Team {match.away.seed}
+                            </Text>
                           )
-                        ) : (match.away?.parent_lid !== null && match.away?.parent_lid !== undefined) ? (
+                        ) : match.away?.parent_lid !== null &&
-                          <Text c='dimmed' size='xs'>
+                          match.away?.parent_lid !== undefined ? (
-                            {match.away.loser ? 'Loser' : 'Winner'} of Match {getParentMatchOrder(match.away.parent_lid)}
+                          <Text c="dimmed" size="xs">
+                            {match.away.loser ? "Loser" : "Winner"} of Match{" "}
+                            {getParentMatchOrder(match.away.parent_lid)}
                           </Text>
                         ) : match.away ? (
-                          <Text c='dimmed' size='xs' fs='italic'>TBD</Text>
+                          <Text c="dimmed" size="xs" fs="italic">
+                            TBD
+                          </Text>
                         ) : null}
                       </div>
                     </Flex>
                   </Card.Section>
                   {match.reset && (
                     <Text
-                      pos='absolute' 
+                      pos="absolute"
                       top={-8}
                       left={8}
-                      size='xs' 
+                      size="xs"
-                      c='orange' 
+                      c="orange"
-                      fw='bold'
+                      fw="bold"
                     >
                       IF NECESSARY
                     </Text>
                   )}
                   {onAnnounce && match.home?.team && match.away?.team && (
                     <ActionIcon
-                      pos='absolute'
+                      pos="absolute"
-                      variant='filled'
+                      variant="filled"
-                      color='green'
+                      color="green"
                       top={-20}
                       right={-12}
                       onClick={() => {
                         onAnnounce(match.home.team, match.away.team);
                       }}
-                      bd='none'
+                      bd="none"
-                      style={{ boxShadow: 'none' }}
+                      style={{ boxShadow: "none" }}
-                      size='xs'
+                      size="xs"
                     >
                       <PlayIcon size={12} />
                     </ActionIcon>

src/features/bracket/components/bracket.tsx

@@ -0,0 +1,46 @@
+import { ScrollArea, Text } from "@mantine/core";
+import BracketView from "./bracket-view";
+import { Match } from "../types";
+import useAppShellHeight from "@/hooks/use-appshell-height";
+import { BracketMaps } from "../utils/bracket-maps";
+
+interface BracketProps {
+  winners: Match[][],
+  losers?: Match[][],
+  bracketMaps: BracketMaps | null
+}
+
+const Bracket: React.FC<BracketProps> = ({ winners, losers, bracketMaps }) => {
+  const height = useAppShellHeight();
+
+  if (!bracketMaps) return <p>Data not available.</p>
+
+  return (
+    <ScrollArea
+      h={`calc(${height} - 4rem)`}
+      className="bracket-container"
+      style={{
+        backgroundImage: `radial-gradient(circle, var(--mantine-color-default-border) 1px, transparent 1px)`,
+        backgroundSize: "16px 16px",
+        backgroundPosition: "0 0, 8px 8px",
+      }}
+    >
+      <div>
+        <Text fw={600} size="md" m={16}>
+          Winners Bracket
+        </Text>
+        <BracketView bracket={winners} bracketMaps={bracketMaps} />
+      </div>
+      {
+        losers && <div>
+          <Text fw={600} size="md" m={16}>
+            Losers Bracket
+          </Text>
+          <BracketView bracket={losers} bracketMaps={bracketMaps} />
+        </div>
+      }
+    </ScrollArea>
+  );
+};
+
+export default Bracket;

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>
+  );
+};

src/features/bracket/types.ts

@@ -0,0 +1,19 @@
+export interface Team {
+  id: string;
+  name: string;
+}
+
+export interface Match {
+  lid: number;
+  round: number;
+  order: number | null;
+  type: string;
+  home: any;
+  away?: any;
+  reset?: boolean;
+}
+
+export interface BracketData {
+  winners: Match[][];
+  losers: Match[][];
+}