website refactor

apps/website/client-wrapper/RacesPageClient.tsx

@@ -2,30 +2,54 @@
 
 import { useState, useMemo } from 'react';
 import { useRouter } from 'next/navigation';
-import { RacesTemplate, type TimeFilter, type RaceStatusFilter } from '@/templates/RacesTemplate';
+import { RacesIndexTemplate } from '@/templates/RacesIndexTemplate';
 import type { RacesViewData } from '@/lib/view-data/RacesViewData';
 import { ClientWrapperProps } from '@/lib/contracts/components/ComponentContracts';
 
 export function RacesPageClient({ viewData }: ClientWrapperProps<RacesViewData>) {
   const router = useRouter();
-  const [statusFilter, setStatusFilter] = useState<RaceStatusFilter>('all');
+  const [statusFilter, setStatusFilter] = useState<string>('all');
   const [leagueFilter, setLeagueFilter] = useState<string>('all');
-  const [timeFilter, setTimeFilter] = useState<TimeFilter>('upcoming');
+  const [timeFilter, setTimeFilter] = useState<string>('upcoming');
   const [showFilterModal, setShowFilterModal] = useState(false);
 
   const filteredRaces = useMemo(() => {
+    const now = new Date();
     return viewData.races.filter((race) => {
-      if (statusFilter !== 'all' && race.status !== statusFilter) return false;
+      // Status filter: case-insensitive match
+      if (statusFilter !== 'all' && race.status.toLowerCase() !== statusFilter.toLowerCase()) return false;
+      
+      // League filter
       if (leagueFilter !== 'all' && race.leagueId !== leagueFilter) return false;
-      if (timeFilter === 'upcoming' && !race.isUpcoming) return false;
-      if (timeFilter === 'live' && !race.isLive) return false;
-      if (timeFilter === 'past' && !race.isPast) return false;
+      
+      // Time filter: ensure we are checking the correct flags
+      // Note: we also check the actual date to be safe against stale API flags
+      const scheduledAt = new Date(race.scheduledAt);
+      const isActuallyUpcoming = scheduledAt > now && race.status.toLowerCase() === 'scheduled';
+      const isActuallyLive = race.status.toLowerCase() === 'running';
+      const isActuallyPast = scheduledAt < now || race.status.toLowerCase() === 'completed' || race.status.toLowerCase() === 'cancelled';
+
+      if (timeFilter === 'upcoming' && !isActuallyUpcoming) return false;
+      if (timeFilter === 'live' && !isActuallyLive) return false;
+      if (timeFilter === 'past' && !isActuallyPast) return false;
+      
       return true;
     });
   }, [viewData.races, statusFilter, leagueFilter, timeFilter]);
 
+  const nextUpRace = useMemo(() => {
+    const now = new Date();
+    // Find the first upcoming race in the filtered list
+    return filteredRaces.find(r => new Date(r.scheduledAt) > now && r.status.toLowerCase() === 'scheduled');
+  }, [filteredRaces]);
+
   const racesByDate = useMemo(() => {
     const grouped = new Map<string, typeof filteredRaces[0][]>();
+    
+    // If we have a "Next Up" race and we are in upcoming view, we might want to exclude it from the list 
+    // to avoid duplication, but usually it's better to keep the list complete.
+    // For this redesign, we keep the list complete for scanning.
+    
     filteredRaces.forEach((race) => {
       const dateKey = race.scheduledAt.split('T')[0]!;
       if (!grouped.has(dateKey)) {
@@ -33,19 +57,23 @@ export function RacesPageClient({ viewData }: ClientWrapperProps<RacesViewData>)
       }
       grouped.get(dateKey)!.push(race);
     });
-    return Array.from(grouped.entries()).map(([dateKey, dayRaces]) => ({
-      dateKey,
-      dateLabel: dayRaces[0]?.scheduledAtLabel || '',
-      races: dayRaces,
-    }));
-  }, [filteredRaces]);
+
+    return Array.from(grouped.entries())
+      .sort(([a], [b]) => timeFilter === 'past' ? b.localeCompare(a) : a.localeCompare(b))
+      .map(([dateKey, dayRaces]) => ({
+        dateKey,
+        dateLabel: dayRaces[0]?.scheduledAtLabel || '',
+        races: dayRaces,
+      }));
+  }, [filteredRaces, timeFilter]);
 
   return (
-    <RacesTemplate
+    <RacesIndexTemplate
       viewData={{
         ...viewData,
         races: filteredRaces,
         racesByDate,
+        nextUpRace,
       }}
       statusFilter={statusFilter}
       setStatusFilter={setStatusFilter}
@@ -56,9 +84,6 @@ export function RacesPageClient({ viewData }: ClientWrapperProps<RacesViewData>)
       showFilterModal={showFilterModal}
       setShowFilterModal={setShowFilterModal}
       onRaceClick={(id) => router.push(`/races/${id}`)}
-      onLeagueClick={(id) => router.push(`/leagues/${id}`)}
-      onWithdraw={(id) => console.log('Withdraw', id)}
-      onCancel={(id) => console.log('Cancel', id)}
     />
   );
 }