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-18 23:43:58 +01:00
parent 7c1cf62d4e
commit c0559d8b48
76 changed files with 39 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
apps/website/app/races/RacesPageClient.tsx
View File

@@ -1,67 +0,0 @@
'use client';
import { useState, useMemo } from 'react';
import { useRouter } from 'next/navigation';
import { RacesTemplate, type TimeFilter, type RaceStatusFilter } from '@/templates/RacesTemplate';
import type { RacesViewData } from '@/lib/view-data/RacesViewData';
interface RacesPageClientProps {
viewData: RacesViewData;
}
export function RacesPageClient({ viewData }: RacesPageClientProps) {
const router = useRouter();
const [statusFilter, setStatusFilter] = useState<RaceStatusFilter>('all');
const [leagueFilter, setLeagueFilter] = useState<string>('all');
const [timeFilter, setTimeFilter] = useState<TimeFilter>('upcoming');
const [showFilterModal, setShowFilterModal] = useState(false);
const filteredRaces = useMemo(() => {
return viewData.races.filter((race) => {
if (statusFilter !== 'all' && race.status !== statusFilter) return false;
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;
return true;
});
}, [viewData.races, statusFilter, leagueFilter, timeFilter]);
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 Array.from(grouped.entries()).map(([dateKey, dayRaces]) => ({
dateKey,
dateLabel: dayRaces[0]?.scheduledAtLabel || '',
races: dayRaces,
}));
}, [filteredRaces]);
return (
<RacesTemplate
viewData={{
...viewData,
races: filteredRaces,
racesByDate,
}}
statusFilter={statusFilter}
setStatusFilter={setStatusFilter}
leagueFilter={leagueFilter}
setLeagueFilter={setLeagueFilter}
timeFilter={timeFilter}
setTimeFilter={setTimeFilter}
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)}
/>
);
}

79
apps/website/app/races/[id]/RaceDetailPageClient.tsx
View File

@@ -1,79 +0,0 @@
'use client';
import React, { useState, useCallback } from 'react';
import { RaceDetailTemplate, RaceDetailViewData } from '@/templates/RaceDetailTemplate';
import { useRouter } from 'next/navigation';
interface Props {
data: RaceDetailViewData;
}
export function RaceDetailPageClient({ data: viewData }: Props) {
const router = useRouter();
const [animatedRatingChange] = useState(0);
const handleBack = useCallback(() => {
router.back();
}, [router]);
const handleRegister = useCallback(() => {
console.log('Register');
}, []);
const handleWithdraw = useCallback(() => {
console.log('Withdraw');
}, []);
const handleCancel = useCallback(() => {
console.log('Cancel');
}, []);
const handleReopen = useCallback(() => {
console.log('Reopen');
}, []);
const handleEndRace = useCallback(() => {
console.log('End Race');
}, []);
const handleFileProtest = useCallback(() => {
console.log('File Protest');
}, []);
const handleResultsClick = useCallback(() => {
router.push(`/races/${viewData.race.id}/results`);
}, [router, viewData.race.id]);
const handleStewardingClick = useCallback(() => {
router.push(`/races/${viewData.race.id}/stewarding`);
}, [router, viewData.race.id]);
const handleLeagueClick = useCallback((leagueId: string) => {
router.push(`/leagues/${leagueId}`);
}, [router]);
const handleDriverClick = useCallback((driverId: string) => {
router.push(`/drivers/${driverId}`);
}, [router]);
return (
<RaceDetailTemplate
viewData={viewData}
isLoading={false}
error={null}
onBack={handleBack}
onRegister={handleRegister}
onWithdraw={handleWithdraw}
onCancel={handleCancel}
onReopen={handleReopen}
onEndRace={handleEndRace}
onFileProtest={handleFileProtest}
onResultsClick={handleResultsClick}
onStewardingClick={handleStewardingClick}
onLeagueClick={handleLeagueClick}
onDriverClick={handleDriverClick}
animatedRatingChange={animatedRatingChange}
mutationLoading={{}}
/>
);
}

