From 85c4c42bd601270d7be0f34a0767a34bb85e29bb Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Tue, 12 Dec 2023 18:50:03 +0100
Subject: refactor(hooks): rewrite useBreadcrumbs hook

* use next/router to get the slug instead of using props
* handle cases where the current page title is not provided
* update JSON-LD schema to match the example in documentation
* add tests
---
 src/pages/blog/index.tsx | 25 +++++++++++--------------
 1 file changed, 11 insertions(+), 14 deletions(-)

(limited to 'src/pages/blog/index.tsx')

diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index df25cd2..49c16b1 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -37,7 +37,7 @@ import type {
   WPTopicPreview,
 } from '../../types';
 import { CONFIG } from '../../utils/config';
-import { ROUTES } from '../../utils/constants';
+import { PAGINATED_ROUTE_PREFIX, ROUTES } from '../../utils/constants';
 import {
   getBlogSchema,
   getLinksItemData,
@@ -48,13 +48,13 @@ import {
 import { loadTranslation, type Messages } from '../../utils/helpers/server';
 import {
   useArticlesList,
-  useBreadcrumb,
+  useBreadcrumbs,
   useThematicsList,
   useTopicsList,
 } from '../../utils/hooks';
 
 const renderPaginationLink: RenderPaginationLink = (pageNum) =>
-  `${ROUTES.BLOG}/page/${pageNum}`;
+  `${ROUTES.BLOG}${PAGINATED_ROUTE_PREFIX}/${pageNum}`;
 
 type BlogPageProps = {
   data: {
@@ -156,10 +156,9 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({ data }) => {
     },
   };
 
-  const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumb({
-    title: messages.pageTitle,
-    url: ROUTES.BLOG,
-  });
+  const { items: breadcrumbItems, schema: breadcrumbSchema } = useBreadcrumbs(
+    messages.pageTitle
+  );
 
   const webpageSchema = getWebPageSchema({
     description: messages.seo.metaDesc,
@@ -172,7 +171,11 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({ data }) => {
     locale: CONFIG.locales.defaultLocale,
     slug: ROUTES.BLOG,
   });
-  const schemaJsonLd = getSchemaJson([webpageSchema, blogSchema]);
+  const schemaJsonLd = getSchemaJson([
+    webpageSchema,
+    blogSchema,
+    breadcrumbSchema,
+  ]);
 
   const renderPaginationLabel: RenderPaginationItemAriaLabel = useCallback(
     ({ kind, pageNumber: number, isCurrentPage }) => {
@@ -240,12 +243,6 @@ const BlogPage: NextPageWithLayout<BlogPageProps> = ({ data }) => {
         // eslint-disable-next-line react/no-danger -- Necessary for schema
         dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaJsonLd) }}
       />
-      <Script
-        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbSchema) }}
-        // eslint-disable-next-line react/jsx-no-literals -- Id allowed
-        id="schema-breadcrumb"
-        type="application/ld+json"
-      />
       <PageHeader
         heading={messages.pageTitle}
         meta={{ total: data.posts.pageInfo.total }}
-- 
cgit v1.2.3