refactor

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

@@ -7,12 +7,8 @@ import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
 import Heading from '@/components/ui/Heading';
 import Breadcrumbs from '@/components/layout/Breadcrumbs';
-import { getGetAllRacesPageDataUseCase } from '@/lib/di-container';
-import { AllRacesPagePresenter } from '@/lib/presenters/AllRacesPagePresenter';
-import type {
-  AllRacesPageViewModel,
-  AllRacesListItemViewModel,
-} from '@core/racing/application/presenters/IAllRacesPagePresenter';
+import { apiClient } from '@/lib/apiClient';
+import type { RacesPageDataViewModel, RacesPageDataRaceViewModel } from '@/lib/apiClient';
 import {
   Calendar,
   Clock,
@@ -39,7 +35,7 @@ export default function AllRacesPage() {
   const router = useRouter();
   const searchParams = useSearchParams();
 
-  const [pageData, setPageData] = useState<AllRacesPageViewModel | null>(null);
+  const [pageData, setPageData] = useState<RacesPageDataViewModel | null>(null);
   const [loading, setLoading] = useState(true);
 
   // Pagination
@@ -53,10 +49,7 @@ export default function AllRacesPage() {
 
   const loadRaces = async () => {
     try {
-      const useCase = getGetAllRacesPageDataUseCase();
-      const presenter = new AllRacesPagePresenter();
-      await useCase.execute(undefined, presenter);
-      const viewModel = presenter.getViewModel();
+      const viewModel = await apiClient.races.getAllPageData();
       setPageData(viewModel);
     } catch (err) {
       console.error('Failed to load races:', err);
@@ -69,7 +62,7 @@ export default function AllRacesPage() {
     void loadRaces();
   }, []);
 
-  const races: AllRacesListItemViewModel[] = pageData?.races ?? [];
+  const races: RacesPageDataRaceViewModel[] = pageData?.races ?? [];
 
   const filteredRaces = useMemo(() => {
     return races.filter(race => {
@@ -244,11 +237,14 @@ export default function AllRacesPage() {
                 className="px-4 py-2 bg-deep-graphite border border-charcoal-outline rounded-lg text-white text-sm focus:outline-none focus:ring-2 focus:ring-primary-blue"
               >
                 <option value="all">All Leagues</option>
-                {pageData?.filters.leagues.map((league) => (
-                  <option key={league.id} value={league.id}>
-                    {league.name}
-                  </option>
-                ))}
+                {pageData && [...new Set(pageData.races.map(r => r.leagueId))].map(leagueId => {
+                  const race = pageData.races.find(r => r.leagueId === leagueId);
+                  return race ? (
+                    <option key={leagueId} value={leagueId}>
+                      {race.leagueName}
+                    </option>
+                  ) : null;
+                })}
               </select>
 
               {/* Clear Filters */}