IO-795 Resolve parts reconciliation issues.

client/src/components/job-reconciliation-modal/job-reconciliation.modal.container.jsx

@@ -1,11 +1,15 @@
+import { useQuery } from "@apollo/client";
 import { Modal } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
+import { GET_JOB_RECONCILIATION_BY_PK } from "../../graphql/jobs.queries";
 import { toggleModalVisible } from "../../redux/modals/modals.actions";
 import { selectReconciliation } from "../../redux/modals/modals.selectors";
 import JobReconciliationModalComponent from "./job-reconciliation-modal.component";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
+import AlertComponent from "../alert/alert.component";
 
 const mapStateToProps = createStructuredSelector({
   reconciliationModal: selectReconciliation,
@@ -20,7 +24,12 @@ function JobReconciliationModalContainer({
 }) {
   const { t } = useTranslation();
   const { context, visible } = reconciliationModal;
-  const { job, bills } = context;
+  const { job } = context;
+
+  const { loading, error, data } = useQuery(GET_JOB_RECONCILIATION_BY_PK, {
+    variables: { id: job && job.id },
+    skip: !(job && job.id) || !visible,
+  });
 
   const handleCancel = () => {
     toggleModalVisible();
@@ -37,7 +46,15 @@ function JobReconciliationModalContainer({
       cancelButtonProps={{ display: "none" }}
       destroyOnClose
     >
-      <JobReconciliationModalComponent job={job} bills={bills} />
+      <LoadingSpinner loading={loading}>
+        {error && <AlertComponent message={error.message} type="error" />}
+        {data && (
+          <JobReconciliationModalComponent
+            job={data && data.jobs_by_pk}
+            bills={data && data.bills}
+          />
+        )}
+      </LoadingSpinner>
     </Modal>
   );
 }