Files
gridpilot.gg/apps/website/app/races/[id]/stewarding/page.tsx
2026-01-17 01:04:36 +01:00

94 lines
2.7 KiB
TypeScript

'use client';
import { notFound } from 'next/navigation';
import { PageWrapper } from '@/components/shared/state/PageWrapper';
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, useEffect, useCallback, use } from 'react';
interface RaceStewardingPageProps {
params: Promise<{
id: string;
}>;
}
export default function RaceStewardingPage({ params }: RaceStewardingPageProps) {
const { id: raceId } = use(params);
const [activeTab, setActiveTab] = useState<StewardingTab>('pending');
if (!raceId) {
notFound();
}
// Data state
const [pageData, setPageData] = useState<RaceStewardingViewData | undefined>(undefined);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState<Error | null>(null);
// Fetch function
const fetchData = useCallback(async () => {
setIsLoading(true);
setError(null);
try {
const result = await RaceStewardingPageQuery.execute({ raceId });
if (result.isErr()) {
throw new globalThis.Error('Failed to fetch stewarding data');
}
setPageData(result.unwrap());
} catch (err) {
setError(err instanceof globalThis.Error ? err : new globalThis.Error('Unknown error'));
} finally {
setIsLoading(false);
}
}, [raceId]);
useEffect(() => {
fetchData();
}, [fetchData]);
// Actions
const handleBack = useCallback(() => {
window.history.back();
}, []);
const handleReviewProtest = useCallback((protestId: string) => {
if (pageData?.league?.id) {
window.location.href = `/leagues/${pageData.league.id}/stewarding/protests/${protestId}`;
}
}, [pageData?.league?.id]);
return (
<PageWrapper
data={pageData}
isLoading={isLoading}
error={error}
retry={fetchData}
Template={({ data }) => (
<RaceStewardingTemplate
viewData={data as RaceStewardingViewData}
isLoading={false}
error={null}
onBack={handleBack}
onReviewProtest={handleReviewProtest}
isAdmin={false}
activeTab={activeTab}
setActiveTab={setActiveTab}
/>
)}
loading={{ variant: 'skeleton', message: 'Loading stewarding data...' }}
errorConfig={{ variant: 'full-screen' }}
empty={{
icon: Gavel,
title: 'No stewarding data',
description: 'No protests or penalties for this race',
action: { label: 'Back to Race', onClick: handleBack }
}}
/>
);
}