From abb6a1248666a9bb84cf68ff323945c2d12ecd3f Mon Sep 17 00:00:00 2001
From: Tero Tikkanen <tero.tikkanen@gmail.com>
Date: Wed, 20 Nov 2024 14:55:54 +0200
Subject: [PATCH] Fix category page breadcrumbs

---
 .../contentblocks/CategoryPageHeaderBlock.tsx | 43 ++++++++++---------
 1 file changed, 23 insertions(+), 20 deletions(-)

diff --git a/components/paths/contentblocks/CategoryPageHeaderBlock.tsx b/components/paths/contentblocks/CategoryPageHeaderBlock.tsx
index 278f5da2..b7361b23 100644
--- a/components/paths/contentblocks/CategoryPageHeaderBlock.tsx
+++ b/components/paths/contentblocks/CategoryPageHeaderBlock.tsx
@@ -10,6 +10,7 @@ import { Container } from 'reactstrap';
 import styled, { useTheme } from 'styled-components';
 
 import { ActionNode } from '@/common/__generated__/paths/graphql';
+import { getBreadcrumbsFromCategoryHierarchy } from '@/common/categories';
 import { activeGoalVar, yearRangeVar } from '@/context/paths/cache';
 import { GET_NODE_CONTENT } from '@/queries/paths/get-paths-node';
 import { getScopeLabel, getScopeTotal } from '@/utils/paths/emissions';
@@ -248,34 +249,36 @@ const PathsNodeContent = (props) => {
   }
 };
 
+interface Props {
+  page: CategoryPage;
+  title: string;
+  identifier;
+  lead?: string;
+  color?;
+  attributes;
+}
+
 function CategoryPageHeaderBlock(props: Props) {
-  const { title, identifier, lead, level, pathsNodeId } = props;
+  const { title, identifier, lead, pathsNodeId, page } = props;
 
   const paths = usePaths();
 
+  const breadcrumbs = page.category?.parent
+    ? getBreadcrumbsFromCategoryHierarchy([page.category.parent], false)
+    : [];
+
+  // TODO: A better way to find root category list page
+  const rootCategoryListPage =
+    page?.category && page.category.type.id === '76'
+      ? { id: 0, name: 'Bereiche', url: '/klimaschutzplan/bereiche' }
+      : null;
+  if (rootCategoryListPage) breadcrumbs.unshift(rootCategoryListPage);
+
   return (
     <Background>
       <Container>
         <CategoryHeader>
-          <Breadcrumbs
-            breadcrumbs={[
-              {
-                id: '1',
-                name: 'Massnahmenpakete',
-                url: '/',
-              },
-              {
-                id: '2',
-                name: 'Pakete',
-                url: '/categories/',
-              },
-              {
-                id: '3',
-                name: title,
-                url: `/categories/${identifier}/`,
-              },
-            ]}
-          />
+          {!!breadcrumbs && <Breadcrumbs breadcrumbs={breadcrumbs} />}
           <h1>
             {identifier && <Identifier>{identifier}.</Identifier>} {title}
           </h1>