- Moved model to parent component

- Add state props to update modal based on which files reprocessed button is clicked - made the reprocessed button a separate component
raft-tech · Dec 11, 2024 · 8f5e524 · 8f5e524
1 parent eab0955
commit 8f5e524
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 33 deletions.
diff --git a/tdrs-frontend/src/components/Reports/Reports.jsx b/tdrs-frontend/src/components/Reports/Reports.jsx
@@ -17,6 +17,7 @@ import { fetchSttList } from '../../actions/sttList'
 import Modal from '../Modal'
 import SegmentedControl from '../SegmentedControl'
 import SubmissionHistory from '../SubmissionHistory'
+import ReprocessedModal from '../SubmissionHistory/ReprocessedModal'
 import { selectPrimaryUserRole } from '../../selectors/auth'
 
 /**
@@ -55,6 +56,9 @@ function Reports() {
   const [formValidation, setFormValidationState] = useState({})
   const [touched, setTouched] = useState({})
 
+  const [reprocessedModalVisible, setReprocessedModalVisible] = useState(false)
+  const [reprocessedDate, setReprocessedDate] = useState('')
+
   const quarters = {
     Q1: 'Quarter 1 (October - December)',
     Q2: 'Quarter 2 (January - March)',
@@ -472,6 +476,10 @@ function Reports() {
                 stt: stt,
                 file_type: fileTypeInputValue,
               }}
+              reprocessedState={{
+                setModalVisible: setReprocessedModalVisible,
+                setDate: setReprocessedDate,
+              }}
             />
           )}
         </>
@@ -499,6 +507,11 @@ function Reports() {
           },
         ]}
       />
+      <ReprocessedModal
+        date={reprocessedDate}
+        isVisible={reprocessedModalVisible}
+        setModalVisible={setReprocessedModalVisible}
+      />
     </>
   )
 }

diff --git a/tdrs-frontend/src/components/SubmissionHistory/CaseAggregatesTable.jsx b/tdrs-frontend/src/components/SubmissionHistory/CaseAggregatesTable.jsx
@@ -8,7 +8,7 @@ import {
   downloadFile,
   getErrorReportStatus,
 } from './helpers'
-import ReprocessedModal from './ReprocessedModal'
+import { ReprocessedButton } from './ReprocessedModal'
 
 const MonthSubRow = ({ data }) =>
   data ? (
@@ -25,15 +25,20 @@ const MonthSubRow = ({ data }) =>
     </>
   )
 
-const CaseAggregatesRow = ({ file }) => {
+const CaseAggregatesRow = ({ file, reprocessedState }) => {
   const dispatch = useDispatch()
-  const reprocessedOn = formatDate(getReprocessedDate(file))
+  const reprocessedDate = formatDate(getReprocessedDate(file))
   return (
     <>
       <tr>
         <th scope="rowgroup" rowSpan={3}>
           {formatDate(file.createdAt) + ' by ' + file.submittedBy}
-          {hasReparsed(file) && <ReprocessedModal date={reprocessedOn} />}
+          {hasReparsed(file) && (
+            <ReprocessedButton
+              date={reprocessedDate}
+              reprocessedState={reprocessedState}
+            />
+          )}
         </th>
 
         <th scope="rowgroup" rowSpan={3}>
@@ -76,7 +81,7 @@ const CaseAggregatesRow = ({ file }) => {
   )
 }
 
-export const CaseAggregatesTable = ({ files }) => (
+export const CaseAggregatesTable = ({ files, reprocessedState }) => (
   <>
     <thead>
       <tr>
@@ -108,7 +113,11 @@ export const CaseAggregatesTable = ({ files }) => (
     </thead>
     <tbody>
       {files.map((file) => (
-        <CaseAggregatesRow key={file.id} file={file} />
+        <CaseAggregatesRow
+          key={file.id}
+          file={file}
+          reprocessedState={reprocessedState}
+        />
       ))}
     </tbody>
   </>

diff --git a/tdrs-frontend/src/components/SubmissionHistory/ReprocessedModal.jsx b/tdrs-frontend/src/components/SubmissionHistory/ReprocessedModal.jsx
@@ -14,30 +14,40 @@ const Message = ({ date }) => {
   )
 }
 
-const ReprocessedModal = ({ date }) => {
-  const [modalVisible, setModalVisible] = useState(false)
-  const message = <Message date={date} />
+export const ReprocessedButton = ({ date, reprocessedState }) => {
   return (
     <div>
-      <button className="reprocessed" onClick={() => setModalVisible(true)}>
+      <button
+        className="reprocessed"
+        onClick={() => {
+          reprocessedState.setDate(date)
+          reprocessedState.setModalVisible(true)
+        }}
+      >
         Reprocessed &#9432;
       </button>
-      <Modal
-        title="Most Recent Reprocessed Date"
-        message={message}
-        isVisible={modalVisible}
-        buttons={[
-          {
-            key: '1',
-            text: 'Close',
-            onClick: () => {
-              setModalVisible(false)
-            },
-          },
-        ]}
-      />
     </div>
   )
 }
 
+const ReprocessedModal = ({ date, isVisible, setModalVisible }) => {
+  const message = <Message date={date} />
+  return (
+    <Modal
+      title="Most Recent Reprocessed Date"
+      message={message}
+      isVisible={isVisible}
+      buttons={[
+        {
+          key: '1',
+          text: 'Close',
+          onClick: () => {
+            setModalVisible(false)
+          },
+        },
+      ]}
+    />
+  )
+}
+
 export default ReprocessedModal
diff --git a/tdrs-frontend/src/components/SubmissionHistory/SubmissionHistory.jsx b/tdrs-frontend/src/components/SubmissionHistory/SubmissionHistory.jsx
@@ -9,7 +9,12 @@ import { useState } from 'react'
 import { CaseAggregatesTable } from './CaseAggregatesTable'
 import { TotalAggregatesTable } from './TotalAggregatesTable'
 
-const SectionSubmissionHistory = ({ section, label, files }) => {
+const SectionSubmissionHistory = ({
+  section,
+  label,
+  files,
+  reprocessedState,
+}) => {
   const pageSize = 5
   const [resultsPage, setResultsPage] = useState(1)
 
@@ -30,7 +35,10 @@ const SectionSubmissionHistory = ({ section, label, files }) => {
       <table className="usa-table usa-table--striped">
         <caption>{`Section ${section} - ${label}`}</caption>
         {files && files.length > 0 ? (
-          <TableComponent files={files.slice(pageStart, pageEnd)} />
+          <TableComponent
+            files={files.slice(pageStart, pageEnd)}
+            reprocessedState={reprocessedState}
+          />
         ) : (
           <span>No data available.</span>
         )}
@@ -57,9 +65,13 @@ SectionSubmissionHistory.propTypes = {
     year: PropTypes.string,
   }),
   files: PropTypes.array,
+  reprocessedState: PropTypes.shape({
+    setModalVisible: PropTypes.func,
+    setDate: PropTypes.func,
+  }),
 }
 
-const SubmissionHistory = ({ filterValues }) => {
+const SubmissionHistory = ({ filterValues, reprocessedState }) => {
   const dispatch = useDispatch()
   const [hasFetchedFiles, setHasFetchedFiles] = useState(false)
   const { files } = useSelector((state) => state.reports)
@@ -95,6 +107,7 @@ const SubmissionHistory = ({ filterValues }) => {
               label={section}
               filterValues={filterValues}
               files={files.filter((f) => f.section.includes(section))}
+              reprocessedState={reprocessedState}
             />
           )
         })}

diff --git a/tdrs-frontend/src/components/SubmissionHistory/TotalAggregatesTable.jsx b/tdrs-frontend/src/components/SubmissionHistory/TotalAggregatesTable.jsx
@@ -8,7 +8,7 @@ import {
   downloadFile,
   getErrorReportStatus,
 } from './helpers'
-import ReprocessedModal from './ReprocessedModal'
+import { ReprocessedButton } from './ReprocessedModal'
 
 const MonthSubRow = ({ data }) =>
   data ? (
@@ -23,15 +23,20 @@ const MonthSubRow = ({ data }) =>
     </>
   )
 
-const TotalAggregatesRow = ({ file }) => {
+const TotalAggregatesRow = ({ file, reprocessedState }) => {
   const dispatch = useDispatch()
-  const reprocessedOn = formatDate(getReprocessedDate(file))
+  const reprocessedDate = formatDate(getReprocessedDate(file))
   return (
     <>
       <tr>
         <th scope="rowgroup" rowSpan={3}>
           {formatDate(file.createdAt) + ' by ' + file.submittedBy}
-          {hasReparsed(file) && <ReprocessedModal date={reprocessedOn} />}
+          {hasReparsed(file) && (
+            <ReprocessedButton
+              date={reprocessedDate}
+              reprocessedState={reprocessedState}
+            />
+          )}
         </th>
 
         <th scope="rowgroup" rowSpan={3}>
@@ -70,7 +75,7 @@ const TotalAggregatesRow = ({ file }) => {
   )
 }
 
-export const TotalAggregatesTable = ({ files }) => (
+export const TotalAggregatesTable = ({ files, reprocessedState }) => (
   <>
     <thead>
       <tr>
@@ -96,7 +101,11 @@ export const TotalAggregatesTable = ({ files }) => (
     </thead>
     <tbody>
       {files.map((file) => (
-        <TotalAggregatesRow key={file.id} file={file} />
+        <TotalAggregatesRow
+          key={file.id}
+          file={file}
+          reprocessedState={reprocessedState}
+        />
       ))}
     </tbody>
   </>