From 13105de50de5ed956364f97ac34f996d91f0afa9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois?= <francois.david@beta.gouv.fr>
Date: Wed, 10 Jul 2024 13:55:56 +0200
Subject: [PATCH 1/2] fix: Pagination component for Next.js

---
 src/Pagination.tsx | 109 ++++++++++++++++++++++++++++-----------------
 1 file changed, 67 insertions(+), 42 deletions(-)

diff --git a/src/Pagination.tsx b/src/Pagination.tsx
index 43a3759b7..ed8629fb4 100644
--- a/src/Pagination.tsx
+++ b/src/Pagination.tsx
@@ -1,4 +1,4 @@
-import React, { memo, forwardRef, type CSSProperties } from "react";
+import React, { memo, forwardRef, type CSSProperties, ReactNode } from "react";
 import { symToStr } from "tsafe/symToStr";
 import { assert } from "tsafe/assert";
 import type { Equals } from "tsafe";
@@ -8,6 +8,18 @@ import { createComponentI18nApi } from "./i18n";
 import { RegisteredLinkProps, getLink } from "./link";
 import { useAnalyticsId } from "./tools/useAnalyticsId";
 
+const DynamicLink = ({
+    useReactLinkComponent,
+    children,
+    ...rest
+}: {
+    useReactLinkComponent: boolean;
+    children: ReactNode;
+}) => {
+    const { Link } = getLink();
+    return useReactLinkComponent ? <Link {...rest}>{children}</Link> : <a {...rest}>{children}</a>;
+};
+
 export type PaginationProps = {
     id?: string;
     className?: string;
@@ -100,36 +112,43 @@ export const Pagination = memo(
                 <ul className={cx(fr.cx("fr-pagination__list"), classes.list)}>
                     {showFirstLast && (
                         <li>
-                            <Link
+                            <DynamicLink
+                                useReactLinkComponent={defaultPage > 1}
                                 {...(count > 0 && defaultPage > 1 && getPageLinkProps(1))}
-                                className={cx(
-                                    fr.cx("fr-pagination__link", "fr-pagination__link--first"),
-                                    classes.link,
-                                    getPageLinkProps(1).className
-                                )}
-                                aria-disabled={count > 0 && defaultPage > 1 ? true : undefined}
-                                role="link"
+                                {...{
+                                    className: cx(
+                                        fr.cx("fr-pagination__link", "fr-pagination__link--first"),
+                                        classes.link,
+                                        getPageLinkProps(1).className
+                                    ),
+                                    "aria-disabled":
+                                        count > 0 && defaultPage > 1 ? true : undefined,
+                                    role: "link"
+                                }}
                             >
                                 {t("first page")}
-                            </Link>
+                            </DynamicLink>
                         </li>
                     )}
                     <li>
-                        <Link
-                            className={cx(
-                                fr.cx(
-                                    "fr-pagination__link",
-                                    "fr-pagination__link--prev",
-                                    "fr-pagination__link--lg-label"
-                                ),
-                                classes.link
-                            )}
+                        <DynamicLink
+                            useReactLinkComponent={defaultPage > 1}
                             {...(defaultPage > 1 && getPageLinkProps(defaultPage - 1))}
-                            aria-disabled={defaultPage <= 1 ? true : undefined}
-                            role="link"
+                            {...{
+                                className: cx(
+                                    fr.cx(
+                                        "fr-pagination__link",
+                                        "fr-pagination__link--prev",
+                                        "fr-pagination__link--lg-label"
+                                    ),
+                                    classes.link
+                                ),
+                                "aria-disabled": defaultPage <= 1 ? true : undefined,
+                                role: "link"
+                            }}
                         >
-                            {t("previous page")}
-                        </Link>
+                            {t("first page")}
+                        </DynamicLink>
                     </li>
                     {parts.map(part => (
                         <li key={part.number}>
@@ -150,34 +169,40 @@ export const Pagination = memo(
                         </li>
                     ))}
                     <li>
-                        <Link
-                            className={cx(
-                                fr.cx(
-                                    "fr-pagination__link",
-                                    "fr-pagination__link--next",
-                                    "fr-pagination__link--lg-label"
-                                ),
-                                classes.link
-                            )}
+                        <DynamicLink
+                            useReactLinkComponent={defaultPage < count}
                             {...(defaultPage < count && getPageLinkProps(defaultPage + 1))}
-                            aria-disabled={defaultPage < count ? true : undefined}
-                            role="link"
+                            {...{
+                                className: cx(
+                                    fr.cx(
+                                        "fr-pagination__link",
+                                        "fr-pagination__link--next",
+                                        "fr-pagination__link--lg-label"
+                                    ),
+                                    classes.link
+                                ),
+                                "aria-disabled": defaultPage < count ? true : undefined,
+                                role: "link"
+                            }}
                         >
                             {t("next page")}
-                        </Link>
+                        </DynamicLink>
                     </li>
                     {showFirstLast && (
                         <li>
-                            <Link
-                                className={cx(
-                                    fr.cx("fr-pagination__link", "fr-pagination__link--last"),
-                                    classes.link
-                                )}
+                            <DynamicLink
+                                useReactLinkComponent={defaultPage < count}
                                 {...(defaultPage < count && getPageLinkProps(count))}
-                                aria-disabled={defaultPage < count ? true : undefined}
+                                {...{
+                                    className: cx(
+                                        fr.cx("fr-pagination__link", "fr-pagination__link--last"),
+                                        classes.link
+                                    ),
+                                    "aria-disabled": defaultPage < count ? true : undefined
+                                }}
                             >
                                 {t("last page")}
-                            </Link>
+                            </DynamicLink>
                         </li>
                     )}
                 </ul>

From 6f13fc216bf1f50b4cbf96c637063049c3cf3f12 Mon Sep 17 00:00:00 2001
From: DavidFrancois <DavidFrancois@users.noreply.github.com>
Date: Wed, 10 Jul 2024 23:25:14 +0900
Subject: [PATCH 2/2] typo: changed `first` to `previous` in file

Signed-off-by: DavidFrancois <DavidFrancois@users.noreply.github.com>
---
 src/Pagination.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Pagination.tsx b/src/Pagination.tsx
index ed8629fb4..01b830812 100644
--- a/src/Pagination.tsx
+++ b/src/Pagination.tsx
@@ -147,7 +147,7 @@ export const Pagination = memo(
                                 role: "link"
                             }}
                         >
-                            {t("first page")}
+                            {t("previous page")}
                         </DynamicLink>
                     </li>
                     {parts.map(part => (