website refactor

apps/website/app/races/all/RacesAllPageClient.tsx

@@ -1,10 +1,10 @@
 'use client';
 
-import { useState, useEffect, useCallback } from 'react';
+import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { StatefulPageWrapper } from '@/components/shared/state/StatefulPageWrapper';
 import { RacesAllTemplate } from '@/templates/RacesAllTemplate';
-import { RacesAllPageQuery } from '@/lib/page-queries/races/RacesAllPageQuery';
+import { useAllRacesPageData } from '@/hooks/race/useAllRacesPageData';
 import { type RacesViewData, type RaceViewData } from '@/lib/view-data/RacesViewData';
 import { Flag } from 'lucide-react';
 
@@ -12,7 +12,7 @@ import { routes } from '@/lib/routing/RouteConfig';
 
 const ITEMS_PER_PAGE = 10;
 
-export function RacesAllPageClient({ initialViewData }: { initialViewData: unknown }) {
+export function RacesAllPageClient({ initialViewData }: { initialViewData: RacesViewData | null }) {
   const router = useRouter();
   
   // Client-side state for filters and pagination
@@ -23,38 +23,8 @@ export function RacesAllPageClient({ initialViewData }: { initialViewData: unkno
   const [showFilters, setShowFilters] = useState(false);
   const [showFilterModal, setShowFilterModal] = useState(false);
 
-  // Data state
-  const [pageData, setPageData] = useState<RacesViewData | null>(initialViewData as RacesViewData);
-  const [isLoading, setIsLoading] = useState(!initialViewData);
-  const [error, setError] = useState<Error | null>(null);
-
-  // Fetch data
-  const fetchData = useCallback(async () => {
-    if (pageData && !isLoading) return; // Already have data from server
-    setIsLoading(true);
-    setError(null);
-    
-    try {
-      const result = await RacesAllPageQuery.execute();
-      
-      if (result.isErr()) {
-        throw new globalThis.Error('Failed to fetch races');
-      }
-      
-      setPageData(result.unwrap() as unknown as RacesViewData);
-    } catch (err) {
-      setError(err instanceof globalThis.Error ? err : new globalThis.Error('Unknown error'));
-    } finally {
-      setIsLoading(false);
-    }
-  }, [pageData, isLoading]);
-
-  // Fetch on mount if no initial data
-  useEffect(() => {
-    if (!initialViewData) {
-      fetchData();
-    }
-  }, [initialViewData, fetchData]);
+  // Use React Query hook
+  const { data: pageData, isLoading, error, refetch } = useAllRacesPageData(initialViewData);
 
   // Transform data
   const races: RaceViewData[] = pageData?.races ?? [];
@@ -102,8 +72,8 @@ export function RacesAllPageClient({ initialViewData }: { initialViewData: unkno
     <StatefulPageWrapper
       data={pageData}
       isLoading={isLoading}
-      error={error}
-      retry={fetchData}
+      error={error as Error | null}
+      retry={refetch}
       Template={() => pageData ? (
         <RacesAllTemplate
           viewData={pageData}