website refactor

apps/website/templates/RacesAllTemplate.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useMemo, useEffect } from 'react';
+import React from 'react';
 import { Card } from '@/ui/Card';
 import { Button } from '@/ui/Button';
 import { Heading } from '@/ui/Heading';
@@ -26,6 +26,8 @@ export type StatusFilter = 'scheduled' | 'running' | 'completed' | 'cancelled' |
 
 interface RacesAllTemplateProps {
   viewData: RacesViewData;
+  races: RacesViewData['races'];
+  totalFilteredCount: number;
   isLoading: boolean;
   // Pagination
   currentPage: number;
@@ -51,6 +53,8 @@ interface RacesAllTemplateProps {
 
 export function RacesAllTemplate({
   viewData,
+  races,
+  totalFilteredCount,
   isLoading,
   currentPage,
   totalPages,
@@ -68,44 +72,6 @@ export function RacesAllTemplate({
   setShowFilterModal,
   onRaceClick,
 }: RacesAllTemplateProps) {
-  const { races } = viewData;
-
-  // Filter races
-  const filteredRaces = useMemo(() => {
-    return 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;
-    });
-  }, [races, statusFilter, leagueFilter, searchQuery]);
-
-  // Paginate
-  const paginatedRaces = useMemo(() => {
-    const start = (currentPage - 1) * itemsPerPage;
-    return filteredRaces.slice(start, start + itemsPerPage);
-  }, [filteredRaces, currentPage, itemsPerPage]);
-
-  // Reset page when filters change
-  useEffect(() => {
-    onPageChange(1);
-  }, [statusFilter, leagueFilter, searchQuery]);
-
   const breadcrumbItems = [
     { label: 'Races', href: '/races' },
     { label: 'All Races' },
@@ -140,7 +106,7 @@ export function RacesAllTemplate({
               All Races
             </Heading>
             <Text size="sm" color="text-gray-400" block mt={1}>
-              {filteredRaces.length} race{filteredRaces.length !== 1 ? 's' : ''} found
+              {totalFilteredCount} race{totalFilteredCount !== 1 ? 's' : ''} found
             </Text>
           </Box>
           
@@ -170,16 +136,16 @@ export function RacesAllTemplate({
         )}
 
         {/* Race List */}
-        {paginatedRaces.length === 0 ? (
+        {races.length === 0 ? (
           <Card>
             <Stack align="center" py={12} gap={4}>
               <Surface variant="muted" rounded="full" padding={4}>
                 <Icon icon={Calendar} size={8} color="#525252" />
               </Surface>
-              <Box style={{ textAlign: 'center' }}>
+              <Box textAlign="center">
                 <Text weight="medium" color="text-white" block mb={1}>No races found</Text>
                 <Text size="sm" color="text-gray-500">
-                  {races.length === 0 
+                  {viewData.races.length === 0 
                     ? 'No races have been scheduled yet'
                     : 'Try adjusting your search or filters'}
                 </Text>
@@ -188,8 +154,8 @@ export function RacesAllTemplate({
           </Card>
         ) : (
           <Stack gap={3}>
-            {paginatedRaces.map(race => (
-              <RaceListItem key={race.id} race={race as any} onClick={onRaceClick} />
+            {races.map(race => (
+              <RaceListItem key={race.id} race={race} onClick={onRaceClick} />
             ))}
           </Stack>
         )}
@@ -198,7 +164,7 @@ export function RacesAllTemplate({
         <Pagination
           currentPage={currentPage}
           totalPages={totalPages}
-          totalItems={filteredRaces.length}
+          totalItems={totalFilteredCount}
           itemsPerPage={itemsPerPage}
           onPageChange={onPageChange}
         />