3407 - FRA Reports - submission history

tdrs-frontend/src/actions/fraReports.js

@@ -91,15 +91,15 @@ export const uploadFraReport =
         }
       )
 
-      // dispatch(
-      //   getFraSubmissionHistory({
-      //     stt,
-      //     reportType,
-      //     fiscalQuarter,
-      //     fiscalYear,
-      //   })
-      // )
-      // or, dispatch the state update if response from upload can contain updated submission history
+      dispatch(
+        getFraSubmissionHistory({
+          stt,
+          reportType,
+          fiscalQuarter,
+          fiscalYear,
+        })
+      )
+
       onSuccess()
     } catch (error) {
       onError(error)

tdrs-frontend/src/components/Paginator/Paginator.jsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import {
@@ -101,3 +101,30 @@ Paginator.propTypes = {
 }
 
 export default Paginator
+
+const PaginatedComponent = ({ pageSize, data, children }) => {
+  const [pageNumber, setPageNumber] = useState(1)
+
+  const numPages =
+    data && data.length > pageSize ? Math.ceil(data.length / pageSize) : 1
+  const pageStart = (pageNumber - 1) * pageSize
+  const pageEnd =
+    data && data.length ? Math.min(data.length, pageStart + pageSize) : 1
+
+  const slicedData = data && data.length ? data.slice(pageStart, pageEnd) : null
+
+  return (
+    <>
+      {React.cloneElement(children, { data: slicedData })}
+      {numPages > 1 && (
+        <Paginator
+          onChange={(page) => setPageNumber(page)}
+          selected={pageNumber}
+          pages={numPages}
+        />
+      )}
+    </>
+  )
+}
+
+export { PaginatedComponent }

tdrs-frontend/src/components/Reports/FRAReports.jsx

@@ -11,13 +11,20 @@ import { accountCanSelectStt } from '../../selectors/auth'
 import { handlePreview, tryGetUTF8EncodedFile } from '../FileUpload/utils'
 import createFileInputErrorState from '../../utils/createFileInputErrorState'
 import Modal from '../Modal'
+import {
+  formatDate,
+  SubmissionSummaryStatusIcon,
+  getErrorReportStatus,
+} from '../SubmissionHistory/helpers'
 
 import {
   getFraSubmissionHistory,
   uploadFraReport,
 } from '../../actions/fraReports'
 import { fetchSttList } from '../../actions/sttList'
 import { DropdownSelect, RadioSelect } from '../Form'
+import { PaginatedComponent } from '../Paginator/Paginator'
+import { download } from '../../actions/reports'
 
 const INVALID_FILE_ERROR =
   'We can’t process that file format. Please provide a plain text file.'
@@ -238,8 +245,8 @@ const UploadForm = ({
 
   useEffect(() => {
     const trySettingPreview = () => {
-      const targetClassName = 'usa-file-input__preview input #fra-file-upload'
-      const previewState = handlePreview(file?.name, targetClassName)
+      const targetClassName = '.usa-file-input__target input#fra-file-upload'
+      const previewState = handlePreview(file?.fileName, targetClassName)
       if (!previewState) {
         setTimeout(trySettingPreview, 100)
       }
@@ -391,7 +398,55 @@ const UploadForm = ({
   )
 }
 
-const SubmissionHistory = () => <></>
+const SubmissionHistory = ({ data, sectionName, handleDownloadFile }) => (
+  <table className="usa-table usa-table--striped">
+    <caption>{sectionName}</caption>
+    {data && data.length > 0 ? (
+      <>
+        <thead>
+          <tr>
+            <th>Submitted On</th>
+            <th>Submitted By</th>
+            <th>File Name</th>
+            <th>Total Errors</th>
+            <th>Status</th>
+            <th>Error Report</th>
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((file) => (
+            <tr>
+              <td>{formatDate(file.createdAt)}</td>
+              <td>{file.submittedBy}</td>
+              <td>
+                <button
+                  className="section-download"
+                  onClick={() => handleDownloadFile(file)}
+                >
+                  {file.fileName}
+                </button>
+              </td>
+              <td>{file?.summary?.case_aggregates?.total_errors}</td>
+              <td>
+                <span>
+                  <SubmissionSummaryStatusIcon
+                    status={file.summary ? file.summary.status : 'Pending'}
+                  />
+                </span>
+                {file.summary && file.summary.status
+                  ? file.summary.status
+                  : 'Pending'}
+              </td>
+              <td>{getErrorReportStatus(file)}</td>
+            </tr>
+          ))}
+        </tbody>
+      </>
+    ) : (
+      <span>No data available.</span>
+    )}
+  </table>
+)
 
 const FRAReports = () => {
   const [isUploadReportToggled, setUploadReportToggled] = useState(false)
@@ -428,9 +483,16 @@ const FRAReports = () => {
     },
   })
 
-  const [selectedFile, setSelectedFile] = useState(null)
+  const fraSubmissionHistory = useSelector(
+    (state) => state.fraReports.submissionHistory
+  )
+
+  const latestSubmission =
+    fraSubmissionHistory && fraSubmissionHistory.length > 0
+      ? fraSubmissionHistory[0]
+      : null
 
-  // const fraSubmissionHistory = useSelector((state) => state.fraReports)
+  const [selectedFile, setSelectedFile] = useState(latestSubmission)
 
   const dispatch = useDispatch()
 
@@ -543,7 +605,7 @@ const FRAReports = () => {
 
   const handleUpload = ({ file: selectedFile }) => {
     const onFileUploadSuccess = () => {
-      setSelectedFile(null) // once we have the latest file in submission history, conditional setting of state in constructor should be sufficient
+      setSelectedFile(null)
       setLocalAlertState({
         active: true,
         type: 'success',
@@ -573,6 +635,10 @@ const FRAReports = () => {
     )
   }
 
+  const handleDownloadFile = (file) => {
+    dispatch(download(file))
+  }
+
   const getReportTypeLabel = () => {
     if (isUploadReportToggled) {
       const { reportType } = searchFormValues
@@ -595,7 +661,7 @@ const FRAReports = () => {
   }
 
   useEffect(() => {
-    if (sttList.length === 0) {
+    if (sttList && sttList.length === 0) {
       dispatch(fetchSttList())
     }
   }, [dispatch, sttList])
@@ -648,13 +714,25 @@ const FRAReports = () => {
               setUploadReportToggled(false)
             }}
             setLocalAlertState={setLocalAlertState}
-            file={selectedFile}
+            file={selectedFile ? selectedFile : latestSubmission}
             setSelectedFile={setSelectedFile}
             section={getReportTypeLabel()}
             error={uploadError}
             setError={setUploadError}
           />
-          <SubmissionHistory />
+
+          <div
+            className="submission-history-section usa-table-container--scrollable"
+            style={{ maxWidth: '100%' }}
+            tabIndex={0}
+          >
+            <PaginatedComponent pageSize={5} data={fraSubmissionHistory}>
+              <SubmissionHistory
+                sectionName={getReportTypeLabel()}
+                handleDownloadFile={handleDownloadFile}
+              />
+            </PaginatedComponent>
+          </div>
         </>
       )}