mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-20 18:28:11 +01:00
parent b39b098e6b
commit 444afda435
24 changed files with 971 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
apps/website/client-wrapper/RacesAllPageClient.tsx
View File

@@ -1,72 +1,67 @@
'use client';
import { useState } from 'react';
import { useState, useMemo } from 'react';
import { useRouter } from 'next/navigation';
import { StatefulPageWrapper } from '@/components/shared/state/StatefulPageWrapper';
import { RacesAllTemplate } from '@/templates/RacesAllTemplate';
import { RacesIndexTemplate } from '@/templates/RacesIndexTemplate';
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 type { RacesViewData, RaceViewData } from '@/lib/view-data/RacesViewData';
import { ClientWrapperProps } from '@/lib/contracts/components/ComponentContracts';
const ITEMS_PER_PAGE = 10;
import { StatefulPageWrapper } from '@/components/shared/state/StatefulPageWrapper';
import { Flag } from 'lucide-react';
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 [statusFilter, setStatusFilter] = useState<string>('all');
const [leagueFilter, setLeagueFilter] = useState<string>('all');
const [searchQuery, setSearchQuery] = useState('');
const [showFilters, setShowFilters] = useState(false);
const [timeFilter, setTimeFilter] = useState<string>('upcoming');
const [showFilterModal, setShowFilterModal] = useState(false);
// Use React Query hook
const { data: pageData, isLoading, error, refetch } = useAllRacesPageData(initialViewData);
// Transform data
const races: RaceViewData[] = pageData?.races ?? [];
const filteredRaces = useMemo(() => {
const now = new Date();
const races: RaceViewData[] = pageData?.races ?? [];
return races.filter((race) => {
if (statusFilter !== 'all' && race.status.toLowerCase() !== statusFilter.toLowerCase()) return false;
if (leagueFilter !== 'all' && race.leagueId !== leagueFilter) return false;
const scheduledAt = new Date(race.scheduledAt);
const isActuallyUpcoming = scheduledAt > now && race.status.toLowerCase() === 'scheduled';
const isActuallyLive = race.status.toLowerCase() === 'running';
const isActuallyPast = scheduledAt < now || race.status.toLowerCase() === 'completed' || race.status.toLowerCase() === 'cancelled';
// 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 (timeFilter === 'upcoming' && !isActuallyUpcoming) return false;
if (timeFilter === 'live' && !isActuallyLive) return false;
if (timeFilter === 'past' && !isActuallyPast) return false;
return true;
});
}, [pageData?.races, statusFilter, leagueFilter, timeFilter]);
if (leagueFilter !== 'all' && race.leagueId !== leagueFilter) {
return false;
}
const nextUpRace = useMemo(() => {
const now = new Date();
return filteredRaces.find(r => new Date(r.scheduledAt) > now && r.status.toLowerCase() === 'scheduled');
}, [filteredRaces]);
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;
const racesByDate = useMemo(() => {
const grouped = new Map<string, typeof filteredRaces[0][]>();
filteredRaces.forEach((race) => {
const dateKey = race.scheduledAt.split('T')[0]!;
if (!grouped.has(dateKey)) {
grouped.set(dateKey, []);
}
}
grouped.get(dateKey)!.push(race);
});
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 Array.from(grouped.entries())
.sort(([a], [b]) => timeFilter === 'past' ? b.localeCompare(a) : a.localeCompare(b))
.map(([dateKey, dayRaces]) => ({
dateKey,
dateLabel: dayRaces[0]?.scheduledAtLabel || '',
races: dayRaces,
}));
}, [filteredRaces, timeFilter]);
return (
<StatefulPageWrapper
@@ -75,27 +70,22 @@ export function RacesAllPageClient({ viewData: initialViewData }: ClientWrapperP
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}
<RacesIndexTemplate
viewData={{
...pageData,
races: filteredRaces,
racesByDate,
nextUpRace,
}}
statusFilter={statusFilter}
setStatusFilter={setStatusFilter}
leagueFilter={leagueFilter}
setLeagueFilter={setLeagueFilter}
searchQuery={searchQuery}
setSearchQuery={setSearchQuery}
showFilters={showFilters}
setShowFilters={setShowFilters}
timeFilter={timeFilter}
setTimeFilter={setTimeFilter}
showFilterModal={showFilterModal}
setShowFilterModal={setShowFilterModal}
onRaceClick={handleRaceClick}
onLeagueClick={handleLeagueClick}
onRaceClick={(id) => router.push(`/races/${id}`)}
/>
) : null}
loading={{ variant: 'skeleton', message: 'Loading races...' }}

59
apps/website/client-wrapper/RacesPageClient.tsx
View File

