Add model-year in query string to solve tab-names inconsistency durin…

…g loading issue.
bcgov · Dec 18, 2024 · cc7f6aa · cc7f6aa
1 parent 4d7cb3c
commit cc7f6aa
Show file tree

Hide file tree

Showing 11 changed files with 206 additions and 201 deletions.
diff --git a/frontend/src/app/routes/Compliance.js b/frontend/src/app/routes/Compliance.js
@@ -36,3 +36,7 @@ const COMPLIANCE = {
 }
 
 export default COMPLIANCE
+
+export const insertIdAndYear = (route, id, modelYear) => {
+  return `${route.replace(":id", id)}?year=${modelYear}`;
+}
diff --git a/frontend/src/compliance/AssessmentContainer.js b/frontend/src/compliance/AssessmentContainer.js
@@ -1,23 +1,24 @@
-import axios from 'axios'
-import React, { useEffect, useState } from 'react'
-import { useParams } from 'react-router-dom'
-import { withRouter } from 'react-router'
-import Big from 'big.js'
-import Loading from '../app/components/Loading'
-import CONFIG from '../app/config'
-import history from '../app/History'
-import ROUTES_COMPLIANCE from '../app/routes/Compliance'
-import CustomPropTypes from '../app/utilities/props'
-import AssessmentDetailsPage from './components/AssessmentDetailsPage'
-import calculateCreditReductionBig from '../app/utilities/calculateCreditReductionBig'
-import getComplianceObligationDetails from '../app/utilities/getComplianceObligationDetails'
-import ROUTES_SUPPLEMENTARY from '../app/routes/SupplementaryReport'
-import { getNewBalancesStructure, getNewDeficitsStructure } from '../app/utilities/getNewStructures'
-import getTotalReductionBig from '../app/utilities/getTotalReductionBig'
-import getClassAReductionBig from '../app/utilities/getClassAReductionBig'
-import getUnspecifiedClassReductionBig from '../app/utilities/getUnspecifiedClassReductionBig'
-import { convertBalances, convertCarryOverDeficits } from '../app/utilities/convertToBig'
-import getSnapshottedComplianceRatioReductions from '../app/utilities/getSnapshottedReductions'
+import axios from "axios";
+import React, { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
+import { withRouter } from "react-router";
+import Big from "big.js";
+import Loading from "../app/components/Loading";
+import CONFIG from "../app/config";
+import history from "../app/History";
+import ROUTES_COMPLIANCE from "../app/routes/Compliance";
+import { insertIdAndYear } from "../app/routes/Compliance";
+import CustomPropTypes from "../app/utilities/props";
+import AssessmentDetailsPage from "./components/AssessmentDetailsPage";
+import calculateCreditReductionBig from "../app/utilities/calculateCreditReductionBig";
+import getComplianceObligationDetails from "../app/utilities/getComplianceObligationDetails";
+import ROUTES_SUPPLEMENTARY from "../app/routes/SupplementaryReport";
+import { getNewBalancesStructure, getNewDeficitsStructure } from "../app/utilities/getNewStructures";
+import getTotalReductionBig from "../app/utilities/getTotalReductionBig";
+import getClassAReductionBig from "../app/utilities/getClassAReductionBig";
+import getUnspecifiedClassReductionBig from "../app/utilities/getUnspecifiedClassReductionBig";
+import { convertBalances, convertCarryOverDeficits } from "../app/utilities/convertToBig";
+import getSnapshottedComplianceRatioReductions from "../app/utilities/getSnapshottedReductions";
 
 const AssessmentContainer = (props) => {
   const { keycloak, user } = props
@@ -74,7 +75,7 @@ const AssessmentContainer = (props) => {
       .patch(ROUTES_COMPLIANCE.REPORT_DETAILS.replace(/:id/g, id), data)
       .then((response) => {
         history.push(ROUTES_COMPLIANCE.REPORTS)
-        history.replace(ROUTES_COMPLIANCE.REPORT_SUMMARY.replace(':id', id))
+        history.replace(insertIdAndYear(ROUTES_COMPLIANCE.REPORT_SUMMARY, id, reportYear))
       })
   }
 

diff --git a/frontend/src/compliance/ComplianceObligationContainer.js b/frontend/src/compliance/ComplianceObligationContainer.js
@@ -1,23 +1,27 @@
-import axios from 'axios'
-import React, { useEffect, useState } from 'react'
-import { useParams } from 'react-router-dom'
-import CustomPropTypes from '../app/utilities/props'
-import ComplianceReportTabs from './components/ComplianceReportTabs'
-import ComplianceObligationDetailsPage from './components/ComplianceObligationDetailsPage'
-import history from '../app/History'
-import ROUTES_SIGNING_AUTHORITY_ASSERTIONS from '../app/routes/SigningAuthorityAssertions'
-import ROUTES_COMPLIANCE from '../app/routes/Compliance'
-import CONFIG from '../app/config'
-import calculateCreditReduction from '../app/utilities/calculateCreditReduction'
-import getClassAReduction from '../app/utilities/getClassAReduction'
-import getTotalReduction from '../app/utilities/getTotalReduction'
-import getUnspecifiedClassReduction from '../app/utilities/getUnspecifiedClassReduction'
-import getComplianceObligationDetails from '../app/utilities/getComplianceObligationDetails'
-import deleteModelYearReport from '../app/utilities/deleteModelYearReport'
-import getNewProvisionalBalance from '../app/utilities/getNewProvisionalBalance'
-import { getNewBalancesStructure, getNewDeficitsStructure } from '../app/utilities/getNewStructures'
+import axios from "axios";
+import React, { useEffect, useState } from "react";
+import { useParams, useLocation } from "react-router-dom";
+import CustomPropTypes from "../app/utilities/props";
+import ComplianceReportTabs from "./components/ComplianceReportTabs";
+import ComplianceObligationDetailsPage from "./components/ComplianceObligationDetailsPage";
+import history from "../app/History";
+import ROUTES_SIGNING_AUTHORITY_ASSERTIONS from "../app/routes/SigningAuthorityAssertions";
+import ROUTES_COMPLIANCE from "../app/routes/Compliance";
+import { insertIdAndYear } from "../app/routes/Compliance";
+import CONFIG from "../app/config";
+import calculateCreditReduction from "../app/utilities/calculateCreditReduction";
+import getClassAReduction from "../app/utilities/getClassAReduction";
+import getTotalReduction from "../app/utilities/getTotalReduction";
+import getUnspecifiedClassReduction from "../app/utilities/getUnspecifiedClassReduction";
+import getComplianceObligationDetails from "../app/utilities/getComplianceObligationDetails";
+import deleteModelYearReport from "../app/utilities/deleteModelYearReport";
+import getNewProvisionalBalance from "../app/utilities/getNewProvisionalBalance";
+import { getNewBalancesStructure, getNewDeficitsStructure } from "../app/utilities/getNewStructures";
+import qs from "qs";
 
 const ComplianceObligationContainer = (props) => {
+  const location = useLocation();
+  const query = qs.parse(location.search, { ignoreQueryPrefix: true });
   const { user } = props
 
   const [assertions, setAssertions] = useState([])
@@ -36,7 +40,7 @@ const ComplianceObligationContainer = (props) => {
   const [ratios, setRatios] = useState({})
   const [reportDetails, setReportDetails] = useState({})
   const [reportYear, setReportYear] = useState(
-    CONFIG.FEATURES.MODEL_YEAR_REPORT.DEFAULT_YEAR
+    isNaN(query.year) ? CONFIG.FEATURES.MODEL_YEAR_REPORT.DEFAULT_YEAR : parseInt(query.year)
   )
   const [sales, setSales] = useState('')
   const [statuses, setStatuses] = useState({})
@@ -56,12 +60,11 @@ const ComplianceObligationContainer = (props) => {
       .patch(ROUTES_COMPLIANCE.REPORT_DETAILS.replace(/:id/g, id), data)
       .then((response) => {
         history.push(ROUTES_COMPLIANCE.REPORTS)
-        history.replace(
-          ROUTES_COMPLIANCE.REPORT_CREDIT_ACTIVITY.replace(
-            ':id',
-            response.data.id
-          )
-        )
+        history.replace(insertIdAndYear(
+          ROUTES_COMPLIANCE.REPORT_CREDIT_ACTIVITY,
+          response.data.id,
+          reportYear
+        ))
       })
   }
 
@@ -293,8 +296,8 @@ const ComplianceObligationContainer = (props) => {
     }
     axios.post(ROUTES_COMPLIANCE.OBLIGATION, data).then(() => {
       history.push(ROUTES_COMPLIANCE.REPORTS)
-      history.replace(
-        ROUTES_COMPLIANCE.REPORT_CREDIT_ACTIVITY.replace(':id', id)
+      history.replace(insertIdAndYear(
+        ROUTES_COMPLIANCE.REPORT_CREDIT_ACTIVITY, id, reportYear)
       )
     })
   }

diff --git a/frontend/src/compliance/ComplianceReportSummaryContainer.js b/frontend/src/compliance/ComplianceReportSummaryContainer.js
@@ -1,17 +1,21 @@
 import axios from 'axios'
 import React, { useEffect, useState } from 'react'
-import { useParams } from 'react-router-dom'
+import { useParams, useLocation } from 'react-router-dom'
 import CONFIG from '../app/config'
 import history from '../app/History'
 import Loading from '../app/components/Loading'
 import ROUTES_COMPLIANCE from '../app/routes/Compliance'
+import { insertIdAndYear } from '../app/routes/Compliance'
 import CustomPropTypes from '../app/utilities/props'
 import ComplianceReportTabs from './components/ComplianceReportTabs'
 import ComplianceReportSummaryDetailsPage from './components/ComplianceReportSummaryDetailsPage'
 import ROUTES_SIGNING_AUTHORITY_ASSERTIONS from '../app/routes/SigningAuthorityAssertions'
 import deleteModelYearReport from '../app/utilities/deleteModelYearReport'
+import qs from "qs";
 
 const ComplianceReportSummaryContainer = (props) => {
+  const location = useLocation();
+  const query = qs.parse(location.search, { ignoreQueryPrefix: true });
   const { user } = props
   const [loading, setLoading] = useState(true)
   const { id } = useParams()
@@ -24,7 +28,7 @@ const ComplianceReportSummaryContainer = (props) => {
   const [creditActivityDetails, setCreditActivityDetails] = useState({})
   const [pendingBalanceExist, setPendingBalanceExist] = useState(false)
   const [modelYear, setModelYear] = useState(
-    CONFIG.FEATURES.MODEL_YEAR_REPORT.DEFAULT_YEAR
+    isNaN(query.year) ? CONFIG.FEATURES.MODEL_YEAR_REPORT.DEFAULT_YEAR : parseInt(query.year)
   )
   const [assertions, setAssertions] = useState([])
 
@@ -49,7 +53,7 @@ const ComplianceReportSummaryContainer = (props) => {
 
     axios.patch(ROUTES_COMPLIANCE.REPORT_SUBMISSION.replace(':id', id), data).then(() => {
       history.push(ROUTES_COMPLIANCE.REPORTS)
-      history.replace(ROUTES_COMPLIANCE.REPORT_SUMMARY.replace(':id', id))
+      history.replace(insertIdAndYear(ROUTES_COMPLIANCE.REPORT_SUMMARY, id, modelYear))
     })
   }
 
@@ -366,9 +370,6 @@ const ComplianceReportSummaryContainer = (props) => {
   useEffect(() => {
     refreshDetails()
   }, [id])
-  if (loading) {
-    return <Loading />
-  }
 
   return (
     <>

diff --git a/frontend/src/compliance/ConsumerSalesContainer.js b/frontend/src/compliance/ConsumerSalesContainer.js
@@ -1,18 +1,21 @@
-import React, { useEffect, useState } from 'react'
-import axios from 'axios'
-import { useParams } from 'react-router-dom'
-
-import CONFIG from '../app/config'
-import history from '../app/History'
-import CustomPropTypes from '../app/utilities/props'
-import ComplianceReportTabs from './components/ComplianceReportTabs'
-import ConsumerSalesDetailsPage from './components/ConsumerSalesDetailsPage'
-import ROUTES_COMPLIANCE from '../app/routes/Compliance'
-import ROUTES_SIGNING_AUTHORITY_ASSERTIONS from '../app/routes/SigningAuthorityAssertions'
-import deleteModelYearReport from '../app/utilities/deleteModelYearReport'
-import FORECAST_ROUTES from '../salesforecast/constants/routes'
+import React, { useEffect, useState } from "react";
+import axios from "axios";
+import { useParams, useLocation } from "react-router-dom";
+import CONFIG from "../app/config";
+import history from "../app/History";
+import CustomPropTypes from "../app/utilities/props";
+import ComplianceReportTabs from "./components/ComplianceReportTabs";
+import ConsumerSalesDetailsPage from "./components/ConsumerSalesDetailsPage";
+import ROUTES_COMPLIANCE from "../app/routes/Compliance";
+import { insertIdAndYear } from "../app/routes/Compliance";
+import ROUTES_SIGNING_AUTHORITY_ASSERTIONS from "../app/routes/SigningAuthorityAssertions";
+import deleteModelYearReport from "../app/utilities/deleteModelYearReport";
+import FORECAST_ROUTES from "../salesforecast/constants/routes";
+import qs from "qs";
 
 const ConsumerSalesContainer = (props) => {
+  const location = useLocation();
+  const query = qs.parse(location.search, { ignoreQueryPrefix: true });
   const { keycloak, user } = props
   const [loading, setLoading] = useState(true)
   const [vehicles, setVehicles] = useState([])
@@ -21,7 +24,7 @@ const ConsumerSalesContainer = (props) => {
   const [checked, setChecked] = useState(false)
   const [checkboxes, setCheckboxes] = useState([])
   const [modelYear, setModelYear] = useState(
-    CONFIG.FEATURES.MODEL_YEAR_REPORT.DEFAULT_YEAR
+    isNaN(query.year) ? CONFIG.FEATURES.MODEL_YEAR_REPORT.DEFAULT_YEAR : parseInt(query.year)
   )
   const [disabledCheckboxes, setDisabledCheckboxes] = useState(false);
   const [details, setDetails] = useState({})
@@ -104,10 +107,7 @@ const ConsumerSalesContainer = (props) => {
       .then((response) => {
         history.push(ROUTES_COMPLIANCE.REPORTS)
         history.replace(
-          ROUTES_COMPLIANCE.REPORT_CONSUMER_SALES.replace(
-            ':id',
-            response.data.id
-          )
+          insertIdAndYear(ROUTES_COMPLIANCE.REPORT_CONSUMER_SALES, id, modelYear)
         )
       })
   }
@@ -143,7 +143,7 @@ const ConsumerSalesContainer = (props) => {
         setDisabledCheckboxes(true)
         history.push(ROUTES_COMPLIANCE.REPORTS)
         history.replace(
-          ROUTES_COMPLIANCE.REPORT_CONSUMER_SALES.replace(/:id/g, id)
+          insertIdAndYear(ROUTES_COMPLIANCE.REPORT_CONSUMER_SALES, id, modelYear)
         )
       })
     }

diff --git a/frontend/src/compliance/SupplierInformationContainer.js b/frontend/src/compliance/SupplierInformationContainer.js
@@ -1,29 +1,29 @@
-import axios from 'axios'
-import React, { useEffect, useState } from 'react'
-import PropTypes from 'prop-types'
-import { useParams } from 'react-router-dom'
-import { withRouter } from 'react-router'
-
-import CONFIG from '../app/config'
-import history from '../app/History'
-import ROUTES_COMPLIANCE from '../app/routes/Compliance'
-import ROUTES_VEHICLES from '../app/routes/Vehicles'
-import CustomPropTypes from '../app/utilities/props'
-import ComplianceReportTabs from './components/ComplianceReportTabs'
-import SupplierInformationDetailsPage from './components/SupplierInformationDetailsPage'
-import ROUTES_SIGNING_AUTHORITY_ASSERTIONS from '../app/routes/SigningAuthorityAssertions'
-import deleteModelYearReport from '../app/utilities/deleteModelYearReport'
-
-const qs = require('qs')
+import axios from "axios";
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import { useParams } from "react-router-dom";
+import { withRouter } from "react-router";
+import CONFIG from "../app/config";
+import history from "../app/History";
+import ROUTES_COMPLIANCE from "../app/routes/Compliance";
+import { insertIdAndYear } from "../app/routes/Compliance";
+import ROUTES_VEHICLES from "../app/routes/Vehicles";
+import CustomPropTypes from "../app/utilities/props";
+import ComplianceReportTabs from "./components/ComplianceReportTabs";
+import SupplierInformationDetailsPage from "./components/SupplierInformationDetailsPage";
+import ROUTES_SIGNING_AUTHORITY_ASSERTIONS from "../app/routes/SigningAuthorityAssertions";
+import deleteModelYearReport from "../app/utilities/deleteModelYearReport";
+import qs from "qs";
 
 const SupplierInformationContainer = (props) => {
   const { location, keycloak, user } = props
+  const query = qs.parse(location.search, { ignoreQueryPrefix: true });
   const { id } = useParams()
   const [assertions, setAssertions] = useState([])
   const [checkboxes, setCheckboxes] = useState([])
   const [details, setDetails] = useState({})
   const [modelYear, setModelYear] = useState(
-    CONFIG.FEATURES.MODEL_YEAR_REPORT.DEFAULT_YEAR
+    isNaN(query.year) ? CONFIG.FEATURES.MODEL_YEAR_REPORT.DEFAULT_YEAR : parseInt(query.year)
   )
   const [statuses, setStatuses] = useState({
     supplierInformation: {
@@ -32,8 +32,6 @@ const SupplierInformationContainer = (props) => {
     }
   })
 
-  const query = qs.parse(location.search, { ignoreQueryPrefix: true })
-
   const [loading, setLoading] = useState(true)
   const [makes, setMakes] = useState([])
   const [make, setMake] = useState('')
@@ -72,22 +70,20 @@ const SupplierInformationContainer = (props) => {
         .patch(ROUTES_COMPLIANCE.REPORT_DETAILS.replace(/:id/g, id), data)
         .then((response) => {
           history.push(ROUTES_COMPLIANCE.REPORTS)
-          history.replace(
-            ROUTES_COMPLIANCE.REPORT_SUPPLIER_INFORMATION.replace(
-              ':id',
-              response.data.id
-            )
-          )
+          history.replace(insertIdAndYear(
+            ROUTES_COMPLIANCE.REPORT_SUPPLIER_INFORMATION,
+            response.data.id,
+            modelYear
+          ))
         })
     } else {
       axios.post(ROUTES_COMPLIANCE.REPORTS, data).then((response) => {
         history.push(ROUTES_COMPLIANCE.REPORTS)
-        history.replace(
-          ROUTES_COMPLIANCE.REPORT_SUPPLIER_INFORMATION.replace(
-            ':id',
-            response.data.id
-          )
-        )
+        history.replace(insertIdAndYear(
+          ROUTES_COMPLIANCE.REPORT_SUPPLIER_INFORMATION,
+          response.data.id,
+          modelYear
+        ))
       })
     }
   }
@@ -137,12 +133,11 @@ const SupplierInformationContainer = (props) => {
       .patch(ROUTES_COMPLIANCE.REPORT_DETAILS.replace(/:id/g, id), data)
       .then((response) => {
         history.push(ROUTES_COMPLIANCE.REPORTS)
-        history.replace(
-          ROUTES_COMPLIANCE.REPORT_SUPPLIER_INFORMATION.replace(
-            ':id',
-            response.data.id
-          )
-        )
+        history.replace(insertIdAndYear(
+          ROUTES_COMPLIANCE.REPORT_SUPPLIER_INFORMATION,
+          response.data.id,
+          modelYear
+        ))
       })
   }