53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import { DriverLeaderboardItemViewModel } from '@/lib/view-models/DriverLeaderboardItemViewModel';
|
|
import { DriversTemplate } from '@/templates/DriversTemplate';
|
|
|
|
// Shared state components
|
|
import { StateContainer } from '@/components/shared/state/StateContainer';
|
|
import { useDriverLeaderboard } from '@/hooks/driver/useDriverLeaderboard';
|
|
import { Users } from 'lucide-react';
|
|
|
|
export function DriversInteractive() {
|
|
|
|
const { data: viewModel, isLoading: loading, error, retry } = useDriverLeaderboard();
|
|
|
|
const drivers = viewModel?.drivers || [];
|
|
const totalRaces = viewModel?.totalRaces || 0;
|
|
const totalWins = viewModel?.totalWins || 0;
|
|
const activeCount = viewModel?.activeCount || 0;
|
|
|
|
// TODO this should not be done in a page, thats part of the service??
|
|
// 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',
|
|
}
|
|
}}
|
|
>
|
|
{() => (
|
|
<DriversTemplate
|
|
drivers={driverViewModels}
|
|
totalRaces={totalRaces}
|
|
totalWins={totalWins}
|
|
activeCount={activeCount}
|
|
isLoading={false}
|
|
/>
|
|
)}
|
|
</StateContainer>
|
|
);
|
|
} |