Labor allocation on job close BOD-131

client/src/pages/jobs-close/jobs-close.component.jsx

@@ -1,24 +1,25 @@
-import React, { useCallback, useState } from "react";
+import React, { useState } from "react";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { CalculateJob } from "../../components/job-totals-table/job-totals.utility";
 import JobsCloseLaborMaterialAllocation from "../../components/jobs-close-labmat-allocation/jobs-close-labmat-allocation.component";
 import { selectBodyshop } from "../../redux/user/user.selectors";
+
 const mapStateToProps = createStructuredSelector({
   //currentUser: selectCurrentUser
   bodyshop: selectBodyshop,
 });
 
-export function JobsCloseComponent({ job, bodyshop }) {
-  const CalcJobMemoized = useCallback(
-    () => CalculateJob(job, bodyshop.shoprates),
-    [job, bodyshop.shoprates]
+export function JobsCloseComponent({ job, bodyshop, jobTotals }) {
+  const [labmatAllocations, setLabmatAllocations] = useState(
+    Object.keys(jobTotals.rates).reduce((acc, val) => {
+      acc[val] = jobTotals.rates[val];
+      if (val.includes("subtotal")) return acc;
+      //Not a subtotal - therefore can be allocated.
+      acc[val].allocations = [];
+      return acc;
+    }, {})
   );
 
-  const jobTotals = CalcJobMemoized();
-
-  const [labmatAllocations, setLabmatAllocations] = useState(jobTotals.rates);
-
   return (
     <div>
       <JobsCloseLaborMaterialAllocation

client/src/pages/jobs-close/jobs-close.container.jsx

@@ -3,17 +3,25 @@ import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { useParams } from "react-router-dom";
+import { createStructuredSelector } from "reselect";
 import AlertComponent from "../../components/alert/alert.component";
+import { CalculateJob } from "../../components/job-totals-table/job-totals.utility";
+import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
 import { QUERY_JOB_CLOSE_DETAILS } from "../../graphql/jobs.queries";
 import { setBreadcrumbs } from "../../redux/application/application.actions";
+import { selectBodyshop } from "../../redux/user/user.selectors";
 import JobsCloseComponent from "./jobs-close.component";
-import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
+
+const mapStateToProps = createStructuredSelector({
+  //currentUser: selectCurrentUser
+  bodyshop: selectBodyshop,
+});
 
 const mapDispatchToProps = (dispatch) => ({
   setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
 });
 
-export function JobsCloseContainer({ setBreadcrumbs }) {
+export function JobsCloseContainer({ setBreadcrumbs, bodyshop }) {
   const { jobId } = useParams();
   const { loading, error, data } = useQuery(QUERY_JOB_CLOSE_DETAILS, {
     variables: { id: jobId },
@@ -42,12 +50,18 @@ export function JobsCloseContainer({ setBreadcrumbs }) {
     ]);
   }, [setBreadcrumbs, t, jobId, data]);
 
+  console.log("Container rerender");
   if (loading) return <LoadingSpinner />;
-  if (error) return <AlertComponent message={error.message} type='error' />;
+  if (error) return <AlertComponent message={error.message} type="error" />;
+
+  const jobTotals = CalculateJob(data.jobs_by_pk, bodyshop.shoprates);
   return (
     <div>
-      <JobsCloseComponent job={data ? data.jobs_by_pk : {}} />
+      <JobsCloseComponent
+        job={data ? data.jobs_by_pk : {}}
+        jobTotals={jobTotals}
+      />
     </div>
   );
 }
-export default connect(null, mapDispatchToProps)(JobsCloseContainer);
+export default connect(mapStateToProps, mapDispatchToProps)(JobsCloseContainer);