diff --git a/app/components/sport-season/EventSchedule.tsx b/app/components/sport-season/EventSchedule.tsx
index 1bf4b50..64f4cd8 100644
--- a/app/components/sport-season/EventSchedule.tsx
+++ b/app/components/sport-season/EventSchedule.tsx
@@ -1,4 +1,5 @@
-import { format, parseISO } from "date-fns";
+import { format } from "date-fns";
+import { useHasMounted } from "~/hooks/useHasMounted";
import { Link } from "react-router";
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
import { Badge } from "~/components/ui/badge";
@@ -25,28 +26,13 @@ interface EventScheduleProps {
function formatEventDate(dateStr: string | null | undefined): string {
if (!dateStr) return "Date TBD";
try {
- // eventDate is stored as a date string "YYYY-MM-DD"
- return format(parseISO(dateStr), "MMM d, yyyy");
+ const [year, month, day] = dateStr.split("-").map(Number);
+ return format(new Date(year, month - 1, day), "MMM d, yyyy");
} catch {
return dateStr;
}
}
-/**
- * Returns the display date for an event.
- * Prefers eventStartsAt (a full UTC timestamp → correct local date) over
- * eventDate (the UTC calendar date, which is off by one day for late-night
- * events in UTC-negative timezones like PDT).
- */
-function getDisplayDate(event: Pick
+ {isMounted && gameDate && ( +
{gameDate.toLocaleTimeString(undefined, { hour: "numeric", minute: "2-digit", diff --git a/app/hooks/useHasMounted.ts b/app/hooks/useHasMounted.ts new file mode 100644 index 0000000..32585a3 --- /dev/null +++ b/app/hooks/useHasMounted.ts @@ -0,0 +1,7 @@ +import { useSyncExternalStore } from "react"; + +const subscribe = () => () => {}; + +export function useHasMounted(): boolean { + return useSyncExternalStore(subscribe, () => true, () => false); +} diff --git a/app/lib/date-utils.ts b/app/lib/date-utils.ts index 3aeddcf..1c69328 100644 --- a/app/lib/date-utils.ts +++ b/app/lib/date-utils.ts @@ -16,7 +16,7 @@ * clear the field. Always write the result to a separate hidden input, not back to * the datetime-local input itself. */ -import { format, parseISO } from "date-fns"; +import { format } from "date-fns"; /** * Format a YYYY-MM-DD date string for display (e.g. "Apr 9"). @@ -25,7 +25,8 @@ import { format, parseISO } from "date-fns"; export function formatEventDate(dateStr: string | null | undefined): string | null { if (!dateStr) return null; try { - return format(parseISO(dateStr), "MMM d"); + const [year, month, day] = dateStr.split("-").map(Number); + return format(new Date(year, month - 1, day), "MMM d"); } catch { return null; }