Added base logic for seeing jobs to supplement. Supplement import not yet working.

client/src/components/jobs-available-supplement/jobs-available-supplement.container.jsx

@@ -1,12 +1,21 @@
-import React from "react";
+import { notification } from "antd";
+import React, { useState } from "react";
 import { useMutation, useQuery } from "react-apollo";
-import { DELETE_ALL_AVAILABLE_SUPPLEMENT_JOBS, QUERY_AVAILABLE_SUPPLEMENT_JOBS } from "../../graphql/available-jobs.queries";
+import { useTranslation } from "react-i18next";
+import { withRouter } from "react-router-dom";
+import {
+  DELETE_ALL_AVAILABLE_SUPPLEMENT_JOBS,
+  QUERY_AVAILABLE_SUPPLEMENT_JOBS
+} from "../../graphql/available-jobs.queries";
+import { UPDATE_JOB } from "../../graphql/jobs.queries";
 import AlertComponent from "../alert/alert.component";
 import JobsAvailableSupplementComponent from "./jobs-available-supplement.component";
+import LoadingSpinner from "../loading-spinner/loading-spinner.component";
 
-export default function JobsAvailableSupplementContainer({
+export default withRouter(function JobsAvailableSupplementContainer({
   deleteJob,
-  estDataLazyLoad
+  estDataLazyLoad,
+  history
 }) {
   const { loading, error, data, refetch } = useQuery(
     QUERY_AVAILABLE_SUPPLEMENT_JOBS,
@@ -14,17 +23,96 @@ export default function JobsAvailableSupplementContainer({
       fetchPolicy: "network-only"
     }
   );
+  const { t } = useTranslation();
+
   const [deleteAllNewJobs] = useMutation(DELETE_ALL_AVAILABLE_SUPPLEMENT_JOBS);
 
+  const [modalVisible, setModalVisible] = useState(false);
+  const [selectedJob, setSelectedJob] = useState(null);
+  const [insertLoading, setInsertLoading] = useState(false);
+  const [updateJob] = useMutation(UPDATE_JOB);
+  const [loadEstData, estData] = estDataLazyLoad;
+const importOptionsState = useState({overrideHeaders: false,})
+
+  const onModalOk = () => {
+    setModalVisible(false);
+    setInsertLoading(true);
+
+    if (
+      !(
+        estData.data &&
+        estData.data.available_jobs_by_pk &&
+        estData.data.available_jobs_by_pk.est_data
+      )
+    ) {
+      //We don't have the right data. Error!
+      setInsertLoading(false);
+      notification["error"]({
+        message: t("jobs.errors.creating", { error: "No job data present." })
+      });
+    } else {
+      updateJob({
+        variables: {
+          job: estData.data.available_jobs_by_pk.est_data //STRAIGHT DATA PLACE, SHOULD REMOVE
+        }
+      })
+        .then(r => {
+          notification["success"]({
+            message: t("jobs.successes.created"),
+            onClick: () => {
+              console.log("r", r);
+              history.push(
+                `/manage/jobs/${r.data.update_jobs.returning[0].id}`
+              );
+            }
+          });
+          //Job has been inserted. Clean up the available jobs record.
+          deleteJob({
+            variables: { id: estData.data.available_jobs_by_pk.id }
+          }).then(r => {
+            refetch();
+            setInsertLoading(false);
+          });
+        })
+        .catch(r => {
+          //error while inserting
+          notification["error"]({
+            message: t("jobs.errors.creating", { error: r.message })
+          });
+          refetch();
+          setInsertLoading(false);
+        });
+    }
+  };
+
+  const onModalCancel = () => {
+    setModalVisible(false);
+    setSelectedJob(null);
+  };
+
   if (error) return <AlertComponent type="error" message={error.message} />;
   return (
-    <JobsAvailableSupplementComponent
-      loading={loading}
-      data={data}
-      refetch={refetch}
-      deleteJob={deleteJob}
-      deleteAllNewJobs={deleteAllNewJobs}
-      estDataLazyLoad={estDataLazyLoad}
-    />
+    <LoadingSpinner
+      loading={insertLoading}
+      message={t("jobs.labels.creating_new_job")}
+    >
+      <JobsAvailableSupplementComponent
+        loading={loading}
+        data={data}
+        refetch={refetch}
+        deleteJob={deleteJob}
+        updateJob={updateJob}
+        onModalOk={onModalOk}
+        onModalCancel={onModalCancel}
+        modalVisible={modalVisible}
+        setModalVisible={setModalVisible}
+        selectedJob={selectedJob}
+        setSelectedJob={setSelectedJob}
+        deleteAllNewJobs={deleteAllNewJobs}
+        loadEstData={loadEstData}
+        estData={estData}
+        importOptionsState={importOptionsState}
+      />
+    </LoadingSpinner>
   );
-}
+});