diff --git a/playwright/tests/event.spec.ts b/playwright/tests/event.spec.ts index 9e741c590..bbf8b7f56 100644 --- a/playwright/tests/event.spec.ts +++ b/playwright/tests/event.spec.ts @@ -4,16 +4,17 @@ test.describe('Event Page', () => { test('Event page renders with correct title and details', async ({ page, }) => { - await page.goto('/central-iowa-health-care/events/52265/') - await expect(page.locator('h1')).toHaveText('Pickleball Club') // Replace with actual event title - await expect(page.locator('.va-introtext')).toContainText('Pickleball') // Replace with actual event description + await page.goto('/central-iowa-health-care/events/63096/') + await expect(page.locator('h1')).toHaveText( + 'Battlefield Acupuncture Walk-in Clinic' + ) // Replace with actual event title }) test('Should render without a11y errors', async ({ page, makeAxeBuilder, }) => { - await page.goto('/central-iowa-health-care/events/52265/') + await page.goto('/central-iowa-health-care/events/63096/') const accessibilityScanResults = await makeAxeBuilder().analyze() diff --git a/src/lib/utils/date.test.ts b/src/lib/utils/date.test.ts index cdc104ef1..bffe5607b 100644 --- a/src/lib/utils/date.test.ts +++ b/src/lib/utils/date.test.ts @@ -8,6 +8,7 @@ import { deriveMostRecentDate, deriveFormattedTimestamp, isEventInPast, + filterPastEvents, } from './date' describe('isISOString', () => { @@ -245,6 +246,23 @@ describe('formatDateObject', () => { }) }) +describe('FilterPastEvents', () => { + it('should filter out past events from date time range for events', () => { + const datetimeRange = [ + { + value: new Date('2023-09-07T14:00:00Z'), + end_value: new Date('2023-09-07T16:00:00Z'), + }, + { + value: new Date('2999-09-07T14:00:00Z'), + end_value: new Date('2999-09-07T16:00:00Z'), + }, + ] + const result = filterPastEvents(datetimeRange) + expect(result).toHaveLength(1) + }) +}) + describe('deriveMostRecentDate', () => { it('should return the closest future or ongoing event', () => { const mockCurrentTime = new Date('2023-08-01T18:00:00Z').getTime() diff --git a/src/lib/utils/date.ts b/src/lib/utils/date.ts index 4baa1837d..5e8804ea6 100644 --- a/src/lib/utils/date.ts +++ b/src/lib/utils/date.ts @@ -174,6 +174,7 @@ export function getDateParts( export const formatDateObject = (datetimeRange) => { if (!datetimeRange) return [] + return datetimeRange.map((dateObject) => { const startTime = new Date(dateObject.value) const endTime = new Date(dateObject.end_value) @@ -187,6 +188,15 @@ export const formatDateObject = (datetimeRange) => { }) } +export const filterPastEvents = (eventTimes) => { + if (!eventTimes) return [] + const now = new Date() + return eventTimes.filter((dateObject) => { + const endTime = new Date(dateObject.end_value) + return endTime > now // Keep only if end_time is in the future + }) +} + export const deriveMostRecentDate = ( datetimeRange, now = Date.now() // This is done so that we can mock the current time in tests. @@ -220,7 +230,6 @@ export const deriveFormattedTimestamp = (datetime) => { if (!datetime) return const startTime = new Date(datetime.startTime) const endTime = new Date(datetime.endTime) - const formattedStartTime = startTime.toLocaleTimeString('en-US', { weekday: 'short', year: 'numeric', diff --git a/src/templates/layouts/event/index.tsx b/src/templates/layouts/event/index.tsx index c99043eec..3f9ab2163 100644 --- a/src/templates/layouts/event/index.tsx +++ b/src/templates/layouts/event/index.tsx @@ -4,6 +4,7 @@ import { formatDateObject, deriveFormattedTimestamp, isEventInPast, + filterPastEvents, } from '@/lib/utils/date' import { ContentFooter } from '@/templates/common/contentFooter' import { MediaImage } from '@/templates/common/mediaImage' @@ -42,9 +43,10 @@ export const Event = ({ // Memoized because formateDateObject returns a map that will be recalculated on each render. const formattedDates = useMemo( - () => formatDateObject(datetimeRange), + () => formatDateObject(filterPastEvents(datetimeRange)), [datetimeRange] ) + const initialFormattedDates = formattedDates.slice(0, 5) const [currentFormattedDates, setCurrentFormattedDates] = useState( initialFormattedDates @@ -274,7 +276,7 @@ export const Event = ({ {body &&
} {/* Recurring Events */} - {formattedDates.length > 1 && ( + {currentFormattedDates.length > 1 && (