@@ -2,30 +2,54 @@
import { useState, useMemo } from 'react';
import { useRouter } from 'next/navigation';
import { RacesTemplate, type TimeFilter, type RaceStatusFilter } from '@/templates/RacesTemplate';
import { RacesIndexTemplate } from '@/templates/RacesIndexTemplate';
import type { RacesViewData } from '@/lib/view-data/RacesViewData';
import { ClientWrapperProps } from '@/lib/contracts/components/ComponentContracts';
export function RacesPageClient({ viewData }: ClientWrapperProps<RacesViewData>) {
const router = useRouter();
const [statusFilter, setStatusFilter] = useState<RaceStatusFilter>('all');
const [statusFilter, setStatusFilter] = useState<string>('all');
const [leagueFilter, setLeagueFilter] = useState<string>('all');
const [timeFilter, setTimeFilter] = useState<TimeFilter>('upcoming');
const [timeFilter, setTimeFilter] = useState<string>('upcoming');
const [showFilterModal, setShowFilterModal] = useState(false);
const filteredRaces = useMemo(() => {
const now = new Date();
return viewData.races.filter((race) => {
if (statusFilter !== 'all' && race.status !== statusFilter) return false;
// Status filter: case-insensitive match
if (statusFilter !== 'all' && race.status.toLowerCase() !== statusFilter.toLowerCase()) return false;
// League filter
if (leagueFilter !== 'all' && race.leagueId !== leagueFilter) return false;
if (timeFilter === 'upcoming' && !race.isUpcoming) return false;
if (timeFilter === 'live' && !race.isLive) return false;
if (timeFilter === 'past' && !race.isPast) return false;
// Time filter: ensure we are checking the correct flags
// Note: we also check the actual date to be safe against stale API flags
const scheduledAt = new Date(race.scheduledAt);
const isActuallyUpcoming = scheduledAt > now && race.status.toLowerCase() === 'scheduled';
const isActuallyLive = race.status.toLowerCase() === 'running';
const isActuallyPast = scheduledAt < now || race.status.toLowerCase() === 'completed' || race.status.toLowerCase() === 'cancelled';
if (timeFilter === 'upcoming' && !isActuallyUpcoming) return false;
if (timeFilter === 'live' && !isActuallyLive) return false;
if (timeFilter === 'past' && !isActuallyPast) return false;
return true;
});
}, [viewData.races, statusFilter, leagueFilter, timeFilter]);
const nextUpRace = useMemo(() => {
const now = new Date();
// Find the first upcoming race in the filtered list
return filteredRaces.find(r => new Date(r.scheduledAt) > now && r.status.toLowerCase() === 'scheduled');
}, [filteredRaces]);
const racesByDate = useMemo(() => {
const grouped = new Map<string, typeof filteredRaces[0][]>();
// If we have a "Next Up" race and we are in upcoming view, we might want to exclude it from the list
// to avoid duplication, but usually it's better to keep the list complete.
// For this redesign, we keep the list complete for scanning.
filteredRaces.forEach((race) => {
const dateKey = race.scheduledAt.split('T')[0]!;
if (!grouped.has(dateKey)) {
@@ -33,19 +57,23 @@ export function RacesPageClient({ viewData }: ClientWrapperProps<RacesViewData>)
}
grouped.get(dateKey)!.push(race);
});
return Array.from(grouped.entries()).map(([dateKey, dayRaces]) => ({
dateKey,
dateLabel: dayRaces[0]?.scheduledAtLabel || '',
races: dayRaces,
}));
}, [filteredRaces]);
return Array.from(grouped.entries())
.sort(([a], [b]) => timeFilter === 'past' ? b.localeCompare(a) : a.localeCompare(b))
.map(([dateKey, dayRaces]) => ({
dateKey,
dateLabel: dayRaces[0]?.scheduledAtLabel || '',
races: dayRaces,
}));
}, [filteredRaces, timeFilter]);
return (
<RacesTemplate
<RacesIndexTemplate
viewData={{
...viewData,
races: filteredRaces,
racesByDate,
nextUpRace,
}}
statusFilter={statusFilter}
setStatusFilter={setStatusFilter}
@@ -56,9 +84,6 @@ export function RacesPageClient({ viewData }: ClientWrapperProps<RacesViewData>)
showFilterModal={showFilterModal}
setShowFilterModal={setShowFilterModal}
onRaceClick={(id) => router.push(`/races/${id}`)}
onLeagueClick={(id) => router.push(`/leagues/${id}`)}
onWithdraw={(id) => console.log('Withdraw', id)}
onCancel={(id) => console.log('Cancel', id)}
/>
);
}