VAGOV-CMS- 9474: Remove old recurring events from View Other Times for this event dropdown

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()
 

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()

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',

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 && <div dangerouslySetInnerHTML={{ __html: body?.processed }} />}
 
         {/* Recurring Events */}
-        {formattedDates.length > 1 && (
+        {currentFormattedDates.length > 1 && (
           <div>
             <va-accordion open-single id="expand-recurring-events">
               <va-accordion-item