2
apps/website/app/races/[id]/page.tsx
View File

@@ -1,7 +1,7 @@
import { notFound } from 'next/navigation';
import { PageWrapper } from '@/ui/PageWrapper';
import { RaceDetailPageQuery } from '@/lib/page-queries/races/RaceDetailPageQuery';
import { RaceDetailPageClient } from './RaceDetailPageClient';
import { RaceDetailPageClient } from '@/client-wrapper/RaceDetailPageClient';
interface RaceDetailPageProps {
params: Promise<{

57
apps/website/app/races/[id]/results/RaceResultsPageClient.tsx
View File

@@ -1,57 +0,0 @@
'use client';
import React, { useState, useCallback } from 'react';
import { RaceResultsTemplate } from '@/templates/RaceResultsTemplate';
import { RaceResultsViewData } from '@/lib/view-data/races/RaceResultsViewData';
import { useRouter } from 'next/navigation';
interface Props {
data: RaceResultsViewData;
}
export function RaceResultsPageClient({ data: viewData }: Props) {
const router = useRouter();
const [importing, setImporting] = useState(false);
const [importSuccess, setImportSuccess] = useState(false);
const [importError, setImportError] = useState<string | null>(null);
const [showImportForm, setShowImportForm] = useState(false);
const handleBack = useCallback(() => {
router.back();
}, [router]);
const handleImportResults = useCallback(async () => {
setImporting(true);
setImportError(null);
try {
// Mock import
await new Promise(resolve => setTimeout(resolve, 1000));
setImportSuccess(true);
} catch (err) {
setImportError('Failed to import results');
} finally {
setImporting(false);
}
}, []);
const handlePenaltyClick = useCallback(() => {
console.log('Penalty click');
}, []);
return (
<RaceResultsTemplate
viewData={viewData}
isAdmin={false}
isLoading={false}
error={null}
onBack={handleBack}
onImportResults={handleImportResults}
onPenaltyClick={handlePenaltyClick}
importing={importing}
importSuccess={importSuccess}
importError={importError}
showImportForm={showImportForm}
setShowImportForm={setShowImportForm}
/>
);
}

2
apps/website/app/races/[id]/results/page.tsx
View File

@@ -1,7 +1,7 @@
import { notFound } from 'next/navigation';
import { PageWrapper } from '@/ui/PageWrapper';
import { RaceResultsPageQuery } from '@/lib/page-queries/races/RaceResultsPageQuery';
import { RaceResultsPageClient } from './RaceResultsPageClient';
import { RaceResultsPageClient } from '@/client-wrapper/RaceResultsPageClient';
interface RaceResultsPageProps {
params: Promise<{

110
apps/website/app/races/all/RacesAllPageClient.tsx
View File

@@ -1,110 +0,0 @@
'use client';
import { useState } from 'react';
import { useRouter } from 'next/navigation';
import { StatefulPageWrapper } from '@/ui/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';
const ITEMS_PER_PAGE = 10;
export function RacesAllPageClient({ initialViewData }: { initialViewData: RacesViewData | null }) {
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',
}}
/>
);
}

2
apps/website/app/races/all/page.tsx
View File

@@ -1,6 +1,6 @@
import { notFound } from 'next/navigation';
import { RacesAllPageQuery } from '@/lib/page-queries/races/RacesAllPageQuery';
import { RacesAllPageClient } from './RacesAllPageClient';
import { RacesAllPageClient } from '@/client-wrapper/RacesAllPageClient';
export default async function Page() {
// Execute the PageQuery

2
apps/website/app/races/page.tsx
View File

@@ -1,6 +1,6 @@
import { notFound } from 'next/navigation';
import { RacesPageQuery } from '@/lib/page-queries/races/RacesPageQuery';
import { RacesPageClient } from './RacesPageClient';
import { RacesPageClient } from '@/client-wrapper/RacesPageClient';
export default async function Page() {
const query = new RacesPageQuery();