website refactor

apps/website/app/races/[id]/RaceDetailPageClient.tsx

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

apps/website/app/races/[id]/page.tsx

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

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

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

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

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