From 311b8581adb5802c318473b215150cdd06027e16 Mon Sep 17 00:00:00 2001
From: yohlo <yohlerkyle@gmail.com>
Date: Wed, 20 Aug 2025 22:50:46 -0500
Subject: [PATCH] simplify date display and fix invalids

---
 .../components/tournament-card.tsx            | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/features/tournaments/components/tournament-card.tsx b/src/features/tournaments/components/tournament-card.tsx
index 7d1940e..cc6053b 100644
--- a/src/features/tournaments/components/tournament-card.tsx
+++ b/src/features/tournaments/components/tournament-card.tsx
@@ -10,12 +10,17 @@ interface TournamentCardProps {
 
 export const TournamentCard = ({ tournament }: TournamentCardProps) => {
   const navigate = useNavigate({ from: '/tournaments/$tournamentId' })
-  const date = useMemo(() => new Date(tournament.start_time), [tournament?.start_time])
-  const year = useMemo(() => date.getFullYear(), [date])
-  const month = useMemo(() => date.getMonth(), [date])
-  const monthName = useMemo(() => new Date(date.getFullYear(), month, 1).toLocaleString('default', { month: 'long' }), [date])
-  const day = useMemo(() => date.getDate(), [date])
-  
+  const displayDate = useMemo(() => {
+    if (!tournament.start_time) return null
+    const date = new Date(tournament.start_time)
+    if (isNaN(date.getTime())) return null
+    return date.toLocaleDateString('en-US', { 
+      year: 'numeric', 
+      month: 'long', 
+      day: 'numeric' 
+    })
+  }, [tournament.start_time])
+
   return (
     <Card shadow="sm" padding="lg" radius="md" withBorder style={{ cursor: 'pointer' }} onClick={() => navigate({ to: `/tournaments/${tournament.id}` })}>
       <Stack>
@@ -29,7 +34,7 @@ export const TournamentCard = ({ tournament }: TournamentCardProps) => {
             />
             <Stack ta='center' mx='auto' gap='0'>
               <Text size='lg' fw={800}>{tournament.name} <CaretRightIcon size={12} weight='bold' /></Text>
-              <Text c='dimmed' size='xs' fw={600}>{monthName} {day}, {year}</Text>
+              {displayDate && <Text c='dimmed' size='xs' fw={600}>{displayDate}</Text>}
               <Stack gap={4} mt={4}>
                 { /* TODO: Add medalists when data is available */}
                 <Badge variant='dot' color='gold'>Longer Team Name Goes Here</Badge>