Use one time-range formatter everywhere #65

New issue

Open

opened 2026-10-03 19:44:42 +00:00 by jalenluorion · 0 comments

jalenluorion commented

2026-10-03 19:44:42 +00:00

Member

What's wrong
Two helpers format an event's time range, and they disagree. The manager dashboard shows "Mon, Feb 16 [middle dot] 6:30 PM - 7:45 PM" while Explore and the event popover show "Mon, Feb 16, 6:30 - 7:45 PM". The first also uses a non-ASCII middle dot.

How to reproduce

Open an event in Explore or the calendar popover and note its time.
Open /manager, select the same organization, and find the event in its table.
The same time is written two different ways.

Expected
One helper, one format, used everywhere.

Where to look

web/src/app/utils/formatters.ts: formatDateRange, used by ManagerDashboard.tsx and EventCard.tsx.
web/src/app/components/EventCard.tsx: nothing imports it; delete it.
web/src/app/utils/dateService.ts: formatTimeRange, used by EventPopover.tsx, ModalEvent.tsx and SearchResultSidebar.tsx. Keep this one.
"Explore shows event times in your timezone, not the event's" adds a timeZone argument to the same function; coordinate.

Done when

formatters.ts and EventCard.tsx are gone, and ManagerDashboard uses formatTimeRange.
Unit tests cover same-day, AM to PM, and multi-day ranges.
grep -rn "formatDateRange" web/src finds nothing.

**What's wrong** Two helpers format an event's time range, and they disagree. The manager dashboard shows "Mon, Feb 16 [middle dot] 6:30 PM - 7:45 PM" while Explore and the event popover show "Mon, Feb 16, 6:30 - 7:45 PM". The first also uses a non-ASCII middle dot. **How to reproduce** 1. Open an event in Explore or the calendar popover and note its time. 2. Open /manager, select the same organization, and find the event in its table. 3. The same time is written two different ways. **Expected** One helper, one format, used everywhere. **Where to look** - `web/src/app/utils/formatters.ts`: `formatDateRange`, used by `ManagerDashboard.tsx` and `EventCard.tsx`. - `web/src/app/components/EventCard.tsx`: nothing imports it; delete it. - `web/src/app/utils/dateService.ts`: `formatTimeRange`, used by `EventPopover.tsx`, `ModalEvent.tsx` and `SearchResultSidebar.tsx`. Keep this one. - "Explore shows event times in your timezone, not the event's" adds a `timeZone` argument to the same function; coordinate. **Done when** - [ ] `formatters.ts` and `EventCard.tsx` are gone, and ManagerDashboard uses `formatTimeRange`. - [ ] Unit tests cover same-day, AM to PM, and multi-day ranges. - [ ] `grep -rn "formatDateRange" web/src` finds nothing.

jalenluorion added this to the Phase 2 milestone

2026-10-03 19:44:42 +00:00

jalenluorion added the

frontend

chore

intermediate

labels

2026-10-03 19:44:42 +00:00

jalenluorion added this to the CMUCal project

2026-10-03 19:45:09 +00:00