website refactor

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

@@ -1,30 +1,69 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import { StatefulPageWrapper } from '@/components/shared/state/StatefulPageWrapper';
-import { RacesAllTemplate, StatusFilter } from '@/templates/RacesAllTemplate';
-import { useAllRacesPageData } from "@/lib/hooks/race/useAllRacesPageData";
+import { RacesAllTemplate } from '@/templates/RacesAllTemplate';
+import { RacesAllPageQuery } from '@/lib/page-queries/races/RacesAllPageQuery';
 import { Flag } from 'lucide-react';
 
 const ITEMS_PER_PAGE = 10;
 
+interface Race {
+  id: string;
+  track: string;
+  car: string;
+  scheduledAt: string;
+  status: 'scheduled' | 'running' | 'completed' | 'cancelled';
+  sessionType: string;
+  leagueId?: string;
+  leagueName?: string;
+  strengthOfField?: number;
+}
+
 export default function RacesAllPage() {
   const router = useRouter();
   
   // Client-side state for filters and pagination
   const [currentPage, setCurrentPage] = useState(1);
-  const [statusFilter, setStatusFilter] = useState<StatusFilter>('all');
+  const [statusFilter, setStatusFilter] = useState<'scheduled' | 'running' | 'completed' | 'cancelled' | 'all'>('all');
   const [leagueFilter, setLeagueFilter] = useState<string>('all');
   const [searchQuery, setSearchQuery] = useState('');
   const [showFilters, setShowFilters] = useState(false);
   const [showFilterModal, setShowFilterModal] = useState(false);
 
-  // Fetch data using domain hook
-  const { data: pageData, isLoading, error, refetch } = useAllRacesPageData();
+  // Data state
+  const [pageData, setPageData] = useState<any>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<Error | null>(null);
 
-  // Transform data for template
-  const races = pageData?.races.map((race) => ({
+  // Fetch data
+  const fetchData = async () => {
+    setIsLoading(true);
+    setError(null);
+    
+    try {
+      const result = await RacesAllPageQuery.execute();
+      
+      if (result.isErr()) {
+        throw new Error('Failed to fetch races');
+      }
+      
+      setPageData(result.unwrap());
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error('Unknown error'));
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Fetch on mount
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  // Transform data
+  const races: Race[] = pageData?.races.map((race: any) => ({
     id: race.id,
     track: race.track,
     car: race.car,
@@ -36,8 +75,8 @@ export default function RacesAllPage() {
     strengthOfField: race.strengthOfField ?? undefined,
   })) ?? [];
 
-  // Calculate total pages
-  const filteredRaces = races.filter((race) => {
+  // Filter and paginate (Note: This should be done by API per contract)
+  const filteredRaces = races.filter((race: Race) => {
     if (statusFilter !== 'all' && race.status !== statusFilter) {
       return false;
     }
@@ -60,6 +99,7 @@ export default function RacesAllPage() {
   });
 
   const totalPages = Math.ceil(filteredRaces.length / ITEMS_PER_PAGE);
+  const paginatedRaces = filteredRaces.slice((currentPage - 1) * ITEMS_PER_PAGE, currentPage * ITEMS_PER_PAGE);
 
   // Actions
   const handleRaceClick = (raceId: string) => {
@@ -79,10 +119,10 @@ export default function RacesAllPage() {
       data={pageData}
       isLoading={isLoading}
       error={error}
-      retry={refetch}
-      Template={({ data }) => (
+      retry={fetchData}
+      Template={({ data: _data }) => (
         <RacesAllTemplate
-          races={races}
+          races={paginatedRaces}
           isLoading={false}
           currentPage={currentPage}
           totalPages={totalPages}