83 lines
2.9 KiB
TypeScript
83 lines
2.9 KiB
TypeScript
import { createFileRoute } from "@tanstack/react-router";
|
|
import { playerQueries } from "@/features/players/queries";
|
|
import PlayerStatsTable from "@/features/players/components/player-stats-table";
|
|
import { Suspense, useState, useDeferredValue } from "react";
|
|
import PlayerStatsTableSkeleton from "@/features/players/components/player-stats-table-skeleton";
|
|
import { prefetchServerQuery } from "@/lib/tanstack-query/utils/prefetch";
|
|
import LeagueHeadToHead from "@/features/players/components/league-head-to-head";
|
|
import { Box, Loader, Tabs, Button, Group, Container, Stack } from "@mantine/core";
|
|
|
|
export const Route = createFileRoute("/_authed/stats")({
|
|
component: Stats,
|
|
beforeLoad: ({ context }) => {
|
|
const queryClient = context.queryClient;
|
|
prefetchServerQuery(queryClient, playerQueries.allStats('all'));
|
|
prefetchServerQuery(queryClient, playerQueries.allStats('mainline'));
|
|
prefetchServerQuery(queryClient, playerQueries.allStats('regional'));
|
|
},
|
|
loader: () => ({
|
|
withPadding: false,
|
|
fullWidth: true,
|
|
header: {
|
|
title: "Player Stats"
|
|
},
|
|
refresh: [playerQueries.allStats().queryKey],
|
|
}),
|
|
});
|
|
|
|
function Stats() {
|
|
const [viewType, setViewType] = useState<'all' | 'mainline' | 'regional'>('all');
|
|
const deferredViewType = useDeferredValue(viewType);
|
|
const isStale = viewType !== deferredViewType;
|
|
|
|
return (
|
|
<Tabs defaultValue="stats">
|
|
<Tabs.List grow>
|
|
<Tabs.Tab value="stats">Stats</Tabs.Tab>
|
|
<Tabs.Tab value="h2h">Head to Head</Tabs.Tab>
|
|
</Tabs.List>
|
|
|
|
<Tabs.Panel value="stats">
|
|
<Container size="100%" px={0} mt="md">
|
|
<Stack gap="xs">
|
|
<Group gap="xs" px="md" justify="center">
|
|
<Button
|
|
variant={viewType === 'all' ? 'filled' : 'light'}
|
|
size="compact-xs"
|
|
onClick={() => setViewType('all')}
|
|
>
|
|
All
|
|
</Button>
|
|
<Button
|
|
variant={viewType === 'mainline' ? 'filled' : 'light'}
|
|
size="compact-xs"
|
|
onClick={() => setViewType('mainline')}
|
|
>
|
|
Mainline
|
|
</Button>
|
|
<Button
|
|
variant={viewType === 'regional' ? 'filled' : 'light'}
|
|
size="compact-xs"
|
|
onClick={() => setViewType('regional')}
|
|
>
|
|
Regional
|
|
</Button>
|
|
</Group>
|
|
<Box style={{ opacity: isStale ? 0.6 : 1, transition: 'opacity 150ms' }}>
|
|
<Suspense key={deferredViewType} fallback={<PlayerStatsTableSkeleton hideFilters />}>
|
|
<PlayerStatsTable viewType={deferredViewType} />
|
|
</Suspense>
|
|
</Box>
|
|
</Stack>
|
|
</Container>
|
|
</Tabs.Panel>
|
|
|
|
<Tabs.Panel value="h2h">
|
|
<Suspense fallback={<Box w='100vw' py='xl'><Loader ml='45vw' /></Box>}>
|
|
<LeagueHeadToHead />
|
|
</Suspense>
|
|
</Tabs.Panel>
|
|
</Tabs>
|
|
);
|
|
}
|