68 lines
1.8 KiB
TypeScript
68 lines
1.8 KiB
TypeScript
import { createFileRoute } from '@tanstack/react-router'
|
|
import { tournamentQueries } from '@/features/tournaments/queries';
|
|
import Page from '@/components/page'
|
|
import { useQuery } from '@tanstack/react-query';
|
|
import { Box, Button } from '@mantine/core';
|
|
import { useSheet } from '@/hooks/use-sheet';
|
|
import Sheet from '@/components/sheet/sheet';
|
|
import { Tournament } from '@/features/tournaments/types';
|
|
import { UsersIcon } from '@phosphor-icons/react';
|
|
import ListButton from '@/components/list-button';
|
|
import TeamList from '@/features/teams/components/team-list';
|
|
|
|
export const Route = createFileRoute('/_authed/tournaments/$tournamentId')({
|
|
beforeLoad: async ({ context, params }) => {
|
|
const { queryClient } = context;
|
|
await queryClient.ensureQueryData(tournamentQueries.details(params.tournamentId))
|
|
},
|
|
loader: ({ params }) => ({
|
|
header: {
|
|
collapsed: true,
|
|
withBackButton: true
|
|
},
|
|
refresh: {
|
|
toRefresh: tournamentQueries.details(params.tournamentId).queryKey,
|
|
}
|
|
}),
|
|
component: RouteComponent,
|
|
})
|
|
|
|
function RouteComponent() {
|
|
const { data: tournament } = useQuery(tournamentQueries.details(Route.useParams().tournamentId));
|
|
|
|
const sheet = useSheet()
|
|
|
|
return <Page noPadding>
|
|
<Box mt='xl' p='md'>
|
|
|
|
<h3 style={{ marginTop: 0 }}>
|
|
{tournament?.name}
|
|
</h3>
|
|
|
|
<Button onClick={() => sheet.open()}>
|
|
View Teams
|
|
</Button>
|
|
|
|
</Box>
|
|
|
|
<ListButton
|
|
label='Teams'
|
|
onClick={() => sheet.open()}
|
|
Icon={UsersIcon}
|
|
/>
|
|
|
|
<Sheet
|
|
{...sheet.props}
|
|
title='Teams'
|
|
>
|
|
<TeamDrawer tournament={tournament!} />
|
|
</Sheet>
|
|
</Page>
|
|
}
|
|
|
|
const TeamDrawer = ({ tournament }: { tournament: Tournament }) => {
|
|
return (
|
|
<TeamList teams={tournament?.teams!} />
|
|
);
|
|
}
|