error and load state

apps/website/app/races/[id]/results/RaceResultsInteractive.tsx

@@ -3,20 +3,36 @@
 import { useState } from 'react';
 import { useParams, useRouter } from 'next/navigation';
 import { RaceResultsTemplate } from '@/templates/RaceResultsTemplate';
-import { useRaceResultsDetail, useRaceWithSOF } from '@/hooks/useRaceService';
 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 { Trophy } from 'lucide-react';
+
 export function RaceResultsInteractive() {
   const router = useRouter();
   const params = useParams();
   const raceId = params.id as string;
   const currentDriverId = useEffectiveDriverId();
+  const { raceResultsService, raceService } = useServices();
 
-  // Fetch data
-  const { data: raceData, isLoading, error } = useRaceResultsDetail(raceId, currentDriverId);
-  const { data: sofData } = useRaceWithSOF(raceId);
+  // Fetch data using new hook
+  const { data: raceData, isLoading, error, retry } = useDataFetching({
+    queryKey: ['raceResultsDetail', raceId, currentDriverId],
+    queryFn: () => raceResultsService.getResultsDetail(raceId, currentDriverId),
+  });
+
+  // Fetch SOF data
+  const { data: sofData } = useDataFetching({
+    queryKey: ['raceWithSOF', raceId],
+    queryFn: () => raceResultsService.getWithSOF(raceId),
+  });
+
+  // Fetch membership
   const { data: membership } = useLeagueMembership(raceData?.league?.id || '', currentDriverId);
 
   // UI State
@@ -83,28 +99,47 @@ export function RaceResultsInteractive() {
   };
 
   return (
-    <RaceResultsTemplate
-      raceTrack={raceData?.race?.track}
-      raceScheduledAt={raceData?.race?.scheduledAt}
-      totalDrivers={raceData?.stats.totalDrivers}
-      leagueName={raceData?.league?.name}
-      raceSOF={raceSOF}
-      results={results}
-      penalties={penalties}
-      pointsSystem={raceData?.pointsSystem ?? {}}
-      fastestLapTime={raceData?.fastestLapTime ?? 0}
-      currentDriverId={currentDriverId}
-      isAdmin={isAdmin}
+    <StateContainer
+      data={raceData}
       isLoading={isLoading}
       error={error}
-      onBack={handleBack}
-      onImportResults={handleImportResults}
-      onPenaltyClick={handlePenaltyClick}
-      importing={importing}
-      importSuccess={importSuccess}
-      importError={importError}
-      showImportForm={showImportForm}
-      setShowImportForm={setShowImportForm}
-    />
+      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>
   );
-}
+ }