Complete refactor of jobs detail screen.

client/src/pages/jobs-detail/jobs-detail.page.container.jsx

@@ -1,38 +1,79 @@
-import { useQuery } from "@apollo/react-hooks";
+import { Form, notification } from "antd";
 import React, { useEffect } from "react";
+import { useMutation, useQuery } from "react-apollo";
 import { useTranslation } from "react-i18next";
 import AlertComponent from "../../components/alert/alert.component";
 import SpinComponent from "../../components/loading-spinner/loading-spinner.component";
-import { GET_JOB_BY_PK } from "../../graphql/jobs.queries";
-import JobsDetailPage from "./jobs-detail.page";
+import {
+  GET_JOB_BY_PK,
+  UPDATE_JOB,
+  CONVERT_JOB_TO_RO
+} from "../../graphql/jobs.queries";
+import JobsDetailPage from "./jobs-detail.page.component";
 
-function JobsDetailPageContainer({ match, location }) {
+function JobsDetailPageContainer({ match, form }) {
   const { jobId } = match.params;
-  const { hash } = location;
   const { t } = useTranslation();
-  const { loading, error, data } = useQuery(GET_JOB_BY_PK, {
+
+  const { loading, error, data, refetch } = useQuery(GET_JOB_BY_PK, {
     variables: { id: jobId },
     fetchPolicy: "network-only"
   });
+  const [mutationUpdateJob] = useMutation(UPDATE_JOB);
+  const [mutationConvertJob] = useMutation(CONVERT_JOB_TO_RO);
 
   useEffect(() => {
-    document.title = loading
-      ? "..."
-      : t("titles.jobsdetail", {
-          ro_number: data.jobs_by_pk.ro_number
+    document.title =
+      loading && !error
+        ? "..."
+        : t("titles.jobsdetail", {
+            ro_number: data.jobs_by_pk.ro_number
+          });
+  }, [loading, data, t, error]);
+
+  const handleSubmit = e => {
+    e.preventDefault();
+
+    form.validateFieldsAndScroll((err, values) => {
+      if (err) {
+        notification["error"]({
+          message: t("jobs.errors.validationtitle"),
+          description: t("jobs.errors.validation")
         });
-  }, [loading, data, t]);
+      }
+      if (!err) {
+        mutationUpdateJob({
+          variables: { jobId: data.jobs_by_pk.id, job: values }
+        }).then(r =>
+          notification["success"]({
+            message: t("jobs.successes.savetitle")
+          })
+        );
+      }
+    });
+  };
+
+  const handleChange = event => {
+    //const { name, value } = event.target ? event.target : event;
+    //setJobContext({ ...jobContext, [name]: value });
+  };
 
   if (loading) return <SpinComponent />;
   if (error) return <AlertComponent message={error.message} type='error' />;
-
-  return (
+  return data.jobs_by_pk ? (
     <JobsDetailPage
-      hash={hash ? hash.substring(1) : "#lines"}
-      data={data}
-      jobId={jobId}
-      match={match}
+      job={data.jobs_by_pk}
+      mutationUpdateJob={mutationUpdateJob}
+      mutationConvertJob={mutationConvertJob}
+      handleSubmit={handleSubmit}
+      handleChange={handleChange}
+      getFieldDecorator={form.getFieldDecorator}
+      refetch={refetch}
     />
+  ) : (
+    <AlertComponent message={t("jobs.errors.noaccess")} type='error' />
   );
 }
-export default JobsDetailPageContainer;
+export default Form.create({ name: "JobsDetailPageContainer" })(
+  JobsDetailPageContainer
+);