Added breadcrumb object + breadcrumbs for major pages.

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

@@ -4,30 +4,41 @@ 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 { CONVERT_JOB_TO_RO, GET_JOB_BY_PK, UPDATE_JOB, UPDATE_JOB_STATUS } from "../../graphql/jobs.queries";
+import {
+  CONVERT_JOB_TO_RO,
+  GET_JOB_BY_PK,
+  UPDATE_JOB,
+  UPDATE_JOB_STATUS,
+} from "../../graphql/jobs.queries";
 import JobsDetailPage from "./jobs-detail.page.component";
+import { setBreadcrumbs } from "../../redux/application/application.actions";
+import { connect } from "react-redux";
 
-function JobsDetailPageContainer({ match }) {
+const mapDispatchToProps = (dispatch) => ({
+  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+});
+
+function JobsDetailPageContainer({ match, setBreadcrumbs }) {
   const { jobId } = match.params;
   const { t } = useTranslation();
 
   const { loading, error, data, refetch } = useQuery(GET_JOB_BY_PK, {
     variables: { id: jobId },
-    fetchPolicy: "network-only"
+    fetchPolicy: "network-only",
   });
   const [mutationUpdateJob] = useMutation(UPDATE_JOB);
   const [mutationConvertJob] = useMutation(CONVERT_JOB_TO_RO);
   const [mutationUpdateJobstatus] = useMutation(UPDATE_JOB_STATUS);
 
-  const updateJobStatus = status => {
+  const updateJobStatus = (status) => {
     mutationUpdateJobstatus({
-      variables: { jobId: jobId, status: status }
+      variables: { jobId: jobId, status: status },
     })
-      .then(r => {
+      .then((r) => {
         notification["success"]({ message: t("jobs.successes.save") });
         refetch();
       })
-      .catch(error => {
+      .catch((error) => {
         notification[error]({ message: t("jobs.errors.saving") });
       });
   };
@@ -40,9 +51,23 @@ function JobsDetailPageContainer({ match }) {
       : t("titles.jobsdetail", {
           ro_number: data.jobs_by_pk.converted
             ? data.jobs_by_pk.ro_number
-            : `EST ${data.jobs_by_pk.est_number}`
+            : `EST ${data.jobs_by_pk.est_number}`,
         });
-  }, [loading, data, t, error]);
+    setBreadcrumbs([
+      { link: "/manage/jobs", label: t("titles.bc.jobs") },
+      {
+        link: `/manage/jobs/${jobId}`,
+        label: t("titles.bc.jobs-detail", {
+          number:
+            (data &&
+              (data.jobs_by_pk.converted
+                ? data && data.jobs_by_pk.ro_number
+                : `EST ${data.jobs_by_pk.est_number}`)) ||
+            "",
+        }),
+      },
+    ]);
+  }, [loading, data, t, error, setBreadcrumbs, jobId]);
 
   if (loading) return <SpinComponent />;
   if (error) return <AlertComponent message={error.message} type="error" />;
@@ -59,4 +84,4 @@ function JobsDetailPageContainer({ match }) {
     <AlertComponent message={t("jobs.errors.noaccess")} type="error" />
   );
 }
-export default JobsDetailPageContainer;
+export default connect(null, mapDispatchToProps)(JobsDetailPageContainer);