fix e2e

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

@@ -0,0 +1,99 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { RacesAllTemplate, StatusFilter } from '@/templates/RacesAllTemplate';
+import { useAllRacesPageData } from '@/hooks/useRaceService';
+
+const ITEMS_PER_PAGE = 10;
+
+export function RacesAllInteractive() {
+  const router = useRouter();
+  
+  // Fetch data
+  const { data: pageData, isLoading } = useAllRacesPageData();
+  
+  // Pagination
+  const [currentPage, setCurrentPage] = useState(1);
+  
+  // Filters
+  const [statusFilter, setStatusFilter] = useState<StatusFilter>('all');
+  const [leagueFilter, setLeagueFilter] = useState<string>('all');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [showFilters, setShowFilters] = useState(false);
+  const [showFilterModal, setShowFilterModal] = useState(false);
+
+  // Transform data for template
+  const races = pageData?.races.map(race => ({
+    id: race.id,
+    track: race.track,
+    car: race.car,
+    scheduledAt: race.scheduledAt,
+    status: race.status as 'scheduled' | 'running' | 'completed' | 'cancelled',
+    sessionType: 'race',
+    leagueId: race.leagueId,
+    leagueName: race.leagueName,
+    strengthOfField: race.strengthOfField ?? undefined,
+  })) ?? [];
+
+  // Calculate total pages
+  const filteredRaces = races.filter(race => {
+    if (statusFilter !== 'all' && race.status !== statusFilter) {
+      return false;
+    }
+
+    if (leagueFilter !== 'all' && race.leagueId !== leagueFilter) {
+      return false;
+    }
+
+    if (searchQuery) {
+      const query = searchQuery.toLowerCase();
+      const matchesTrack = race.track.toLowerCase().includes(query);
+      const matchesCar = race.car.toLowerCase().includes(query);
+      const matchesLeague = race.leagueName?.toLowerCase().includes(query);
+      if (!matchesTrack && !matchesCar && !matchesLeague) {
+        return false;
+      }
+    }
+
+    return true;
+  });
+
+  const totalPages = Math.ceil(filteredRaces.length / ITEMS_PER_PAGE);
+
+  // Actions
+  const handleRaceClick = (raceId: string) => {
+    router.push(`/races/${raceId}`);
+  };
+
+  const handleLeagueClick = (leagueId: string) => {
+    router.push(`/leagues/${leagueId}`);
+  };
+
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+
+  return (
+    <RacesAllTemplate
+      races={races}
+      isLoading={isLoading}
+      currentPage={currentPage}
+      totalPages={totalPages}
+      itemsPerPage={ITEMS_PER_PAGE}
+      onPageChange={handlePageChange}
+      statusFilter={statusFilter}
+      setStatusFilter={setStatusFilter}
+      leagueFilter={leagueFilter}
+      setLeagueFilter={setLeagueFilter}
+      searchQuery={searchQuery}
+      setSearchQuery={setSearchQuery}
+      showFilters={showFilters}
+      setShowFilters={setShowFilters}
+      showFilterModal={showFilterModal}
+      setShowFilterModal={setShowFilterModal}
+      onRaceClick={handleRaceClick}
+      onLeagueClick={handleLeagueClick}
+    />
+  );
+}