IO-836 Server Side Job Costing

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

@@ -1,13 +1,11 @@
-import { useQuery } from "@apollo/client";
 import { Modal } from "antd";
-import React from "react";
+import axios from "axios";
+import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
-import { QUERY_JOB_COSTING_DETAILS } from "../../graphql/jobs.queries";
 import { toggleModalVisible } from "../../redux/modals/modals.actions";
 import { selectJobCosting } from "../../redux/modals/modals.selectors";
-import AlertComponent from "../alert/alert.component";
 import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 import JobCostingModalComponent from "./job-costing-modal.component";
 
@@ -24,14 +22,25 @@ export function JobCostingModalContainer({
   toggleModalVisible,
 }) {
   const { t } = useTranslation();
-
+  const [costingData, setCostingData] = useState(null);
   const { visible, context } = jobCostingModal;
   const { jobId } = context;
 
-  const { loading, error, data } = useQuery(QUERY_JOB_COSTING_DETAILS, {
-    variables: { id: jobId },
-    skip: !jobId,
-  });
+  // const { loading, error, data } = useQuery(QUERY_JOB_COSTING_DETAILS, {
+  //   variables: { id: jobId },
+  //   skip: !jobId,
+  // });
+
+  useEffect(() => {
+    async function getData() {
+      if (jobId && visible) {
+        const { data } = await axios.post("/job/costing", { jobid: jobId });
+        console.log(data);
+        setCostingData(data);
+      }
+    }
+    getData();
+  }, [jobId, visible]);
 
   return (
     <Modal
@@ -43,11 +52,13 @@ export function JobCostingModalContainer({
       width="90%"
       destroyOnClose
     >
-      {error ? <AlertComponent message={error.message} type="error" /> : null}
-      {loading ? (
-        <LoadingSpinner loading={loading} />
+      {!costingData ? (
+        <LoadingSpinner loading={true} />
       ) : (
-        <JobCostingModalComponent job={data && data.jobs_by_pk} />
+        <JobCostingModalComponent
+          costCenterData={costingData.costCenterData}
+          summaryData={costingData.summaryData}
+        />
       )}
     </Modal>
   );