Merge pull request #75 from ibi-group/correct-survey-results-rendering

Render Survey Results in Dedicated Tab

components/CDPUserDashboard.tsx

@@ -1,5 +1,12 @@
 import React, { useEffect, useState } from 'react'
-import { Alert, Badge, ListGroup, ListGroupItem } from 'react-bootstrap'
+import {
+  Alert,
+  Badge,
+  ListGroup,
+  ListGroupItem,
+  Tab,
+  Tabs
+} from 'react-bootstrap'
 import { WithAuth0Props, withAuth0 } from '@auth0/auth0-react'
 
 import { secureFetch } from '../util/middleware'
@@ -40,6 +47,41 @@ const CDPZip = (props: CDPZipProps): JSX.Element => (
   </ListGroupItem>
 )
 
+/** Component which renders a list of CDP files */
+const FileListing = ({
+  cdpUser,
+  downloadedFiles,
+  files,
+  setCurrentlyDownloadingFile
+}: {
+  cdpUser?: CDPUser
+  downloadedFiles: string[]
+  files: CDPFile[]
+  setCurrentlyDownloadingFile: (file: string) => void
+}): JSX.Element =>
+  files?.length === 0 ? (
+    <Alert variant="info">
+      <Alert.Heading>Loading...</Alert.Heading>
+    </Alert>
+  ) : (
+    <ListGroup as="ul">
+      {files?.map((file: CDPFile) => {
+        const fakeDownloadedAt =
+          downloadedFiles.includes(file.key) && Date.now()
+        return (
+          <CDPZip
+            downloadedAt={
+              fakeDownloadedAt || cdpUser?.S3DownloadTimes[file.key]
+            }
+            file={file}
+            key={file.key}
+            onClick={setCurrentlyDownloadingFile}
+          />
+        )
+      })}
+    </ListGroup>
+  )
+
 /**
  * The high-level component visible to a CDPUser when they log in. This
  * lists the s3 files the user is able to access, and presents some instructional info.
@@ -109,36 +151,46 @@ const CDPUserDashboard = (props: Props): JSX.Element => {
     // Negative sorts "reverse alphabetically" which allows newest files to appear first
     .sort((a: CDPFile, b: CDPFile) => -a.key.localeCompare(b.key))
 
+  // wanted either filters out or only includes survey responses
+  const isSurveyResponse = (wanted: boolean) => (file: CDPFile) =>
+    file.key.includes('survey-response') === wanted
+  const surveyResponses = files.filter(isSurveyResponse(true))
+
   return (
-    <>
-      <h3>Raw Request Data Download</h3>
-      <p>
-        These zip files contain anonymized OTP requests for the date(s)
-        indicated.
-      </p>
-
-      {files?.length === 0 && (
-        <Alert variant="info">
-          <Alert.Heading>Loading...</Alert.Heading>
-        </Alert>
+    <Tabs defaultActiveKey="raw-data" fill>
+      <Tab eventKey="raw-data" title="Raw Request Data Download">
+        <p className="mt-3">
+          These zip files contain anonymized OTP requests for the date and time
+          indicated.
+        </p>
+        <FileListing
+          cdpUser={cdpUser}
+          downloadedFiles={downloadedFiles}
+          files={files.filter(isSurveyResponse(false))}
+          setCurrentlyDownloadingFile={setCurrentlyDownloadingFile}
+        />
+      </Tab>
+      {surveyResponses.length > 0 && (
+        <Tab eventKey="survey-data" title="Survey Response Download">
+          <p className="mt-3">
+            Select a date to download all survey responses from that date.
+            Individual csv files are individual user responses.
+          </p>
+          <FileListing
+            cdpUser={cdpUser}
+            downloadedFiles={downloadedFiles}
+            files={surveyResponses.sort(
+              (a: CDPFile, b: CDPFile) =>
+                // Sort by the number of slashes in the key name so that merged responses (not in subfolders)
+                // appear first.
+                (a.key.match(/\//g) || []).length -
+                (b.key.match(/\//g) || []).length
+            )}
+            setCurrentlyDownloadingFile={setCurrentlyDownloadingFile}
+          />
+        </Tab>
       )}
-      <ListGroup as="ul">
-        {files?.map((file: CDPFile) => {
-          const fakeDownloadedAt =
-            downloadedFiles.includes(file.key) && Date.now()
-          return (
-            <CDPZip
-              downloadedAt={
-                fakeDownloadedAt || cdpUser?.S3DownloadTimes[file.key]
-              }
-              file={file}
-              key={file.key}
-              onClick={setCurrentlyDownloadingFile}
-            />
-          )
-        })}
-      </ListGroup>
-    </>
+    </Tabs>
   )
 }
 

util/ui.ts

@@ -98,8 +98,9 @@ export const getActiveUserTypes = (): {
  * 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 TRIP_DATA_SUFFIX = '-anon-trip-data'
+  const date = filename.split(TRIP_DATA_SUFFIX)?.[0].split('/')?.[1]
+  if (!date || !filename.includes(TRIP_DATA_SUFFIX)) return filename
 
   const parsedDate =
     getDateOnlyFromCDPFileName(date) || getDateAndTimeFromCDPFileName(date)

yarn.lock

@@ -4966,9 +4966,9 @@ camelize@^1.0.0:
   integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
 
 caniuse-lite@^1.0.30001111, caniuse-lite@^1.0.30001173, caniuse-lite@^1.0.30001283, caniuse-lite@^1.0.30001286:
-  version "1.0.30001309"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001309.tgz#e0ee78b9bec0704f67304b00ff3c5c0c768a9f62"
-  integrity sha512-Pl8vfigmBXXq+/yUz1jUwULeq9xhMJznzdc/xwl4WclDAuebcTHVefpz8lE/bMI+UN7TOkSSe7B7RnZd6+dzjA==
+  version "1.0.30001374"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001374.tgz"
+  integrity sha512-mWvzatRx3w+j5wx/mpFN5v5twlPrabG8NqX2c6e45LCpymdoGqNvRkRutFUqpRTXKFQFNQJasvK0YT7suW6/Hw==
 
 cardinal@^2.1.1:
   version "2.1.1"