Added breadcrumb object + breadcrumbs for major pages.

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

@@ -3,23 +3,29 @@ 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 CourtesyCarReturnModalContainer from "../../components/courtesy-car-return-modal/courtesy-car-return-modal.container";
 import {
   QUERY_CONTRACT_BY_PK,
-  UPDATE_CONTRACT
+  UPDATE_CONTRACT,
 } from "../../graphql/cccontracts.queries";
+import { setBreadcrumbs } from "../../redux/application/application.actions";
 import ContractDetailPageComponent from "./contract-detail.page.component";
-import CourtesyCarReturnModalContainer from "../../components/courtesy-car-return-modal/courtesy-car-return-modal.container";
 
-export default function ContractDetailPageContainer() {
+const mapDispatchToProps = (dispatch) => ({
+  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+});
+
+export function ContractDetailPageContainer({ setBreadcrumbs }) {
   const { t } = useTranslation();
   const [updateContract] = useMutation(UPDATE_CONTRACT);
   const [form] = Form.useForm();
   const { contractId } = useParams();
 
   const { loading, error, data, refetch } = useQuery(QUERY_CONTRACT_BY_PK, {
-    variables: { id: contractId }
+    variables: { id: contractId },
   });
 
   useEffect(() => {
@@ -28,20 +34,34 @@ export default function ContractDetailPageContainer() {
       : error
       ? t("titles.app")
       : t("titles.contracts-detail", {
-          id: (data && data.cccontracts_by_pk.agreementnumber) || ""
+          id: (data && data.cccontracts_by_pk.agreementnumber) || "",
         });
-  }, [t, data, error, loading]);
 
-  const handleFinish = values => {
+    setBreadcrumbs([
+      { link: "/manage/courtesycars", label: t("titles.bc.courtesycars") },
+      {
+        link: "/manage/courtesycars/contracts",
+        label: t("titles.bc.contracts"),
+      },
+      {
+        link: "/manage/courtesycars/contracts/new",
+        label: t("titles.bc.contracts-detail", {
+          number: data.cccontracts_by_pk.agreementnumber || "",
+        }),
+      },
+    ]);
+  }, [t, data, error, loading, setBreadcrumbs]);
+
+  const handleFinish = (values) => {
     updateContract({
-      variables: { cccontract: { ...values }, contractId: contractId }
+      variables: { cccontract: { ...values }, contractId: contractId },
     })
-      .then(response => {
+      .then((response) => {
         notification["success"]({ message: t("contracts.successes.saved") });
       })
-      .catch(error =>
+      .catch((error) =>
         notification["error"]({
-          message: t("contracts.errors.saving", { error: error })
+          message: t("contracts.errors.saving", { error: error }),
         })
       );
   };
@@ -76,7 +96,7 @@ export default function ContractDetailPageContainer() {
                   : null,
                 driver_dob: data.cccontracts_by_pk.driver_dob
                   ? moment(data.cccontracts_by_pk.driver_dob)
-                  : null
+                  : null,
               }
             : {}
         }
@@ -91,3 +111,4 @@ export default function ContractDetailPageContainer() {
     </div>
   );
 }
+export default connect(null, mapDispatchToProps)(ContractDetailPageContainer);