website refactor

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

@@ -1,110 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { StatefulPageWrapper } from '@/ui/StatefulPageWrapper';
-import { RacesAllTemplate } from '@/templates/RacesAllTemplate';
-import { useAllRacesPageData } from '@/hooks/race/useAllRacesPageData';
-import { type RacesViewData, type RaceViewData } from '@/lib/view-data/RacesViewData';
-import { Flag } from 'lucide-react';
-
-import { routes } from '@/lib/routing/RouteConfig';
-
-const ITEMS_PER_PAGE = 10;
-
-export function RacesAllPageClient({ initialViewData }: { initialViewData: RacesViewData | null }) {
-  const router = useRouter();
-  
-  // Client-side state for filters and pagination
-  const [currentPage, setCurrentPage] = useState(1);
-  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);
-
-  // Use React Query hook
-  const { data: pageData, isLoading, error, refetch } = useAllRacesPageData(initialViewData);
-
-  // Transform data
-  const races: RaceViewData[] = pageData?.races ?? [];
-
-  // Filter and paginate (Note: This should be done by API per contract)
-  const filteredRaces = races.filter((race: RaceViewData) => {
-    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);
-  const paginatedRaces = filteredRaces.slice((currentPage - 1) * ITEMS_PER_PAGE, currentPage * ITEMS_PER_PAGE);
-
-  // Actions
-  const handleRaceClick = (raceId: string) => {
-    router.push(routes.race.detail(raceId));
-  };
-
-  const handleLeagueClick = (leagueId: string) => {
-    router.push(routes.league.detail(leagueId));
-  };
-
-  const handlePageChange = (page: number) => {
-    setCurrentPage(page);
-  };
-
-  return (
-    <StatefulPageWrapper
-      data={pageData}
-      isLoading={isLoading}
-      error={error as Error | null}
-      retry={refetch}
-      Template={() => pageData ? (
-        <RacesAllTemplate
-          viewData={pageData}
-          races={paginatedRaces}
-          totalFilteredCount={filteredRaces.length}
-          isLoading={false}
-          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}
-        />
-      ) : null}
-      loading={{ variant: 'skeleton', message: 'Loading races...' }}
-      errorConfig={{ variant: 'full-screen' }}
-      empty={{
-        icon: Flag,
-        title: 'No races found',
-        description: 'There are no races available at the moment',
-      }}
-    />
-  );
-}

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

@@ -1,6 +1,6 @@
 import { notFound } from 'next/navigation';
 import { RacesAllPageQuery } from '@/lib/page-queries/races/RacesAllPageQuery';
-import { RacesAllPageClient } from './RacesAllPageClient';
+import { RacesAllPageClient } from '@/client-wrapper/RacesAllPageClient';
 
 export default async function Page() {
   // Execute the PageQuery