predictions

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

@@ -0,0 +1,37 @@
+import { createFileRoute, redirect } from "@tanstack/react-router";
+import { tournamentQueries, useTournament } from "@/features/tournaments/queries";
+import { ensureServerQueryData } from "@/lib/tanstack-query/utils/ensure";
+import { Container } from "@mantine/core";
+import { PredictionLeaderboard } from "@/features/predictions/components/prediction-leaderboard";
+
+export const Route = createFileRoute("/_authed/tournaments/$id/predictions")({
+  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: () => ({
+    header: {
+      withBackButton: true,
+      title: "Predictions",
+    },
+  }),
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  const { id } = Route.useParams();
+  const { data: tournament } = useTournament(id);
+
+  return (
+    <Container size="md" px={0}>
+      <PredictionLeaderboard tournament={tournament} />
+    </Container>
+  );
+}