Added breadcrumb object + breadcrumbs for major pages.

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

@@ -5,13 +5,19 @@ import { QUERY_VEHICLE_BY_ID } from "../../graphql/vehicles.queries";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
 import AlertComponent from "../../components/alert/alert.component";
 import { useTranslation } from "react-i18next";
+import { setBreadcrumbs } from "../../redux/application/application.actions";
+import { connect } from "react-redux";
 
-export default function VehicleDetailContainer({ match }) {
+const mapDispatchToProps = (dispatch) => ({
+  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+});
+
+export function VehicleDetailContainer({ match, setBreadcrumbs }) {
   const { vehId } = match.params;
   const { t } = useTranslation();
   const { loading, data, error, refetch } = useQuery(QUERY_VEHICLE_BY_ID, {
     variables: { id: vehId },
-    fetchPolicy: "network-only"
+    fetchPolicy: "network-only",
   });
 
   useEffect(() => {
@@ -19,9 +25,21 @@ export default function VehicleDetailContainer({ match }) {
       vehicle:
         data && data.vehicles_by_pk
           ? `${data.vehicles_by_pk.v_model_yr} ${data.vehicles_by_pk.v_make_desc} ${data.vehicles_by_pk.v_model_desc}`
-          : ""
+          : "",
     });
-  }, [t, data]);
+    setBreadcrumbs([
+      { link: "/manage/vehicles", label: t("titles.bc.vehicles") },
+      {
+        link: `/manage/vehicles/${vehId}`,
+        label: t("titles.bc.vehicle-details", {
+          vehicle:
+            data && data.vehicles_by_pk
+              ? `${data.vehicles_by_pk.v_model_yr} ${data.vehicles_by_pk.v_make_desc} ${data.vehicles_by_pk.v_model_desc}`
+              : "",
+        }),
+      },
+    ]);
+  }, [t, data, setBreadcrumbs, vehId]);
 
   if (loading) return <LoadingSpinner />;
   if (error) return <AlertComponent message={error.message} type="error" />;
@@ -35,3 +53,4 @@ export default function VehicleDetailContainer({ match }) {
       <AlertComponent message={t("vehicles.errors.noaccess")} type="error" />
     );
 }
+export default connect(null, mapDispatchToProps)(VehicleDetailContainer);