refactor(components): rewrite Breadcrumbs component

1 files changed, 53 insertions, 34 deletions

diff --git a/src/utils/hooks/use-breadcrumb.ts b/src/utils/hooks/use-breadcrumb.ts
index 5839299..57c27bd 100644
--- a/src/utils/hooks/use-breadcrumb.ts
+++ b/src/utils/hooks/use-breadcrumb.ts
@@ -1,11 +1,33 @@
 /* eslint-disable max-statements */
 import { useIntl } from 'react-intl';
 import type { BreadcrumbList } from 'schema-dts';
-import type { BreadcrumbItem } from '../../components';
+import type { BreadcrumbsItem } from '../../components';
 import { ROUTES } from '../constants';
 import { slugify } from '../helpers';
 import { useSettings } from './use-settings';
 
+const isArticle = (url: string) => url.startsWith(`${ROUTES.ARTICLE}/`);
+
+const isHome = (url: string) => url === '/';
+
+const isPageNumber = (url: string) => url.includes('/page/');
+
+const isProject = (url: string) => url.startsWith(`${ROUTES.PROJECTS}/`);
+
+const isSearch = (url: string) => url.startsWith(ROUTES.SEARCH);
+
+const isThematic = (url: string) =>
+  url.startsWith(`${ROUTES.THEMATICS.INDEX}/`);
+
+const isTopic = (url: string) => url.startsWith(`${ROUTES.TOPICS}/`);
+
+const hasBlogAsParent = (url: string) =>
+  isArticle(url) ||
+  isPageNumber(url) ||
+  isSearch(url) ||
+  isThematic(url) ||
+  isTopic(url);
+
 export type useBreadcrumbProps = {
   /**
    * The current page title.
@@ -21,7 +43,7 @@ export type useBreadcrumbReturn = {
   /**
    * The breadcrumb items.
    */
-  items: BreadcrumbItem[];
+  items: BreadcrumbsItem[];
   /**
    * The breadcrumb JSON schema.
    */
@@ -40,57 +62,54 @@ export const useBreadcrumb = ({
 }: useBreadcrumbProps): useBreadcrumbReturn => {
   const intl = useIntl();
   const { website } = useSettings();
-  const isArticle = url.startsWith(`${ROUTES.ARTICLE}/`);
-  const isHome = url === '/';
-  const isPageNumber = url.includes('/page/');
-  const isProject = url.startsWith(`${ROUTES.PROJECTS}/`);
-  const isSearch = url.startsWith(ROUTES.SEARCH);
-  const isThematic = url.startsWith(`${ROUTES.THEMATICS.INDEX}/`);
-  const isTopic = url.startsWith(`${ROUTES.TOPICS}/`);
-
-  const homeLabel = intl.formatMessage({
-    defaultMessage: 'Home',
-    description: 'Breadcrumb: home label',
-    id: 'j5k9Fe',
-  });
-  const items: BreadcrumbItem[] = [{ id: 'home', name: homeLabel, url: '/' }];
+  const labels = {
+    home: intl.formatMessage({
+      defaultMessage: 'Home',
+      description: 'Breadcrumb: home label',
+      id: 'j5k9Fe',
+    }),
+    blog: intl.formatMessage({
+      defaultMessage: 'Blog',
+      description: 'Breadcrumb: blog label',
+      id: 'Es52wh',
+    }),
+    projects: intl.formatMessage({
+      defaultMessage: 'Projects',
+      description: 'Breadcrumb: projects label',
+      id: '28GZdv',
+    }),
+  };
+
+  const items: BreadcrumbsItem[] = [
+    { id: 'home', name: labels.home, url: '/' },
+  ];
   const schema: BreadcrumbList['itemListElement'][] = [
     {
       '@type': 'ListItem',
       position: 1,
-      name: homeLabel,
+      name: labels.home,
       item: website.url,
     },
   ];
 
-  if (isHome) return { items, schema };
+  if (isHome(url)) return { items, schema };
 
-  if (isArticle || isPageNumber || isSearch || isThematic || isTopic) {
-    const blogLabel = intl.formatMessage({
-      defaultMessage: 'Blog',
-      description: 'Breadcrumb: blog label',
-      id: 'Es52wh',
-    });
-    items.push({ id: 'blog', name: blogLabel, url: ROUTES.BLOG });
+  if (hasBlogAsParent(url)) {
+    items.push({ id: 'blog', name: labels.blog, url: ROUTES.BLOG });
     schema.push({
       '@type': 'ListItem',
       position: 2,
-      name: blogLabel,
+      name: labels.blog,
       item: `${website.url}${ROUTES.BLOG}`,
     });
   }
 
-  if (isProject) {
-    const projectsLabel = intl.formatMessage({
-      defaultMessage: 'Projects',
-      description: 'Breadcrumb: projects label',
-      id: '28GZdv',
-    });
-    items.push({ id: 'projects', name: projectsLabel, url: ROUTES.PROJECTS });
+  if (isProject(url)) {
+    items.push({ id: 'projects', name: labels.projects, url: ROUTES.PROJECTS });
     schema.push({
       '@type': 'ListItem',
       position: 2,
-      name: projectsLabel,
+      name: labels.projects,
       item: `${website.url}${ROUTES.PROJECTS}`,
     });
   }