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-16 01:00:03 +01:00
parent ce7be39155
commit a98e3e3166
286 changed files with 5522 additions and 5261 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -34,8 +34,6 @@ export function RaceDetailPageClient({
onDriverClick,
isOwnerOrAdmin
}: RaceDetailPageClientProps) {
const [showProtestModal, setShowProtestModal] = useState(false);
const [showEndRaceModal, setShowEndRaceModal] = useState(false);
const [animatedRatingChange, setAnimatedRatingChange] = useState(0);
const ratingChange = viewData.userResult?.ratingChange ?? null;

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

@@ -32,11 +32,11 @@ export default async function RaceDetailPage({ params }: RaceDetailPageProps) {
return (
<PageWrapper
data={null}
Template={({ data: _data }) => (
Template={() => (
<RaceDetailTemplate
viewData={undefined}
isLoading={false}
error={new Error('Failed to load race details')}
error={new globalThis.Error('Failed to load race details')}
onBack={() => {}}
onRegister={() => {}}
onWithdraw={() => {}}
@@ -77,7 +77,7 @@ export default async function RaceDetailPage({ params }: RaceDetailPageProps) {
return (
<PageWrapper
data={viewData}
Template={({ data: _data }) => (
Template={() => (
<RaceDetailTemplate
viewData={viewData}
isLoading={false}

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

@@ -34,20 +34,21 @@ export default async function RaceResultsPage({ params }: RaceResultsPageProps)
<StatefulPageWrapper
data={null}
isLoading={false}
error={new Error('Failed to load race results')}
error={new globalThis.Error('Failed to load race results')}
retry={() => Promise.resolve()}
Template={({ data: _data }) => (
Template={() => (
<RaceResultsTemplate
raceTrack={undefined}
raceScheduledAt={undefined}
totalDrivers={undefined}
leagueName={undefined}
raceSOF={null}
results={[]}
penalties={[]}
pointsSystem={{}}
fastestLapTime={0}
currentDriverId={''}
viewData={{
raceTrack: '',
raceScheduledAt: '',
totalDrivers: 0,
leagueName: '',
raceSOF: null,
results: [],
penalties: [],
pointsSystem: {},
fastestLapTime: 0,
}}
isAdmin={false}
isLoading={false}
error={null}
@@ -82,18 +83,9 @@ export default async function RaceResultsPage({ params }: RaceResultsPageProps)
isLoading={false}
error={null}
retry={() => Promise.resolve()}
Template={({ data: _data }) => (
Template={() => (
<RaceResultsTemplate
raceTrack={viewData.raceTrack}
raceScheduledAt={viewData.raceScheduledAt}
totalDrivers={viewData.totalDrivers}
leagueName={viewData.leagueName}
raceSOF={viewData.raceSOF}
results={viewData.results}
penalties={viewData.penalties}
pointsSystem={viewData.pointsSystem}
fastestLapTime={viewData.fastestLapTime}
currentDriverId={''}
viewData={viewData}
isAdmin={false}
isLoading={false}
error={null}
@@ -117,4 +109,4 @@ export default async function RaceResultsPage({ params }: RaceResultsPageProps)
}}
/>
);
}
}

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

@@ -1,9 +1,12 @@
'use client';
import { notFound } from 'next/navigation';
import { PageWrapper } from '@/components/shared/state/PageWrapper';
import { RaceStewardingTemplate, StewardingTab } from '@/templates/RaceStewardingTemplate';
import { RaceStewardingTemplate, type StewardingTab } from '@/templates/RaceStewardingTemplate';
import { RaceStewardingPageQuery } from '@/lib/page-queries/races/RaceStewardingPageQuery';
import { type RaceStewardingViewData } from '@/lib/view-data/races/RaceStewardingViewData';
import { Gavel } from 'lucide-react';
import { useState } from 'react';
import { useState, useEffect, useCallback } from 'react';
interface RaceStewardingPageProps {
params: {
@@ -20,12 +23,12 @@ export default function RaceStewardingPage({ params }: RaceStewardingPageProps)
}
// Data state
const [pageData, setPageData] = useState<any>(null);
const [pageData, setPageData] = useState<RaceStewardingViewData | undefined>(undefined);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState<Error | null>(null);
// Fetch function
const fetchData = async () => {
const fetchData = useCallback(async () => {
setIsLoading(true);
setError(null);
@@ -33,40 +36,31 @@ export default function RaceStewardingPage({ params }: RaceStewardingPageProps)
const result = await RaceStewardingPageQuery.execute({ raceId });
if (result.isErr()) {
throw new Error('Failed to fetch stewarding data');
throw new globalThis.Error('Failed to fetch stewarding data');
}
setPageData(result.unwrap());
} catch (err) {
setError(err instanceof Error ? err : new Error('Unknown error'));
setError(err instanceof globalThis.Error ? err : new globalThis.Error('Unknown error'));
} finally {
setIsLoading(false);
}
};
}, [raceId]);
// Transform data for template
const templateData = pageData ? {
race: pageData.race,
league: pageData.league,
pendingProtests: pageData.pendingProtests,
resolvedProtests: pageData.resolvedProtests,
penalties: pageData.penalties,
driverMap: pageData.driverMap,
pendingCount: pageData.pendingCount,
resolvedCount: pageData.resolvedCount,
penaltiesCount: pageData.penaltiesCount,
} : undefined;
useEffect(() => {
fetchData();
}, [fetchData]);
// Actions
const handleBack = () => {
const handleBack = useCallback(() => {
window.history.back();
};
}, []);
const handleReviewProtest = (protestId: string) => {
if (templateData?.league?.id) {
window.location.href = `/leagues/${templateData.league.id}/stewarding/protests/${protestId}`;
const handleReviewProtest = useCallback((protestId: string) => {
if (pageData?.league?.id) {
window.location.href = `/leagues/${pageData.league.id}/stewarding/protests/${protestId}`;
}
};
}, [pageData?.league?.id]);
return (
<PageWrapper
@@ -74,9 +68,9 @@ export default function RaceStewardingPage({ params }: RaceStewardingPageProps)
isLoading={isLoading}
error={error}
retry={fetchData}
Template={({ data: _data }) => (
Template={({ data }) => (
<RaceStewardingTemplate
stewardingData={templateData}
viewData={data as RaceStewardingViewData}
isLoading={false}
error={null}
onBack={handleBack}
@@ -96,4 +90,4 @@ export default function RaceStewardingPage({ params }: RaceStewardingPageProps)
}}
/>
);
}
}

140
apps/website/app/races/all/RacesAllPageClient.tsx Normal file
View 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',
}}
/>
);
}

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

@@ -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} />;
}