Added breadcrumb object + breadcrumbs for major pages.

client/src/pages/courtesy-car-detail/courtesy-car-detail.page.container.jsx

@@ -3,19 +3,24 @@ import { Form, notification } from "antd";
 import moment from "moment";
 import React, { useEffect } from "react";
 import { useTranslation } from "react-i18next";
+import { connect } from "react-redux";
 import { useParams } from "react-router-dom";
 import AlertComponent from "../../components/alert/alert.component";
 import { QUERY_CC_BY_PK, UPDATE_CC } from "../../graphql/courtesy-car.queries";
+import { setBreadcrumbs } from "../../redux/application/application.actions";
 import CourtesyCarDetailPageComponent from "./courtesy-car-detail.page.component";
 
-export default function CourtesyCarDetailPageContainer() {
+const mapDispatchToProps = (dispatch) => ({
+  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+});
+export function CourtesyCarDetailPageContainer({ setBreadcrumbs }) {
   const { t } = useTranslation();
   const [insertCourtesyCar] = useMutation(UPDATE_CC);
   const [form] = Form.useForm();
   const { ccId } = useParams();
 
   const { loading, error, data } = useQuery(QUERY_CC_BY_PK, {
-    variables: { id: ccId }
+    variables: { id: ccId },
   });
 
   useEffect(() => {
@@ -24,20 +29,31 @@ export default function CourtesyCarDetailPageContainer() {
       : error
       ? t("titles.app")
       : t("titles.courtesycars-detail", {
-          id: (data && data.courtesycars_by_pk.vin) || ""
+          id: (data && data.courtesycars_by_pk.fleet_number) || "",
         });
-  }, [t, data, error, loading]);
+    setBreadcrumbs([
+      { link: "/manage/courtesycars", label: t("titles.bc.courtesycars") },
+      {
+        link: `/manage/courtesycars/${
+          (data && data.courtesycars_by_pk.id) || ""
+        }`,
+        label: t("titles.bc.courtesycars-detail", {
+          number: (data && data.courtesycars_by_pk.fleetnumber) || "",
+        }),
+      },
+    ]);
+  }, [t, data, error, loading, setBreadcrumbs]);
 
-  const handleFinish = values => {
+  const handleFinish = (values) => {
     insertCourtesyCar({
-      variables: { cc: { ...values }, ccId: ccId }
+      variables: { cc: { ...values }, ccId: ccId },
     })
-      .then(response => {
+      .then((response) => {
         notification["success"]({ message: t("courtesycars.successes.saved") });
       })
-      .catch(error =>
+      .catch((error) =>
         notification["error"]({
-          message: t("courtesycars.errors.saving", { error: error })
+          message: t("courtesycars.errors.saving", { error: error }),
         })
       );
   };
@@ -76,7 +92,7 @@ export default function CourtesyCarDetailPageContainer() {
                 : null,
               insuranceexpires: data.courtesycars_by_pk.insuranceexpires
                 ? moment(data.courtesycars_by_pk.insuranceexpires)
-                : null
+                : null,
             }
           : {}
       }
@@ -87,3 +103,7 @@ export default function CourtesyCarDetailPageContainer() {
     </Form>
   );
 }
+export default connect(
+  null,
+  mapDispatchToProps
+)(CourtesyCarDetailPageContainer);