91 lines
3.1 KiB
TypeScript
91 lines
3.1 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { useParams, useRouter } from 'next/navigation';
|
|
import { RaceStewardingTemplate, StewardingTab } from '@/templates/RaceStewardingTemplate';
|
|
import { useLeagueMembership } from '@/hooks/useLeagueMembershipService';
|
|
import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
|
|
import { LeagueRoleUtility } from '@/lib/utilities/LeagueRoleUtility';
|
|
|
|
// Shared state components
|
|
import { useDataFetching } from '@/components/shared/hooks/useDataFetching';
|
|
import { StateContainer } from '@/components/shared/state/StateContainer';
|
|
import { useServices } from '@/lib/services/ServiceProvider';
|
|
import { Gavel } from 'lucide-react';
|
|
|
|
export function RaceStewardingInteractive() {
|
|
const router = useRouter();
|
|
const params = useParams();
|
|
const raceId = params.id as string;
|
|
const currentDriverId = useEffectiveDriverId();
|
|
const { raceStewardingService } = useServices();
|
|
|
|
// Fetch data using new hook
|
|
const { data: stewardingData, isLoading, error, retry } = useDataFetching({
|
|
queryKey: ['raceStewardingData', raceId, currentDriverId],
|
|
queryFn: () => raceStewardingService.getRaceStewardingData(raceId, currentDriverId),
|
|
});
|
|
|
|
// Fetch membership
|
|
const { data: membership } = useLeagueMembership(stewardingData?.league?.id || '', currentDriverId);
|
|
|
|
// UI State
|
|
const [activeTab, setActiveTab] = useState<StewardingTab>('pending');
|
|
|
|
const isAdmin = membership ? LeagueRoleUtility.isLeagueAdminOrHigherRole(membership.role) : false;
|
|
|
|
// Actions
|
|
const handleBack = () => {
|
|
router.push(`/races/${raceId}`);
|
|
};
|
|
|
|
const handleReviewProtest = (protestId: string) => {
|
|
// Navigate to protest review page
|
|
router.push(`/leagues/${stewardingData?.league?.id}/stewarding/protests/${protestId}`);
|
|
};
|
|
|
|
// Transform data for template
|
|
const templateData = stewardingData ? {
|
|
race: stewardingData.race,
|
|
league: stewardingData.league,
|
|
pendingProtests: stewardingData.pendingProtests,
|
|
resolvedProtests: stewardingData.resolvedProtests,
|
|
penalties: stewardingData.penalties,
|
|
driverMap: stewardingData.driverMap,
|
|
pendingCount: stewardingData.pendingCount,
|
|
resolvedCount: stewardingData.resolvedCount,
|
|
penaltiesCount: stewardingData.penaltiesCount,
|
|
} : undefined;
|
|
|
|
return (
|
|
<StateContainer
|
|
data={stewardingData}
|
|
isLoading={isLoading}
|
|
error={error}
|
|
retry={retry}
|
|
config={{
|
|
loading: { variant: 'skeleton', message: 'Loading stewarding data...' },
|
|
error: { 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 }
|
|
}
|
|
}}
|
|
>
|
|
{(stewardingData) => (
|
|
<RaceStewardingTemplate
|
|
stewardingData={templateData}
|
|
isLoading={false}
|
|
error={null}
|
|
onBack={handleBack}
|
|
onReviewProtest={handleReviewProtest}
|
|
isAdmin={isAdmin}
|
|
activeTab={activeTab}
|
|
setActiveTab={setActiveTab}
|
|
/>
|
|
)}
|
|
</StateContainer>
|
|
);
|
|
} |