111 lines
3.8 KiB
TypeScript
111 lines
3.8 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { StatefulPageWrapper } from '@/components/shared/state/StatefulPageWrapper';
|
|
import { RacesAllTemplate } from '@/templates/RacesAllTemplate';
|
|
import { useAllRacesPageData } from '@/hooks/race/useAllRacesPageData';
|
|
import { type RacesViewData, type RaceViewData } from '@/lib/view-data/RacesViewData';
|
|
import { Flag } from 'lucide-react';
|
|
import { routes } from '@/lib/routing/RouteConfig';
|
|
import { ClientWrapperProps } from '@/lib/contracts/components/ComponentContracts';
|
|
|
|
const ITEMS_PER_PAGE = 10;
|
|
|
|
export function RacesAllPageClient({ viewData: initialViewData }: ClientWrapperProps<RacesViewData>) {
|
|
const router = useRouter();
|
|
|
|
// Client-side state for filters and pagination
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const [statusFilter, setStatusFilter] = useState<'scheduled' | 'running' | 'completed' | 'cancelled' | 'all'>('all');
|
|
const [leagueFilter, setLeagueFilter] = useState<string>('all');
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [showFilters, setShowFilters] = useState(false);
|
|
const [showFilterModal, setShowFilterModal] = useState(false);
|
|
|
|
// Use React Query hook
|
|
const { data: pageData, isLoading, error, refetch } = useAllRacesPageData(initialViewData);
|
|
|
|
// Transform data
|
|
const races: RaceViewData[] = pageData?.races ?? [];
|
|
|
|
// Filter and paginate (Note: This should be done by API per contract)
|
|
const filteredRaces = races.filter((race: RaceViewData) => {
|
|
if (statusFilter !== 'all' && race.status !== statusFilter) {
|
|
return false;
|
|
}
|
|
|
|
if (leagueFilter !== 'all' && race.leagueId !== leagueFilter) {
|
|
return false;
|
|
}
|
|
|
|
if (searchQuery) {
|
|
const query = searchQuery.toLowerCase();
|
|
const matchesTrack = race.track.toLowerCase().includes(query);
|
|
const matchesCar = race.car.toLowerCase().includes(query);
|
|
const matchesLeague = race.leagueName?.toLowerCase().includes(query);
|
|
if (!matchesTrack && !matchesCar && !matchesLeague) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
return true;
|
|
});
|
|
|
|
const totalPages = Math.ceil(filteredRaces.length / ITEMS_PER_PAGE);
|
|
const paginatedRaces = filteredRaces.slice((currentPage - 1) * ITEMS_PER_PAGE, currentPage * ITEMS_PER_PAGE);
|
|
|
|
// Actions
|
|
const handleRaceClick = (raceId: string) => {
|
|
router.push(routes.race.detail(raceId));
|
|
};
|
|
|
|
const handleLeagueClick = (leagueId: string) => {
|
|
router.push(routes.league.detail(leagueId));
|
|
};
|
|
|
|
const handlePageChange = (page: number) => {
|
|
setCurrentPage(page);
|
|
};
|
|
|
|
return (
|
|
<StatefulPageWrapper
|
|
data={pageData}
|
|
isLoading={isLoading}
|
|
error={error as Error | null}
|
|
retry={refetch}
|
|
Template={() => pageData ? (
|
|
<RacesAllTemplate
|
|
viewData={pageData}
|
|
races={paginatedRaces}
|
|
totalFilteredCount={filteredRaces.length}
|
|
isLoading={false}
|
|
currentPage={currentPage}
|
|
totalPages={totalPages}
|
|
itemsPerPage={ITEMS_PER_PAGE}
|
|
onPageChange={handlePageChange}
|
|
statusFilter={statusFilter}
|
|
setStatusFilter={setStatusFilter}
|
|
leagueFilter={leagueFilter}
|
|
setLeagueFilter={setLeagueFilter}
|
|
searchQuery={searchQuery}
|
|
setSearchQuery={setSearchQuery}
|
|
showFilters={showFilters}
|
|
setShowFilters={setShowFilters}
|
|
showFilterModal={showFilterModal}
|
|
setShowFilterModal={setShowFilterModal}
|
|
onRaceClick={handleRaceClick}
|
|
onLeagueClick={handleLeagueClick}
|
|
/>
|
|
) : null}
|
|
loading={{ variant: 'skeleton', message: 'Loading races...' }}
|
|
errorConfig={{ variant: 'full-screen' }}
|
|
empty={{
|
|
icon: Flag,
|
|
title: 'No races found',
|
|
description: 'There are no races available at the moment',
|
|
}}
|
|
/>
|
|
);
|
|
}
|