Refactor jobs detail page to use container. Refresh detail cards on note add.

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

@@ -0,0 +1,31 @@
+import { useQuery } from "@apollo/react-hooks";
+import React, { useEffect } from "react";
+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";
+
+function JobsDetailPageContainer({ match, location }) {
+  const { jobId } = match.params;
+  const { hash } = location;
+  const { t } = useTranslation();
+  const { loading, error, data } = useQuery(GET_JOB_BY_PK, {
+    variables: { id: jobId },
+    fetchPolicy: "network-only"
+  });
+
+  useEffect(() => {
+    document.title = loading
+      ? "..."
+      : t("titles.jobsdetail", {
+          ro_number: data.jobs_by_pk.ro_number
+        });
+  }, [loading, data, t]);
+
+  if (loading) return <SpinComponent />;
+  if (error) return <AlertComponent message={error.message} type='error' />;
+
+  return <JobsDetailPage hash={hash} data={data} jobId={jobId} match={match} />;
+}
+export default JobsDetailPageContainer;