Added breadcrumb object + breadcrumbs for major pages.

client/src/pages/jobs-create/jobs-create.container.jsx

@@ -9,13 +9,15 @@ import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectBodyshop } from "../../redux/user/user.selectors";
 import { useTranslation } from "react-i18next";
+import { setBreadcrumbs } from "../../redux/application/application.actions";
 
 const mapStateToProps = createStructuredSelector({
-  bodyshop: selectBodyshop
+  bodyshop: selectBodyshop,
 });
-export default connect(mapStateToProps, null)(JobsCreateContainer);
-
-function JobsCreateContainer({ bodyshop }) {
+const mapDispatchToProps = (dispatch) => ({
+  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+});
+function JobsCreateContainer({ bodyshop, setBreadcrumbs }) {
   const { t } = useTranslation();
   const contextState = useState({
     vehicle: { new: false, search: "", selectedid: null, vehicleObj: null },
@@ -24,7 +26,7 @@ function JobsCreateContainer({ bodyshop }) {
     created: false,
     error: null,
     newJobId: null,
-    newJobEstNum: null
+    newJobEstNum: null,
   });
   const [form] = Form.useForm();
   const [state, setState] = contextState;
@@ -36,49 +38,56 @@ function JobsCreateContainer({ bodyshop }) {
   useEffect(() => {
     if (!!state.owner.selectedid) {
       loadOwner({
-        variables: { id: state.owner.selectedid }
+        variables: { id: state.owner.selectedid },
       });
     }
   }, [state.owner.selectedid, loadOwner]);
 
   useEffect(() => {
     document.title = t("titles.jobs-create");
-  }, [t]);
+    setBreadcrumbs([
+      { link: "/manage/available", label: t("titles.bc.availablejobs") },
+      {
+        link: "/manage/jobs/new",
+        label: t("titles.bc.jobs-new"),
+      },
+    ]);
+  }, [t, setBreadcrumbs]);
 
-  const runInsertJob = job => {
+  const runInsertJob = (job) => {
     insertJob({ variables: { job: job } })
-      .then(resp => {
+      .then((resp) => {
         setState({
           ...state,
           created: true,
           error: null,
           newJobId: resp.data.insert_jobs.returning[0].id,
-          newJobEstNum: resp.data.insert_jobs.returning[0].est_number
+          newJobEstNum: resp.data.insert_jobs.returning[0].est_number,
         });
       })
-      .catch(error => {
+      .catch((error) => {
         notification["error"]({
-          message: t("jobs.errors.creating", { error: error })
+          message: t("jobs.errors.creating", { error: error }),
         });
         setState({ ...state, error: error });
       });
   };
 
-  const handleFinish = values => {
+  const handleFinish = (values) => {
     let job = Object.assign(
       {},
       values,
       {
         vehicle: state.vehicle.selectedid ? null : values.vehicle,
-        vehicleid: state.vehicle.selectedid || null
+        vehicleid: state.vehicle.selectedid || null,
       },
       {
         owner: state.owner.selectedid ? null : values.owner,
-        ownerid: state.owner.selectedid || null
+        ownerid: state.owner.selectedid || null,
       },
       {
         status: bodyshop.md_ro_statuses.default_imported || "Open*", //Pull from redux store.
-        shopid: bodyshop.id
+        shopid: bodyshop.id,
       }
     );
     //TODO Logic to ensure the owner is actually fetched.
@@ -128,3 +137,7 @@ function JobsCreateContainer({ bodyshop }) {
     </JobCreateContext.Provider>
   );
 }
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(JobsCreateContainer);