groups init

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

@@ -4,7 +4,6 @@ import {
   useTournament,
 } from "@/features/tournaments/queries";
 import { ensureServerQueryData } from "@/lib/tanstack-query/utils/ensure";
-import SeedTournament from "@/features/tournaments/components/seed-tournament";
 import { Container } from "@mantine/core";
 import { useMemo } from "react";
 import { BracketData } from "@/features/bracket/types";
@@ -18,7 +17,7 @@ export const Route = createFileRoute("/_authed/tournaments/$id/bracket")({
       queryClient,
       tournamentQueries.details(params.id)
     );
-    if (!tournament) throw redirect({ to: "/admin/tournaments" });
+    if (!tournament) throw redirect({ to: "/tournaments" });
     return {
       tournament,
     };
@@ -26,10 +25,9 @@ export const Route = createFileRoute("/_authed/tournaments/$id/bracket")({
   loader: ({ context }) => ({
     fullWidth: true,
     withPadding: false,
-    showSpotifyPanel: true,
     header: {
       withBackButton: true,
-      title: `${context.tournament.name}`,
+      title: `${context.tournament.name} - Bracket`,
     },
   }),
   component: RouteComponent,
@@ -48,6 +46,7 @@ function RouteComponent() {
     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) {

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

@@ -0,0 +1,45 @@
+import { createFileRoute, redirect } from "@tanstack/react-router";
+import {
+  tournamentQueries,
+  useTournament,
+} from "@/features/tournaments/queries";
+import { ensureServerQueryData } from "@/lib/tanstack-query/utils/ensure";
+import GroupStageView from "@/features/tournaments/components/group-stage-view";
+import { Container } from "@mantine/core";
+
+export const Route = createFileRoute("/_authed/tournaments/$id/groups")({
+  beforeLoad: async ({ context, params }) => {
+    const { queryClient } = context;
+    const tournament = await ensureServerQueryData(
+      queryClient,
+      tournamentQueries.details(params.id)
+    );
+    if (!tournament) throw redirect({ to: "/tournaments" });
+    return {
+      tournament,
+    };
+  },
+  loader: ({ context }) => ({
+    fullWidth: true,
+    withPadding: false,
+    header: {
+      withBackButton: true,
+      title: `${context.tournament.name} - Groups`,
+    },
+  }),
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  const { id } = Route.useParams();
+  const { data: tournament } = useTournament(id);
+
+  return (
+    <Container size="md" px={0}>
+      <GroupStageView
+        groups={tournament.groups || []}
+        matches={tournament.matches || []}
+      />
+    </Container>
+  );
+}