From 5642359280a2cc662c377be1fcb7127bcbd707e2 Mon Sep 17 00:00:00 2001 From: idityaGE Date: Fri, 7 Mar 2025 16:43:49 +0000 Subject: [PATCH 1/6] issue#1034: Enhance date formatting in Home component to support date ranges --- frontend/__tests__/unit/pages/Home.test.tsx | 9 ++++---- frontend/src/pages/Home.tsx | 4 ++-- frontend/src/utils/dateFormatter.ts | 24 +++++++++++++++++++++ 3 files changed, 31 insertions(+), 6 deletions(-) diff --git a/frontend/__tests__/unit/pages/Home.test.tsx b/frontend/__tests__/unit/pages/Home.test.tsx index fad8930c17..7be3f9f6f9 100644 --- a/frontend/__tests__/unit/pages/Home.test.tsx +++ b/frontend/__tests__/unit/pages/Home.test.tsx @@ -4,7 +4,7 @@ import { mockAlgoliaData, mockGraphQLData } from '@unit/data/mockHomeData' import { fetchAlgoliaData } from 'api/fetchAlgoliaData' import { toast } from 'hooks/useToast' import { Home } from 'pages' -import { formatDate } from 'utils/dateFormatter' +import { formatDate, formatDateRange } from 'utils/dateFormatter' import { render } from 'wrappers/testUtil' jest.mock('hooks/useToast', () => ({ @@ -161,9 +161,10 @@ describe('Home', () => { expect(screen.getByText('Upcoming Events')).toBeInTheDocument() mockGraphQLData.upcomingEvents.forEach((event) => { expect(screen.getByText(event.name)).toBeInTheDocument() - expect( - screen.getByText(`${formatDate(event.startDate)} - ${formatDate(event.endDate)}`) - ).toBeInTheDocument() + const expectedDateText = event.endDate && event.startDate != event.endDate + ? formatDateRange(event.startDate, event.endDate) + : formatDate(event.startDate); + expect(screen.getByText(expectedDateText)).toBeInTheDocument() }) }) }) diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx index 41aee67a00..4fe37a9070 100644 --- a/frontend/src/pages/Home.tsx +++ b/frontend/src/pages/Home.tsx @@ -18,7 +18,7 @@ import { ChapterTypeAlgolia } from 'types/chapter' import { EventType } from 'types/event' import { MainPageData } from 'types/home' import { capitalize } from 'utils/capitalize' -import { formatDate } from 'utils/dateFormatter' +import { formatDate, formatDateRange } from 'utils/dateFormatter' import AnimatedCounter from 'components/AnimatedCounter' import ChapterMap from 'components/ChapterMap' import ItemCardList from 'components/ItemCardList' @@ -148,7 +148,7 @@ export default function Home() { {event.endDate && event.startDate != event.endDate - ? `${formatDate(event.startDate)} - ${formatDate(event.endDate)}` + ? formatDateRange(event.startDate, event.endDate) : formatDate(event.startDate)} diff --git a/frontend/src/utils/dateFormatter.ts b/frontend/src/utils/dateFormatter.ts index 63f8371a59..7b1ec602e1 100644 --- a/frontend/src/utils/dateFormatter.ts +++ b/frontend/src/utils/dateFormatter.ts @@ -14,3 +14,27 @@ export const formatDate = (input: number | string) => { day: 'numeric', }) } + +export const formatDateRange = (startDate: number | string, endDate: number | string) => { + const start = typeof startDate === 'number' ? new Date(startDate * 1000) : new Date(startDate) + const end = typeof endDate === 'number' ? new Date(endDate * 1000) : new Date(endDate) + + if (isNaN(start.getTime()) || isNaN(end.getTime())) { + throw new Error('Invalid date') + } + + // Check if dates are in the same month and year + const sameMonth = start.getMonth() === end.getMonth() && start.getFullYear() === end.getFullYear() + const sameYear = start.getFullYear() === end.getFullYear() + + if (sameMonth) { + // Format as "Month Day - Day, Year" (e.g., "Sep 1 - 4, 2025") + return `${start.toLocaleDateString('en-US', { month: 'short' })} ${start.getDate()} - ${end.getDate()}, ${start.getFullYear()}` + } else if (sameYear) { + // Different months but same year (e.g., "Sep 29 - Oct 2, 2025") + return `${start.toLocaleDateString('en-US', { month: 'short' })} ${start.getDate()} - ${end.toLocaleDateString('en-US', { month: 'short' })} ${end.getDate()}, ${start.getFullYear()}` + } else { + // Different years (e.g., "Dec 30, 2025 - Jan 3, 2026") + return `${start.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })} - ${end.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}` + } +} \ No newline at end of file From e90805717258c53e107be22bcb3be5f132bfe30c Mon Sep 17 00:00:00 2001 From: idityaGE Date: Sat, 8 Mar 2025 05:21:44 +0000 Subject: [PATCH 2/6] Enhance date formatting functions and add unit tests for date utilities --- frontend/__tests__/unit/pages/Home.test.tsx | 24 ++++-- .../unit/utils/dateFormatter.test.ts | 84 +++++++++++++++++++ frontend/src/utils/dateFormatter.ts | 15 +++- 3 files changed, 117 insertions(+), 6 deletions(-) create mode 100644 frontend/__tests__/unit/utils/dateFormatter.test.ts diff --git a/frontend/__tests__/unit/pages/Home.test.tsx b/frontend/__tests__/unit/pages/Home.test.tsx index 7be3f9f6f9..63f37aef82 100644 --- a/frontend/__tests__/unit/pages/Home.test.tsx +++ b/frontend/__tests__/unit/pages/Home.test.tsx @@ -4,7 +4,6 @@ import { mockAlgoliaData, mockGraphQLData } from '@unit/data/mockHomeData' import { fetchAlgoliaData } from 'api/fetchAlgoliaData' import { toast } from 'hooks/useToast' import { Home } from 'pages' -import { formatDate, formatDateRange } from 'utils/dateFormatter' import { render } from 'wrappers/testUtil' jest.mock('hooks/useToast', () => ({ @@ -156,15 +155,30 @@ describe('Home', () => { }) test('renders Upcoming Events section', async () => { + jest.mock('utils/dateFormatter', () => ({ + formatDate: jest.fn().mockImplementation((date) => { + if (date === '2025-02-27') return 'Feb 27, 2025' + return 'mocked date' + }), + formatDateRange: jest.fn().mockImplementation((start, end) => { + if (start === '2025-02-27' && end === '2025-02-28') return 'Feb 27 - 28, 2025' + return 'mocked range' + }), + })) + render() await waitFor(() => { expect(screen.getByText('Upcoming Events')).toBeInTheDocument() mockGraphQLData.upcomingEvents.forEach((event) => { expect(screen.getByText(event.name)).toBeInTheDocument() - const expectedDateText = event.endDate && event.startDate != event.endDate - ? formatDateRange(event.startDate, event.endDate) - : formatDate(event.startDate); - expect(screen.getByText(expectedDateText)).toBeInTheDocument() + + if (event.endDate && event.startDate !== event.endDate) { + expect(screen.getByText('Feb 27 - 28, 2025')).toBeInTheDocument() + } else { + if (event.startDate === '2025-02-27') { + expect(screen.getByText('Feb 27, 2025')).toBeInTheDocument() + } + } }) }) }) diff --git a/frontend/__tests__/unit/utils/dateFormatter.test.ts b/frontend/__tests__/unit/utils/dateFormatter.test.ts new file mode 100644 index 0000000000..b28a46bea2 --- /dev/null +++ b/frontend/__tests__/unit/utils/dateFormatter.test.ts @@ -0,0 +1,84 @@ +import { formatDate, formatDateRange } from 'utils/dateFormatter' + +describe('formatDate function', () => { + beforeEach(() => { + jest.clearAllMocks() + }) + + test('formats ISO date string correctly', () => { + expect(formatDate('2023-09-01')).toBe('Sep 1, 2023') + }) + + test('formats Unix timestamp correctly', () => { + // 1630454400 is Sep 1, 2021 in Unix timestamp (seconds) + expect(formatDate(1630454400)).toBe('Sep 1, 2021') + }) + + test('throws error for invalid date', () => { + expect(() => formatDate('invalid-date')).toThrow('Invalid date') + }) + + test('handles different date formats', () => { + expect(formatDate('2023/09/01')).toBe('Sep 1, 2023') + expect(formatDate('09/01/2023')).toBe('Sep 1, 2023') + }) + + test('formats dates with leading zeros correctly', () => { + expect(formatDate('2023-01-05')).toBe('Jan 5, 2023') + }) + + test('handles different months', () => { + expect(formatDate('2023-12-25')).toBe('Dec 25, 2023') + expect(formatDate('2023-07-04')).toBe('Jul 4, 2023') + }) +}) + +describe('formatDateRange function', () => { + beforeEach(() => { + jest.clearAllMocks() + }) + + test('formats date range in same month correctly', () => { + expect(formatDateRange('2023-09-01', '2023-09-04')).toBe('Sep 1 - 4, 2023') + }) + + test('formats date range in different months but same year correctly', () => { + expect(formatDateRange('2023-09-29', '2023-10-02')).toBe('Sep 29 - Oct 2, 2023') + }) + + test('formats date range in different years correctly', () => { + expect(formatDateRange('2023-12-30', '2024-01-03')).toBe('Dec 30, 2023 - Jan 3, 2024') + }) + + test('formats Unix timestamp date ranges correctly', () => { + // Sept 1-4, 2021 + const startTimestamp = 1630454400 // Sep 1, 2021 + const endTimestamp = 1630713600 // Sep 4, 2021 + expect(formatDateRange(startTimestamp, endTimestamp)).toBe('Sep 1 - 4, 2021') + }) + + test('throws error when start date is invalid', () => { + expect(() => formatDateRange('invalid-date', '2023-09-04')).toThrow('Invalid date') + }) + + test('throws error when end date is invalid', () => { + expect(() => formatDateRange('2023-09-01', 'invalid-date')).toThrow('Invalid date') + }) + + test('handles month boundaries correctly', () => { + expect(formatDateRange('2023-09-30', '2023-10-02')).toBe('Sep 30 - Oct 2, 2023') + }) + + test('handles year boundaries correctly', () => { + expect(formatDateRange('2023-12-29', '2024-01-02')).toBe('Dec 29, 2023 - Jan 2, 2024') + }) + + test('handles single-day ranges correctly', () => { + expect(formatDateRange('2023-09-01', '2023-09-01')).toBe('Sep 1, 2023') + }) + + test('handles mixed input types correctly', () => { + // Sep 1, 2021 as Unix timestamp and ISO string + expect(formatDateRange(1630454400, '2021-09-04')).toBe('Sep 1 - 4, 2021') + }) +}) diff --git a/frontend/src/utils/dateFormatter.ts b/frontend/src/utils/dateFormatter.ts index 7b1ec602e1..4dbca7ca3d 100644 --- a/frontend/src/utils/dateFormatter.ts +++ b/frontend/src/utils/dateFormatter.ts @@ -23,6 +23,19 @@ export const formatDateRange = (startDate: number | string, endDate: number | st throw new Error('Invalid date') } + if ( + start.getTime() === end.getTime() || + (start.getFullYear() === end.getFullYear() && + start.getMonth() === end.getMonth() && + start.getDate() === end.getDate()) + ) { + return start.toLocaleDateString('en-US', { + year: 'numeric', + month: 'short', + day: 'numeric', + }) + } + // Check if dates are in the same month and year const sameMonth = start.getMonth() === end.getMonth() && start.getFullYear() === end.getFullYear() const sameYear = start.getFullYear() === end.getFullYear() @@ -37,4 +50,4 @@ export const formatDateRange = (startDate: number | string, endDate: number | st // Different years (e.g., "Dec 30, 2025 - Jan 3, 2026") return `${start.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })} - ${end.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}` } -} \ No newline at end of file +} From 7067205bf7c1f8fb375154bd34dbc7c6d6ca07d1 Mon Sep 17 00:00:00 2001 From: idityaGE Date: Sat, 8 Mar 2025 05:57:06 +0000 Subject: [PATCH 3/6] Update Upcoming Events date formatting in tests to reflect range display --- frontend/__tests__/e2e/pages/Home.spec.ts | 3 +-- frontend/__tests__/unit/pages/Home.test.tsx | 20 +------------------- 2 files changed, 2 insertions(+), 21 deletions(-) diff --git a/frontend/__tests__/e2e/pages/Home.spec.ts b/frontend/__tests__/e2e/pages/Home.spec.ts index afaef3339d..f353d67bfa 100644 --- a/frontend/__tests__/e2e/pages/Home.spec.ts +++ b/frontend/__tests__/e2e/pages/Home.spec.ts @@ -71,8 +71,7 @@ test.describe('Home Page', () => { test('should have upcoming events', async ({ page }) => { await expect(page.getByRole('heading', { name: 'Upcoming Events' })).toBeVisible() await expect(page.getByRole('link', { name: 'Event 1' })).toBeVisible() - await expect(page.getByText('Feb 27,')).toBeVisible() - await expect(page.getByText('Feb 28,')).toBeVisible() + await expect(page.getByText('Feb 27 - 28, 2025')).toBeVisible() await page.getByRole('link', { name: 'Event 1' }).click() }) }) diff --git a/frontend/__tests__/unit/pages/Home.test.tsx b/frontend/__tests__/unit/pages/Home.test.tsx index 63f37aef82..acee3ba044 100644 --- a/frontend/__tests__/unit/pages/Home.test.tsx +++ b/frontend/__tests__/unit/pages/Home.test.tsx @@ -155,30 +155,12 @@ describe('Home', () => { }) test('renders Upcoming Events section', async () => { - jest.mock('utils/dateFormatter', () => ({ - formatDate: jest.fn().mockImplementation((date) => { - if (date === '2025-02-27') return 'Feb 27, 2025' - return 'mocked date' - }), - formatDateRange: jest.fn().mockImplementation((start, end) => { - if (start === '2025-02-27' && end === '2025-02-28') return 'Feb 27 - 28, 2025' - return 'mocked range' - }), - })) - render() await waitFor(() => { expect(screen.getByText('Upcoming Events')).toBeInTheDocument() mockGraphQLData.upcomingEvents.forEach((event) => { expect(screen.getByText(event.name)).toBeInTheDocument() - - if (event.endDate && event.startDate !== event.endDate) { - expect(screen.getByText('Feb 27 - 28, 2025')).toBeInTheDocument() - } else { - if (event.startDate === '2025-02-27') { - expect(screen.getByText('Feb 27, 2025')).toBeInTheDocument() - } - } + expect(screen.getByText('Feb 27 - 28, 2025')).toBeInTheDocument() }) }) }) From 26ed17e91113ddcf2d639817b2cf22e634925a6d Mon Sep 17 00:00:00 2001 From: idityaGE Date: Sat, 8 Mar 2025 19:33:21 +0000 Subject: [PATCH 4/6] Refactor date range formatting for improved readability and maintainability --- frontend/src/utils/dateFormatter.ts | 39 +++++++++++++++++++---------- 1 file changed, 26 insertions(+), 13 deletions(-) diff --git a/frontend/src/utils/dateFormatter.ts b/frontend/src/utils/dateFormatter.ts index 4dbca7ca3d..9b9386e4f3 100644 --- a/frontend/src/utils/dateFormatter.ts +++ b/frontend/src/utils/dateFormatter.ts @@ -15,9 +15,16 @@ export const formatDate = (input: number | string) => { }) } -export const formatDateRange = (startDate: number | string, endDate: number | string) => { - const start = typeof startDate === 'number' ? new Date(startDate * 1000) : new Date(startDate) - const end = typeof endDate === 'number' ? new Date(endDate * 1000) : new Date(endDate) +export const formatDateRange = ( + startDate: number | string, + endDate: number | string +) => { + const start = typeof startDate === 'number' + ? new Date(startDate * 1000) + : new Date(startDate) + const end = typeof endDate === 'number' + ? new Date(endDate * 1000) + : new Date(endDate) if (isNaN(start.getTime()) || isNaN(end.getTime())) { throw new Error('Invalid date') @@ -29,25 +36,31 @@ export const formatDateRange = (startDate: number | string, endDate: number | st start.getMonth() === end.getMonth() && start.getDate() === end.getDate()) ) { - return start.toLocaleDateString('en-US', { - year: 'numeric', - month: 'short', - day: 'numeric', - }) + return formatDate(startDate) } - // Check if dates are in the same month and year - const sameMonth = start.getMonth() === end.getMonth() && start.getFullYear() === end.getFullYear() + const sameMonth = + start.getMonth() === end.getMonth() && + start.getFullYear() === end.getFullYear() const sameYear = start.getFullYear() === end.getFullYear() if (sameMonth) { // Format as "Month Day - Day, Year" (e.g., "Sep 1 - 4, 2025") - return `${start.toLocaleDateString('en-US', { month: 'short' })} ${start.getDate()} - ${end.getDate()}, ${start.getFullYear()}` + return ( + `${start.toLocaleDateString('en-US', { month: 'short' })} ` + + `${start.getDate()} - ${end.getDate()}, ${start.getFullYear()}` + ) } else if (sameYear) { // Different months but same year (e.g., "Sep 29 - Oct 2, 2025") - return `${start.toLocaleDateString('en-US', { month: 'short' })} ${start.getDate()} - ${end.toLocaleDateString('en-US', { month: 'short' })} ${end.getDate()}, ${start.getFullYear()}` + const startMonth = start.toLocaleDateString('en-US', { month: 'short' }) + const endMonth = end.toLocaleDateString('en-US', { month: 'short' }) + const startDay = start.getDate() + const endDay = end.getDate() + const year = start.getFullYear() + + return `${startMonth} ${startDay} - ${endMonth} ${endDay}, ${year}` } else { // Different years (e.g., "Dec 30, 2025 - Jan 3, 2026") - return `${start.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })} - ${end.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}` + return `${formatDate(startDate)} - ${formatDate(endDate)}` } } From a4bd934bb15ac5e98095b7cb2aed6f8a4405bfd4 Mon Sep 17 00:00:00 2001 From: idityaGE Date: Sat, 8 Mar 2025 19:35:45 +0000 Subject: [PATCH 5/6] Refactor formatDateRange function for improved readability --- frontend/src/utils/dateFormatter.ts | 17 ++++------------- 1 file changed, 4 insertions(+), 13 deletions(-) diff --git a/frontend/src/utils/dateFormatter.ts b/frontend/src/utils/dateFormatter.ts index 9b9386e4f3..f95698983f 100644 --- a/frontend/src/utils/dateFormatter.ts +++ b/frontend/src/utils/dateFormatter.ts @@ -15,16 +15,9 @@ export const formatDate = (input: number | string) => { }) } -export const formatDateRange = ( - startDate: number | string, - endDate: number | string -) => { - const start = typeof startDate === 'number' - ? new Date(startDate * 1000) - : new Date(startDate) - const end = typeof endDate === 'number' - ? new Date(endDate * 1000) - : new Date(endDate) +export const formatDateRange = (startDate: number | string, endDate: number | string) => { + const start = typeof startDate === 'number' ? new Date(startDate * 1000) : new Date(startDate) + const end = typeof endDate === 'number' ? new Date(endDate * 1000) : new Date(endDate) if (isNaN(start.getTime()) || isNaN(end.getTime())) { throw new Error('Invalid date') @@ -39,9 +32,7 @@ export const formatDateRange = ( return formatDate(startDate) } - const sameMonth = - start.getMonth() === end.getMonth() && - start.getFullYear() === end.getFullYear() + const sameMonth = start.getMonth() === end.getMonth() && start.getFullYear() === end.getFullYear() const sameYear = start.getFullYear() === end.getFullYear() if (sameMonth) { From 518af5fcb00c068c99966bc783f8cb3022c5f4da Mon Sep 17 00:00:00 2001 From: Arkadii Yakovets Date: Sat, 8 Mar 2025 18:11:00 -0800 Subject: [PATCH 6/6] Update code --- frontend/__tests__/e2e/pages/Home.spec.ts | 2 +- frontend/__tests__/unit/pages/Home.test.tsx | 2 +- .../__tests__/unit/utils/dateFormatter.test.ts | 14 +++++++------- frontend/src/pages/Home.tsx | 6 +----- frontend/src/utils/dateFormatter.ts | 6 +++--- 5 files changed, 13 insertions(+), 17 deletions(-) diff --git a/frontend/__tests__/e2e/pages/Home.spec.ts b/frontend/__tests__/e2e/pages/Home.spec.ts index f353d67bfa..d4c70e9102 100644 --- a/frontend/__tests__/e2e/pages/Home.spec.ts +++ b/frontend/__tests__/e2e/pages/Home.spec.ts @@ -71,7 +71,7 @@ test.describe('Home Page', () => { test('should have upcoming events', async ({ page }) => { await expect(page.getByRole('heading', { name: 'Upcoming Events' })).toBeVisible() await expect(page.getByRole('link', { name: 'Event 1' })).toBeVisible() - await expect(page.getByText('Feb 27 - 28, 2025')).toBeVisible() + await expect(page.getByText('Feb 27 — 28, 2025')).toBeVisible() await page.getByRole('link', { name: 'Event 1' }).click() }) }) diff --git a/frontend/__tests__/unit/pages/Home.test.tsx b/frontend/__tests__/unit/pages/Home.test.tsx index acee3ba044..24aa1d9e42 100644 --- a/frontend/__tests__/unit/pages/Home.test.tsx +++ b/frontend/__tests__/unit/pages/Home.test.tsx @@ -160,7 +160,7 @@ describe('Home', () => { expect(screen.getByText('Upcoming Events')).toBeInTheDocument() mockGraphQLData.upcomingEvents.forEach((event) => { expect(screen.getByText(event.name)).toBeInTheDocument() - expect(screen.getByText('Feb 27 - 28, 2025')).toBeInTheDocument() + expect(screen.getByText('Feb 27 — 28, 2025')).toBeInTheDocument() }) }) }) diff --git a/frontend/__tests__/unit/utils/dateFormatter.test.ts b/frontend/__tests__/unit/utils/dateFormatter.test.ts index b28a46bea2..df9470ea74 100644 --- a/frontend/__tests__/unit/utils/dateFormatter.test.ts +++ b/frontend/__tests__/unit/utils/dateFormatter.test.ts @@ -39,22 +39,22 @@ describe('formatDateRange function', () => { }) test('formats date range in same month correctly', () => { - expect(formatDateRange('2023-09-01', '2023-09-04')).toBe('Sep 1 - 4, 2023') + expect(formatDateRange('2023-09-01', '2023-09-04')).toBe('Sep 1 — 4, 2023') }) test('formats date range in different months but same year correctly', () => { - expect(formatDateRange('2023-09-29', '2023-10-02')).toBe('Sep 29 - Oct 2, 2023') + expect(formatDateRange('2023-09-29', '2023-10-02')).toBe('Sep 29 — Oct 2, 2023') }) test('formats date range in different years correctly', () => { - expect(formatDateRange('2023-12-30', '2024-01-03')).toBe('Dec 30, 2023 - Jan 3, 2024') + expect(formatDateRange('2023-12-30', '2024-01-03')).toBe('Dec 30, 2023 — Jan 3, 2024') }) test('formats Unix timestamp date ranges correctly', () => { // Sept 1-4, 2021 const startTimestamp = 1630454400 // Sep 1, 2021 const endTimestamp = 1630713600 // Sep 4, 2021 - expect(formatDateRange(startTimestamp, endTimestamp)).toBe('Sep 1 - 4, 2021') + expect(formatDateRange(startTimestamp, endTimestamp)).toBe('Sep 1 — 4, 2021') }) test('throws error when start date is invalid', () => { @@ -66,11 +66,11 @@ describe('formatDateRange function', () => { }) test('handles month boundaries correctly', () => { - expect(formatDateRange('2023-09-30', '2023-10-02')).toBe('Sep 30 - Oct 2, 2023') + expect(formatDateRange('2023-09-30', '2023-10-02')).toBe('Sep 30 — Oct 2, 2023') }) test('handles year boundaries correctly', () => { - expect(formatDateRange('2023-12-29', '2024-01-02')).toBe('Dec 29, 2023 - Jan 2, 2024') + expect(formatDateRange('2023-12-29', '2024-01-02')).toBe('Dec 29, 2023 — Jan 2, 2024') }) test('handles single-day ranges correctly', () => { @@ -79,6 +79,6 @@ describe('formatDateRange function', () => { test('handles mixed input types correctly', () => { // Sep 1, 2021 as Unix timestamp and ISO string - expect(formatDateRange(1630454400, '2021-09-04')).toBe('Sep 1 - 4, 2021') + expect(formatDateRange(1630454400, '2021-09-04')).toBe('Sep 1 — 4, 2021') }) }) diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx index 4fe37a9070..784b08452f 100644 --- a/frontend/src/pages/Home.tsx +++ b/frontend/src/pages/Home.tsx @@ -146,11 +146,7 @@ export default function Home() {
- - {event.endDate && event.startDate != event.endDate - ? formatDateRange(event.startDate, event.endDate) - : formatDate(event.startDate)} - + {formatDateRange(event.startDate, event.endDate)}
diff --git a/frontend/src/utils/dateFormatter.ts b/frontend/src/utils/dateFormatter.ts index f95698983f..77439e57ba 100644 --- a/frontend/src/utils/dateFormatter.ts +++ b/frontend/src/utils/dateFormatter.ts @@ -39,7 +39,7 @@ export const formatDateRange = (startDate: number | string, endDate: number | st // Format as "Month Day - Day, Year" (e.g., "Sep 1 - 4, 2025") return ( `${start.toLocaleDateString('en-US', { month: 'short' })} ` + - `${start.getDate()} - ${end.getDate()}, ${start.getFullYear()}` + `${start.getDate()} — ${end.getDate()}, ${start.getFullYear()}` ) } else if (sameYear) { // Different months but same year (e.g., "Sep 29 - Oct 2, 2025") @@ -49,9 +49,9 @@ export const formatDateRange = (startDate: number | string, endDate: number | st const endDay = end.getDate() const year = start.getFullYear() - return `${startMonth} ${startDay} - ${endMonth} ${endDay}, ${year}` + return `${startMonth} ${startDay} — ${endMonth} ${endDay}, ${year}` } else { // Different years (e.g., "Dec 30, 2025 - Jan 3, 2026") - return `${formatDate(startDate)} - ${formatDate(endDate)}` + return `${formatDate(startDate)} — ${formatDate(endDate)}` } }