Added breadcrumb object + breadcrumbs for major pages.

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

@@ -1,19 +1,49 @@
-import React from "react";
+import React, { useEffect } from "react";
 import OwnersDetailComponent from "./owners-detail.page.component";
 import { useTranslation } from "react-i18next";
 import { useQuery } from "@apollo/react-hooks";
 import LoadingSpinner from "../../components/loading-spinner/loading-spinner.component";
 import AlertComponent from "../../components/alert/alert.component";
 import { QUERY_OWNER_BY_ID } from "../../graphql/owners.queries";
-export default function OwnersDetailContainer({ match }) {
+import { connect } from "react-redux";
+import { setBreadcrumbs } from "../../redux/application/application.actions";
+const mapDispatchToProps = (dispatch) => ({
+  setBreadcrumbs: (breadcrumbs) => dispatch(setBreadcrumbs(breadcrumbs)),
+});
+
+export function OwnersDetailContainer({ match, setBreadcrumbs }) {
   const { ownerId } = match.params;
   const { t } = useTranslation();
 
   const { loading, data, error, refetch } = useQuery(QUERY_OWNER_BY_ID, {
     variables: { id: ownerId },
-    fetchPolicy: "network-only"
+    fetchPolicy: "network-only",
   });
 
+  useEffect(() => {
+    document.title = t("titles.owners-detail", {
+      name: data
+        ? `${data.owners_by_pk.ownr_fn || ""} ${
+            data.owners_by_pk.ownr_ln || ""
+          } ${data.owners_by_pk.ownr_co_nm || ""}`
+        : "",
+    });
+
+    setBreadcrumbs([
+      { link: "/manage/owners", label: t("titles.bc.owners") },
+      {
+        link: `/manage/owners/${ownerId}`,
+        label: t("titles.bc.owner-detail", {
+          name: data
+            ? `${data.owners_by_pk.ownr_fn || ""} ${
+                data.owners_by_pk.ownr_ln || ""
+              } ${data.owners_by_pk.ownr_co_nm || ""}`
+            : "",
+        }),
+      },
+    ]);
+  }, [setBreadcrumbs, t, data, ownerId]);
+
   if (loading) return <LoadingSpinner />;
   if (error) return <AlertComponent message={error.message} type="error" />;
 
@@ -26,3 +56,4 @@ export default function OwnersDetailContainer({ match }) {
       <AlertComponent message={t("owners.errors.noaccess")} type="error" />
     );
 }
+export default connect(null, mapDispatchToProps)(OwnersDetailContainer);