page wrapper
This commit is contained in:
@@ -1,137 +0,0 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { RaceResultsTemplate } from '@/templates/RaceResultsTemplate';
|
||||
import { useLeagueMemberships } from '@/hooks/league/useLeagueMemberships';
|
||||
import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
|
||||
import { LeagueRoleUtility } from '@/lib/utilities/LeagueRoleUtility';
|
||||
|
||||
// Shared state components
|
||||
import { StateContainer } from '@/components/shared/state/StateContainer';
|
||||
import { useRaceResultsDetail } from '@/hooks/race/useRaceResultsDetail';
|
||||
import { useRaceWithSOF } from '@/hooks/race/useRaceWithSOF';
|
||||
import { Trophy } from 'lucide-react';
|
||||
|
||||
export function RaceResultsInteractive() {
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
const raceId = params.id as string;
|
||||
const currentDriverId = useEffectiveDriverId();
|
||||
|
||||
// Fetch data using existing hooks
|
||||
const { data: raceData, isLoading, error, retry } = useRaceResultsDetail(raceId, currentDriverId);
|
||||
const { data: sofData } = useRaceWithSOF(raceId);
|
||||
|
||||
// Fetch membership
|
||||
const { data: membershipsData } = useLeagueMemberships(raceData?.league?.id || '', currentDriverId || '');
|
||||
|
||||
// UI State
|
||||
const [importing, setImporting] = useState(false);
|
||||
const [importSuccess, setImportSuccess] = useState(false);
|
||||
const [importError, setImportError] = useState<string | null>(null);
|
||||
const [showImportForm, setShowImportForm] = useState(false);
|
||||
|
||||
const raceSOF = sofData?.strengthOfField || null;
|
||||
const currentMembership = membershipsData?.memberships.find(m => m.driverId === currentDriverId);
|
||||
const isAdmin = currentMembership ? LeagueRoleUtility.isLeagueAdminOrHigherRole(currentMembership.role) : false;
|
||||
|
||||
// Transform data for template
|
||||
const results = raceData?.results.map(result => ({
|
||||
position: result.position,
|
||||
driverId: result.driverId,
|
||||
driverName: result.driverName,
|
||||
driverAvatar: result.avatarUrl,
|
||||
country: 'US', // Default since view model doesn't have country
|
||||
car: 'Unknown', // Default since view model doesn't have car
|
||||
laps: 0, // Default since view model doesn't have laps
|
||||
time: '0:00.00', // Default since view model doesn't have time
|
||||
fastestLap: result.fastestLap.toString(), // Convert number to string
|
||||
points: 0, // Default since view model doesn't have points
|
||||
incidents: result.incidents,
|
||||
isCurrentUser: result.driverId === currentDriverId,
|
||||
})) ?? [];
|
||||
|
||||
const penalties = raceData?.penalties.map(penalty => ({
|
||||
driverId: penalty.driverId,
|
||||
driverName: raceData.results.find(r => r.driverId === penalty.driverId)?.driverName || 'Unknown',
|
||||
type: penalty.type as 'time_penalty' | 'grid_penalty' | 'points_deduction' | 'disqualification' | 'warning' | 'license_points',
|
||||
value: penalty.value || 0,
|
||||
reason: 'Penalty applied', // Default since view model doesn't have reason
|
||||
notes: undefined, // Default since view model doesn't have notes
|
||||
})) ?? [];
|
||||
|
||||
// Actions
|
||||
const handleBack = () => {
|
||||
router.back();
|
||||
};
|
||||
|
||||
const handleImportResults = async (importedResults: any[]) => {
|
||||
setImporting(true);
|
||||
setImportError(null);
|
||||
|
||||
try {
|
||||
// TODO: Implement race results service
|
||||
// await raceResultsService.importRaceResults(raceId, {
|
||||
// resultsFileContent: JSON.stringify(importedResults),
|
||||
// });
|
||||
|
||||
setImportSuccess(true);
|
||||
// await loadData();
|
||||
} catch (err) {
|
||||
setImportError(err instanceof Error ? err.message : 'Failed to import results');
|
||||
} finally {
|
||||
setImporting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePenaltyClick = (driver: { id: string; name: string }) => {
|
||||
// This would open a penalty modal in a real implementation
|
||||
console.log('Penalty click for:', driver);
|
||||
};
|
||||
|
||||
return (
|
||||
<StateContainer
|
||||
data={raceData}
|
||||
isLoading={isLoading}
|
||||
error={error}
|
||||
retry={retry}
|
||||
config={{
|
||||
loading: { variant: 'skeleton', message: 'Loading race results...' },
|
||||
error: { variant: 'full-screen' },
|
||||
empty: {
|
||||
icon: Trophy,
|
||||
title: 'No results available',
|
||||
description: 'Race results will appear here once the race is completed',
|
||||
action: { label: 'Back to Race', onClick: handleBack }
|
||||
}
|
||||
}}
|
||||
>
|
||||
{(raceResultsData) => (
|
||||
<RaceResultsTemplate
|
||||
raceTrack={raceResultsData?.race?.track}
|
||||
raceScheduledAt={raceResultsData?.race?.scheduledAt}
|
||||
totalDrivers={raceResultsData?.stats.totalDrivers}
|
||||
leagueName={raceResultsData?.league?.name}
|
||||
raceSOF={raceSOF}
|
||||
results={results}
|
||||
penalties={penalties}
|
||||
pointsSystem={raceResultsData?.pointsSystem ?? {}}
|
||||
fastestLapTime={raceResultsData?.fastestLapTime ?? 0}
|
||||
currentDriverId={currentDriverId}
|
||||
isAdmin={isAdmin}
|
||||
isLoading={false}
|
||||
error={null}
|
||||
onBack={handleBack}
|
||||
onImportResults={handleImportResults}
|
||||
onPenaltyClick={handlePenaltyClick}
|
||||
importing={importing}
|
||||
importSuccess={importSuccess}
|
||||
importError={importError}
|
||||
showImportForm={showImportForm}
|
||||
setShowImportForm={setShowImportForm}
|
||||
/>
|
||||
)}
|
||||
</StateContainer>
|
||||
);
|
||||
}
|
||||
@@ -1,3 +1,125 @@
|
||||
import { RaceResultsInteractive } from './RaceResultsInteractive';
|
||||
'use client';
|
||||
|
||||
export default RaceResultsInteractive;
|
||||
import { StatefulPageWrapper } from '@/components/shared/state/StatefulPageWrapper';
|
||||
import { RaceResultsTemplate } from '@/templates/RaceResultsTemplate';
|
||||
import { useRaceResultsPageData } from '@/hooks/race/useRaceResultsPageData';
|
||||
import { RaceResultsDataTransformer } from '@/lib/transformers/RaceResultsDataTransformer';
|
||||
import { useLeagueMemberships } from '@/hooks/league/useLeagueMemberships';
|
||||
import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
|
||||
import { useState } from 'react';
|
||||
import { notFound, useRouter } from 'next/navigation';
|
||||
import { LeagueRoleUtility } from '@/lib/utilities/LeagueRoleUtility';
|
||||
import { Trophy } from 'lucide-react';
|
||||
|
||||
interface RaceResultsPageProps {
|
||||
params: {
|
||||
id: string;
|
||||
};
|
||||
}
|
||||
|
||||
export default function RaceResultsPage({ params }: RaceResultsPageProps) {
|
||||
const router = useRouter();
|
||||
const raceId = params.id;
|
||||
|
||||
if (!raceId) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const currentDriverId = useEffectiveDriverId() || '';
|
||||
|
||||
// Fetch data using domain hook
|
||||
const { data: queries, isLoading, error, refetch } = useRaceResultsPageData(raceId, currentDriverId);
|
||||
|
||||
// Additional data - league memberships
|
||||
const leagueName = queries?.results?.league?.name || '';
|
||||
const { data: memberships } = useLeagueMemberships(leagueName, currentDriverId);
|
||||
|
||||
// Transform data
|
||||
const data = queries?.results && queries?.sof
|
||||
? RaceResultsDataTransformer.transform(
|
||||
queries.results,
|
||||
queries.sof,
|
||||
currentDriverId,
|
||||
memberships
|
||||
)
|
||||
: undefined;
|
||||
|
||||
// UI State for import functionality
|
||||
const [importing, setImporting] = useState(false);
|
||||
const [importSuccess, setImportSuccess] = useState(false);
|
||||
const [importError, setImportError] = useState<string | null>(null);
|
||||
const [showImportForm, setShowImportForm] = useState(false);
|
||||
|
||||
// Actions
|
||||
const handleBack = () => router.back();
|
||||
|
||||
const handleImportResults = async (importedResults: any[]) => {
|
||||
setImporting(true);
|
||||
setImportError(null);
|
||||
|
||||
try {
|
||||
console.log('Import results:', importedResults);
|
||||
setImportSuccess(true);
|
||||
|
||||
// Refetch data after import
|
||||
await refetch();
|
||||
} catch (err) {
|
||||
setImportError(err instanceof Error ? err.message : 'Failed to import results');
|
||||
} finally {
|
||||
setImporting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePenaltyClick = (driver: { id: string; name: string }) => {
|
||||
console.log('Penalty click for:', driver);
|
||||
};
|
||||
|
||||
// Determine admin status from memberships data
|
||||
const currentDriver = data?.results.find(r => r.isCurrentUser);
|
||||
const currentMembership = data?.memberships?.find(m => m.driverId === currentDriverId);
|
||||
const isAdmin = currentMembership
|
||||
? LeagueRoleUtility.isLeagueAdminOrHigherRole(currentMembership.role)
|
||||
: false;
|
||||
|
||||
return (
|
||||
<StatefulPageWrapper
|
||||
data={data}
|
||||
isLoading={isLoading}
|
||||
error={error as Error | null}
|
||||
retry={refetch}
|
||||
Template={({ data }) => (
|
||||
<RaceResultsTemplate
|
||||
raceTrack={data.raceTrack}
|
||||
raceScheduledAt={data.raceScheduledAt}
|
||||
totalDrivers={data.totalDrivers}
|
||||
leagueName={data.leagueName}
|
||||
raceSOF={data.raceSOF}
|
||||
results={data.results}
|
||||
penalties={data.penalties}
|
||||
pointsSystem={data.pointsSystem}
|
||||
fastestLapTime={data.fastestLapTime}
|
||||
currentDriverId={currentDriverId}
|
||||
isAdmin={isAdmin}
|
||||
isLoading={false}
|
||||
error={null}
|
||||
onBack={handleBack}
|
||||
onImportResults={handleImportResults}
|
||||
onPenaltyClick={handlePenaltyClick}
|
||||
importing={importing}
|
||||
importSuccess={importSuccess}
|
||||
importError={importError}
|
||||
showImportForm={showImportForm}
|
||||
setShowImportForm={setShowImportForm}
|
||||
/>
|
||||
)}
|
||||
loading={{ variant: 'skeleton', message: 'Loading race results...' }}
|
||||
errorConfig={{ variant: 'full-screen' }}
|
||||
empty={{
|
||||
icon: Trophy,
|
||||
title: 'No results available',
|
||||
description: 'Race results will appear here once the race is completed',
|
||||
action: { label: 'Back to Race', onClick: handleBack }
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user