51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
import { createFileRoute, redirect } from "@tanstack/react-router";
|
|
import { tournamentQueries } from "@/features/tournaments/queries";
|
|
import ManageTournament from "@/features/tournaments/components/manage-tournament";
|
|
import { ensureServerQueryData } from "@/lib/tanstack-query/utils/ensure";
|
|
import { Divider, Group, Skeleton, Stack } from "@mantine/core";
|
|
|
|
export const Route = createFileRoute("/_authed/admin/tournaments/$id/")({
|
|
beforeLoad: async ({ context, params }) => {
|
|
const { queryClient } = context;
|
|
const tournament = await ensureServerQueryData(
|
|
queryClient,
|
|
tournamentQueries.details(params.id)
|
|
);
|
|
if (!tournament) throw redirect({ to: "/admin/tournaments" });
|
|
return {
|
|
tournament,
|
|
};
|
|
},
|
|
loader: ({ context }) => ({
|
|
header: {
|
|
withBackButton: true,
|
|
title: `Manage ${context.tournament.name}`,
|
|
},
|
|
withPadding: false,
|
|
}),
|
|
component: RouteComponent,
|
|
pendingComponent: ManageTournamentPending,
|
|
});
|
|
|
|
function ManageTournamentPending() {
|
|
return (
|
|
<Stack gap={0}>
|
|
{Array.from({ length: 5 }).map((_, index) => (
|
|
<div key={`manage-tournament-skeleton-${index}`} style={{ opacity: Math.max(1 - index * 0.14, 0.4) }}>
|
|
<Group p="md" wrap="nowrap" w="100%">
|
|
<Skeleton height={20} width={20} radius="sm" />
|
|
<Skeleton height={16} width="45%" radius="sm" />
|
|
<Skeleton ml="auto" height={20} width={20} radius="sm" />
|
|
</Group>
|
|
<Divider />
|
|
</div>
|
|
))}
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
function RouteComponent() {
|
|
const { id } = Route.useParams();
|
|
return <ManageTournament tournamentId={id} />;
|
|
}
|