Merge pull request #71 from ibi-group/handle-new-cdp-filenames

fix: support hourly CDP uploads

.github/workflows/e2e.yml

@@ -26,8 +26,6 @@ jobs:
 
       - name: Download middleware
         run: "git clone https://github.com/ibi-group/otp-middleware.git"
-      - name: "[TEMP] checkout docker branch"
-        run: cd otp-middleware && git checkout docker
       - name: Load e2e middleware config
         run: echo $E2E_OTP_MIDDLEWARE_DOCKER_CONFIG_BASE64 | base64 -d > otp-middleware/configurations/default/env.docker.yml
         env:

__tests__/e2e/e2e.ts

@@ -1,7 +1,6 @@
 import 'expect-puppeteer'
 
 import { server } from '../../jest-puppeteer.config'
-import { dateFormatterOptions } from '../../util/constants'
 import { waitForDownload } from '../util/waitForDownload'
 
 jest.setTimeout(50000)
@@ -185,13 +184,13 @@ describe('end-to-end tests', () => {
       await expect(page).toMatch('Raw Request Data Download', { timeout: 6000 })
     })
 
-    const dateFormatter = new Intl.DateTimeFormat('en-US', dateFormatterOptions)
-    const yesterday = new Date()
-    yesterday.setDate(yesterday.getDate() - 1)
-    const todaysUploadString = dateFormatter.format(yesterday)
+    // Ideally this would be a file that the middleware uploads at e2e test launch,
+    // however the CDP refactor opt-middleware#170 changed the behavior so that this
+    // no longer happens. Therefore, we use a string known to exist
+    const uploadString = 'May 20, 2022'
 
-    it('should see the file that the middleware uploaded', async () => {
-      await expect(page).toMatch(todaysUploadString)
+    it('should see a file that a previous middleware uploaded', async () => {
+      await expect(page).toMatch(uploadString)
     })
     it('should be able to download a CDP zip file', async () => {
       const cdpsession = await page.target().createCDPSession()
@@ -200,7 +199,7 @@ describe('end-to-end tests', () => {
         downloadPath: '/tmp'
       })
 
-      await expect(page).toClick('div', { text: todaysUploadString })
+      await expect(page).toClick('div', { text: uploadString })
 
       await waitForDownload('anon-trip-data')
       await expect(page).toMatch('You last downloaded', { timeout: 6000 })

types/response.ts

@@ -14,3 +14,8 @@ export type CDPFile = {
 }
 
 export type ConvertedMD = { markdown: string }
+
+export type FileNameParserResponse = {
+  dateFormatterOptions: Intl.DateTimeFormatOptions
+  timestamp: number
+} | null

util/constants.ts

@@ -18,9 +18,14 @@ export const USER_TYPES: { label: string; url: string; value: USER_TYPE }[] = [
   { label: 'OTP Users', url: OTP_USER_URL, value: 'otp' }
 ]
 
-export const dateFormatterOptions: Intl.DateTimeFormatOptions = {
+export const dateFormatterOptionsForDate: Intl.DateTimeFormatOptions = {
   day: 'numeric',
   month: 'long',
   timeZone: 'UTC',
   year: 'numeric'
 }
+
+export const dateFormatterOptionsForTime: Intl.DateTimeFormatOptions = {
+  dateStyle: 'long',
+  timeStyle: 'short'
+}

util/ui.ts

@@ -1,6 +1,11 @@
 import { Children, isValidElement, cloneElement } from 'react'
 
-import { dateFormatterOptions, USER_TYPES } from '../util/constants'
+import { FileNameParserResponse } from '../types/response'
+import {
+  dateFormatterOptionsForDate,
+  dateFormatterOptionsForTime,
+  USER_TYPES
+} from '../util/constants'
 
 import type { USER_TYPE } from './constants'
 
@@ -89,14 +94,49 @@ export const getActiveUserTypes = (): {
 /**
  * Converts a CDP file name to a human-readable date. A bit fickle and
  * not universally browser supported. Attempts to fail as gracefully as possible
+ *
+ * Able to handle all the date/time formats that are generated by the CDP.
  */
 export const getDateFromCDPFileName = (filename: string): string => {
   const date = filename.split('-anon-trip-data')?.[0].split('/')?.[1]
   if (!date) return filename
 
-  const parsedDate = Date.parse(date)
-  if (!parsedDate) return filename
+  const parsedDate =
+    getDateOnlyFromCDPFileName(date) || getDateAndTimeFromCDPFileName(date)
+  if (!parsedDate || !parsedDate.timestamp) return filename
 
-  const dateFormatter = new Intl.DateTimeFormat('en-US', dateFormatterOptions)
-  return dateFormatter.format(new Date(parsedDate))
+  const dateFormatter = new Intl.DateTimeFormat(
+    'en-US',
+    parsedDate.dateFormatterOptions
+  )
+  return dateFormatter.format(new Date(parsedDate.timestamp))
+}
+/**
+ * Some CDP file names are only a date (yyyy-mm-dd). These are easy to parse.
+ */
+const getDateOnlyFromCDPFileName = (date: string): FileNameParserResponse => {
+  const timestamp = Date.parse(date)
+  if (!timestamp) return null
+
+  return { dateFormatterOptions: dateFormatterOptionsForDate, timestamp }
+}
+
+/**
+ * Some CDP zip file names include the hour in the very non-standard format yyyy-mm-dd-hh. This method
+ * attempts to process this file name
+ */
+const getDateAndTimeFromCDPFileName = (
+  date: string
+): FileNameParserResponse => {
+  const datePortion = date.split('-')
+  if (datePortion?.find((dp) => Number.isNaN(parseInt(dp)))) return null
+
+  // The last number after the last dash is the hour
+  const timePortion = datePortion.pop()
+  if (!timePortion) return null
+
+  // :00 helps the parser know we are talking about a time
+  const timestamp = Date.parse(`${datePortion.join('-')} ${timePortion}:00`)
+
+  return { dateFormatterOptions: dateFormatterOptionsForTime, timestamp }
 }