website refactor
This commit is contained in:
140
apps/website/app/races/all/RacesAllPageClient.tsx
Normal file
140
apps/website/app/races/all/RacesAllPageClient.tsx
Normal file
@@ -0,0 +1,140 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { StatefulPageWrapper } from '@/components/shared/state/StatefulPageWrapper';
|
||||
import { RacesAllTemplate } from '@/templates/RacesAllTemplate';
|
||||
import { RacesAllPageQuery } from '@/lib/page-queries/races/RacesAllPageQuery';
|
||||
import { type RacesViewData, type RaceViewData } from '@/lib/view-data/RacesViewData';
|
||||
import { Flag } from 'lucide-react';
|
||||
|
||||
import { routes } from '@/lib/routing/RouteConfig';
|
||||
|
||||
const ITEMS_PER_PAGE = 10;
|
||||
|
||||
export function RacesAllPageClient({ initialViewData }: { initialViewData: unknown }) {
|
||||
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);
|
||||
|
||||
// Data state
|
||||
const [pageData, setPageData] = useState<RacesViewData | null>(initialViewData as RacesViewData);
|
||||
const [isLoading, setIsLoading] = useState(!initialViewData);
|
||||
const [error, setError] = useState<Error | null>(null);
|
||||
|
||||
// Fetch data
|
||||
const fetchData = useCallback(async () => {
|
||||
if (pageData && !isLoading) return; // Already have data from server
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const result = await RacesAllPageQuery.execute();
|
||||
|
||||
if (result.isErr()) {
|
||||
throw new globalThis.Error('Failed to fetch races');
|
||||
}
|
||||
|
||||
setPageData(result.unwrap() as unknown as RacesViewData);
|
||||
} catch (err) {
|
||||
setError(err instanceof globalThis.Error ? err : new globalThis.Error('Unknown error'));
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}, [pageData, isLoading]);
|
||||
|
||||
// Fetch on mount if no initial data
|
||||
useEffect(() => {
|
||||
if (!initialViewData) {
|
||||
fetchData();
|
||||
}
|
||||
}, [initialViewData, fetchData]);
|
||||
|
||||
// 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}
|
||||
retry={fetchData}
|
||||
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',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -1,156 +1,20 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { StatefulPageWrapper } from '@/components/shared/state/StatefulPageWrapper';
|
||||
import { RacesAllTemplate } from '@/templates/RacesAllTemplate';
|
||||
import { notFound } from 'next/navigation';
|
||||
import { RacesAllPageQuery } from '@/lib/page-queries/races/RacesAllPageQuery';
|
||||
import { Flag } from 'lucide-react';
|
||||
import { RacesAllPageClient } from './RacesAllPageClient';
|
||||
|
||||
const ITEMS_PER_PAGE = 10;
|
||||
|
||||
interface Race {
|
||||
id: string;
|
||||
track: string;
|
||||
car: string;
|
||||
scheduledAt: string;
|
||||
status: 'scheduled' | 'running' | 'completed' | 'cancelled';
|
||||
sessionType: string;
|
||||
leagueId?: string;
|
||||
leagueName?: string;
|
||||
strengthOfField?: number;
|
||||
}
|
||||
|
||||
export default function RacesAllPage() {
|
||||
const router = useRouter();
|
||||
export default async function Page() {
|
||||
// Execute the PageQuery
|
||||
const result = await RacesAllPageQuery.execute();
|
||||
|
||||
// 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);
|
||||
|
||||
// Data state
|
||||
const [pageData, setPageData] = useState<any>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState<Error | null>(null);
|
||||
|
||||
// Fetch data
|
||||
const fetchData = async () => {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
|
||||
try {
|
||||
const result = await RacesAllPageQuery.execute();
|
||||
|
||||
if (result.isErr()) {
|
||||
throw new Error('Failed to fetch races');
|
||||
}
|
||||
|
||||
setPageData(result.unwrap());
|
||||
} catch (err) {
|
||||
setError(err instanceof Error ? err : new Error('Unknown error'));
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
if (result.isErr()) {
|
||||
const error = result.getError();
|
||||
if (error === 'notFound') {
|
||||
notFound();
|
||||
}
|
||||
};
|
||||
// For other errors, we still render the client component which handles its own loading/error states
|
||||
}
|
||||
|
||||
// Fetch on mount
|
||||
useEffect(() => {
|
||||
fetchData();
|
||||
}, []);
|
||||
const viewData = result.isOk() ? result.unwrap() : null;
|
||||
|
||||
// Transform data
|
||||
const races: Race[] = pageData?.races.map((race: any) => ({
|
||||
id: race.id,
|
||||
track: race.track,
|
||||
car: race.car,
|
||||
scheduledAt: race.scheduledAt,
|
||||
status: race.status as 'scheduled' | 'running' | 'completed' | 'cancelled',
|
||||
sessionType: 'race',
|
||||
leagueId: race.leagueId,
|
||||
leagueName: race.leagueName,
|
||||
strengthOfField: race.strengthOfField ?? undefined,
|
||||
})) ?? [];
|
||||
|
||||
// Filter and paginate (Note: This should be done by API per contract)
|
||||
const filteredRaces = races.filter((race: Race) => {
|
||||
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(`/races/${raceId}`);
|
||||
};
|
||||
|
||||
const handleLeagueClick = (leagueId: string) => {
|
||||
router.push(`/leagues/${leagueId}`);
|
||||
};
|
||||
|
||||
const handlePageChange = (page: number) => {
|
||||
setCurrentPage(page);
|
||||
};
|
||||
|
||||
return (
|
||||
<StatefulPageWrapper
|
||||
data={pageData}
|
||||
isLoading={isLoading}
|
||||
error={error}
|
||||
retry={fetchData}
|
||||
Template={({ data: _data }) => (
|
||||
<RacesAllTemplate
|
||||
viewData={pageData}
|
||||
races={paginatedRaces as any}
|
||||
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}
|
||||
/>
|
||||
)}
|
||||
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',
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
return <RacesAllPageClient initialViewData={viewData} />;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user