From f4c7ab4e306d2f04324853e67032d370abd65d0c Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 20 May 2022 15:37:08 +0200
Subject: chore: handle blog pagination when JS is disabled

---
 src/utils/hooks/use-breadcrumb.tsx  |  3 ++-
 src/utils/hooks/use-redirection.tsx | 33 +++++++++++++++++++++++++++++++++
 2 files changed, 35 insertions(+), 1 deletion(-)
 create mode 100644 src/utils/hooks/use-redirection.tsx

(limited to 'src/utils/hooks')

diff --git a/src/utils/hooks/use-breadcrumb.tsx b/src/utils/hooks/use-breadcrumb.tsx
index 087d400..130ebf1 100644
--- a/src/utils/hooks/use-breadcrumb.tsx
+++ b/src/utils/hooks/use-breadcrumb.tsx
@@ -40,6 +40,7 @@ const useBreadcrumb = ({
   const { website } = useSettings();
   const isArticle = url.startsWith('/article/');
   const isHome = url === '/';
+  const isPageNumber = url.includes('/page/');
   const isProject = url.startsWith('/projets/');
   const isSearch = url.startsWith('/recherche');
   const isThematic = url.startsWith('/thematique/');
@@ -62,7 +63,7 @@ const useBreadcrumb = ({
 
   if (isHome) return { items, schema };
 
-  if (isArticle || isSearch || isThematic || isTopic) {
+  if (isArticle || isPageNumber || isSearch || isThematic || isTopic) {
     const blogLabel = intl.formatMessage({
       defaultMessage: 'Blog',
       description: 'Breadcrumb: blog label',
diff --git a/src/utils/hooks/use-redirection.tsx b/src/utils/hooks/use-redirection.tsx
new file mode 100644
index 0000000..9eb26c2
--- /dev/null
+++ b/src/utils/hooks/use-redirection.tsx
@@ -0,0 +1,33 @@
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
+
+export type RouterQuery = {
+  param: string;
+  value: string;
+};
+
+export type UseRedirectionProps = {
+  /**
+   * The router query.
+   */
+  query: RouterQuery;
+  /**
+   * The redirection url.
+   */
+  redirectTo: string;
+};
+
+/**
+ * Redirect to another url when router query match the given parameters.
+ *
+ * @param {UseRedirectionProps} props - The redirection parameters.
+ */
+const useRedirection = ({ query, redirectTo }: UseRedirectionProps) => {
+  const router = useRouter();
+
+  useEffect(() => {
+    if (router.query[query.param] === query.value) router.push(redirectTo);
+  }, [query, redirectTo, router]);
+};
+
+export default useRedirection;
-- 
cgit v1.2.3