From 1831898001dd4c14f1c9d6b0a3555d3ba619fcc5 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 15 May 2026 22:25:28 +0000 Subject: [PATCH] Address code review: shared tz hook, short abbrev, sort fix, dead type cleanup, test update - Extract timezone detection into useLocalTimezone hook to avoid duplication across DraftSetupSection and Step3DraftSettings - Use Intl short timezone abbreviation (e.g. "EST") instead of raw IANA name, matching DraftInfoCard's existing pattern - Sort review step sport list by season name instead of sport.name so the visible order matches the displayed text - Remove unused scoringType and year fields from SportsSection's local type - Update SportsSection tests to use realistic season names and the new display format https://claude.ai/code/session_01GtJowGruAc1A4jURkSDVjX --- .../league/settings/DraftSetupSection.tsx | 7 ++----- app/components/league/settings/SportsSection.tsx | 2 -- .../settings/__tests__/SportsSection.test.tsx | 16 +++++----------- app/hooks/useLocalTimezone.ts | 10 ++++++++++ app/routes/leagues/new.tsx | 8 +++----- 5 files changed, 20 insertions(+), 23 deletions(-) create mode 100644 app/hooks/useLocalTimezone.ts diff --git a/app/components/league/settings/DraftSetupSection.tsx b/app/components/league/settings/DraftSetupSection.tsx index 1eb2c0b..5f44905 100644 --- a/app/components/league/settings/DraftSetupSection.tsx +++ b/app/components/league/settings/DraftSetupSection.tsx @@ -1,5 +1,5 @@ -import { useState, useEffect } from "react"; import { Swords, CalendarIcon } from "lucide-react"; +import { useLocalTimezone } from "~/hooks/useLocalTimezone"; import { format } from "date-fns"; import { Label } from "~/components/ui/label"; import { Input } from "~/components/ui/input"; @@ -65,10 +65,7 @@ export function DraftSetupSection({ onOvernightTimezoneChange: (v: string) => void; commishTimezone: string | null; }) { - const [localTz, setLocalTz] = useState(""); - useEffect(() => { - setLocalTz(Intl.DateTimeFormat().resolvedOptions().timeZone); - }, []); + const localTz = useLocalTimezone(); return ( { const user = userEvent.setup(); render(); - const mlbCheckbox = screen.getByRole("checkbox", { name: /mlb - 2025 season \(2025\)/i }); + const mlbCheckbox = screen.getByRole("checkbox", { name: /2025 mlb season/i }); expect(mlbCheckbox).not.toBeChecked(); - await user.click(screen.getByText("MLB - 2025 Season (2025)")); + await user.click(screen.getByText("2025 MLB Season")); expect(mlbCheckbox).toBeChecked(); }); @@ -95,7 +89,7 @@ describe("SportsSection", () => { const handleSubmit = vi.fn(); render(); - await user.click(screen.getByText("MLB - 2025 Season (2025)")); + await user.click(screen.getByText("2025 MLB Season")); await user.click(screen.getByRole("button", { name: "Save" })); expect(handleSubmit).toHaveBeenCalledWith(["nba-2025", "mlb-2025"]); diff --git a/app/hooks/useLocalTimezone.ts b/app/hooks/useLocalTimezone.ts new file mode 100644 index 0000000..ef1ae10 --- /dev/null +++ b/app/hooks/useLocalTimezone.ts @@ -0,0 +1,10 @@ +import { useState, useEffect } from "react"; + +export function useLocalTimezone() { + const [tz, setTz] = useState(""); + useEffect(() => { + const parts = Intl.DateTimeFormat(undefined, { timeZoneName: "short" }).formatToParts(new Date()); + setTz(parts.find((p) => p.type === "timeZoneName")?.value ?? ""); + }, []); + return tz; +} diff --git a/app/routes/leagues/new.tsx b/app/routes/leagues/new.tsx index ed64ea3..43f7ede 100644 --- a/app/routes/leagues/new.tsx +++ b/app/routes/leagues/new.tsx @@ -25,6 +25,7 @@ import { Checkbox } from "~/components/ui/checkbox"; import { cn } from "~/lib/utils"; import { parseDraftSpeed, formatTime12h } from "~/lib/draft-timer"; import { TIMEZONE_OPTIONS } from "~/components/league/TimezoneSelect"; +import { useLocalTimezone } from "~/hooks/useLocalTimezone"; import { saveWizardState, buildFormDataFromSnapshot } from "~/lib/wizard-state"; import { type ScoringRules, DEFAULT_SCORING_RULES } from "~/lib/scoring-types"; import { SportIcon } from "~/components/league/SportIcon"; @@ -659,10 +660,7 @@ function Step3DraftSettings({ const { draftInitialTime, draftIncrementTime } = parseDraftSpeed(draftSpeed, timerMode); const showOvernightPause = draftInitialTime >= 3600 || draftIncrementTime >= 600; - const [localTz, setLocalTz] = useState(""); - useEffect(() => { - setLocalTz(Intl.DateTimeFormat().resolvedOptions().timeZone); - }, []); + const localTz = useLocalTimezone(); useEffect(() => { if (!showOvernightPause) setOvernightMode("none"); @@ -917,7 +915,7 @@ function StepReview({ {uniqueSportsCount} sport{uniqueSportsCount !== 1 ? "s" : ""}

    - {selectedSeasons.toSorted((a, b) => a.sport.name.localeCompare(b.sport.name)).map((s) => ( + {selectedSeasons.toSorted((a, b) => a.name.localeCompare(b.name)).map((s) => (
  • {s.name}