website refactor

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