predictions

src/app/routes/_authed/tournaments/$id.bracket.tsx

@@ -4,11 +4,12 @@ import {
   useTournament,
 } from "@/features/tournaments/queries";
 import { ensureServerQueryData } from "@/lib/tanstack-query/utils/ensure";
-import { Box, Container, Flex, Skeleton, Stack } from "@mantine/core";
+import { Container } from "@mantine/core";
 import { useMemo } from "react";
 import { BracketData } from "@/features/bracket/types";
-import { Match } from "@/features/matches/types";
+import { groupMatchesIntoBracket } from "@/features/bracket/utils/group";
 import BracketView from "@/features/bracket/components/bracket-view";
+import { BracketPending } from "@/features/bracket/components/bracket-pending";
 
 export const Route = createFileRoute("/_authed/tournaments/$id/bracket")({
   beforeLoad: async ({ context, params }) => {
@@ -34,84 +35,14 @@ export const Route = createFileRoute("/_authed/tournaments/$id/bracket")({
   pendingComponent: BracketPending,
 });
 
-function BracketPending() {
-  const columns = [4, 2, 1];
-
-  return (
-    <Container size="md" px={0}>
-      <Box
-        p={0}
-        style={{
-          overflow: "hidden",
-          backgroundImage: `radial-gradient(circle, var(--mantine-color-default-border) 1px, transparent 1px)`,
-          backgroundSize: "16px 16px",
-          backgroundPosition: "0 0, 8px 8px",
-          minHeight: "70dvh",
-        }}
-      >
-        <Skeleton height={18} width={140} radius="sm" m={16} />
-        <Flex gap="xl" px={16} align="stretch">
-          {columns.map((count, columnIndex) => (
-            <Stack
-              key={`bracket-pending-round-${columnIndex}`}
-              gap="xl"
-              justify="space-around"
-              style={{ opacity: 1 - columnIndex * 0.25 }}
-            >
-              {Array.from({ length: count }).map((_, matchIndex) => (
-                <Skeleton
-                  key={`bracket-pending-match-${columnIndex}-${matchIndex}`}
-                  height={84}
-                  width={220}
-                  radius="md"
-                />
-              ))}
-            </Stack>
-          ))}
-        </Flex>
-      </Box>
-    </Container>
-  );
-}
-
 function RouteComponent() {
   const { id } = Route.useParams();
   const { data: tournament } = useTournament(id);
 
-  const bracket: BracketData = useMemo(() => {
-    if (!tournament.matches || tournament.matches.length === 0) {
-      return { winners: [], losers: [] };
-    }
-
-    const winnersMap = new Map<number, Match[]>();
-    const losersMap = new Map<number, Match[]>();
-
-    tournament.matches
-      .filter((match) => match.round !== -1)
-      .sort((a, b) => a.lid - b.lid)
-      .forEach((match) => {
-        if (!match.is_losers_bracket) {
-          if (!winnersMap.has(match.round)) {
-            winnersMap.set(match.round, []);
-          }
-          winnersMap.get(match.round)!.push(match);
-        } else {
-          if (!losersMap.has(match.round)) {
-            losersMap.set(match.round, []);
-          }
-          losersMap.get(match.round)!.push(match);
-        }
-      });
-
-    const winners = Array.from(winnersMap.entries())
-      .sort(([a], [b]) => a - b)
-      .map(([, matches]) => matches);
-
-    const losers = Array.from(losersMap.entries())
-      .sort(([a], [b]) => a - b)
-      .map(([, matches]) => matches);
-    return { winners, losers };
-  }, [tournament.matches]);
+  const bracket: BracketData = useMemo(
+    () => groupMatchesIntoBracket(tournament.matches),
+    [tournament.matches]
+  );
 
   return (
     <Container size="md" px={0}>