59 lines
1.8 KiB
TypeScript
59 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import { useRouter } from 'next/navigation';
|
|
import { DriversTemplate } from '@/templates/DriversTemplate';
|
|
import { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';
|
|
|
|
// Shared state components
|
|
import { useDataFetching } from '@/components/shared/hooks/useDataFetching';
|
|
import { StateContainer } from '@/components/shared/state/StateContainer';
|
|
import { useServices } from '@/lib/services/ServiceProvider';
|
|
import { Users } from 'lucide-react';
|
|
|
|
export function DriversInteractive() {
|
|
const router = useRouter();
|
|
const { driverService } = useServices();
|
|
|
|
const { data: viewModel, isLoading: loading, error, retry } = useDataFetching({
|
|
queryKey: ['driverLeaderboard'],
|
|
queryFn: () => driverService.getDriverLeaderboard(),
|
|
});
|
|
|
|
const drivers = viewModel?.drivers || [];
|
|
const totalRaces = viewModel?.totalRaces || 0;
|
|
const totalWins = viewModel?.totalWins || 0;
|
|
const activeCount = viewModel?.activeCount || 0;
|
|
|
|
// Transform data for template
|
|
const driverViewModels = drivers.map((driver, index) =>
|
|
new DriverLeaderboardItemViewModel(driver, index + 1)
|
|
);
|
|
|
|
return (
|
|
<StateContainer
|
|
data={viewModel}
|
|
isLoading={loading}
|
|
error={error}
|
|
retry={retry}
|
|
config={{
|
|
loading: { variant: 'skeleton', message: 'Loading driver leaderboard...' },
|
|
error: { variant: 'inline' },
|
|
empty: {
|
|
icon: Users,
|
|
title: 'No drivers found',
|
|
description: 'There are no drivers in the system yet',
|
|
}
|
|
}}
|
|
>
|
|
{(leaderboardData) => (
|
|
<DriversTemplate
|
|
drivers={driverViewModels}
|
|
totalRaces={totalRaces}
|
|
totalWins={totalWins}
|
|
activeCount={activeCount}
|
|
isLoading={false}
|
|
/>
|
|
)}
|
|
</StateContainer>
|
|
);
|
|
} |