From 8d41bc74718d9f7026057730d0f30f0cb995de64 Mon Sep 17 00:00:00 2001
From: Rick <81699526+rick23p@users.noreply.github.com>
Date: Tue, 23 Jul 2024 14:21:33 +0330
Subject: [PATCH] SOV-4302: add pagination page limit (#959)

* feat: add pagination page limit

* Create spicy-eagles-sneeze.md
---
 .changeset/spicy-eagles-sneeze.md             |  6 +++
 .../LeaderboardPointsSeason2.constants.tsx    |  2 +-
 .../LeaderboardPointsSeason2.tsx              |  1 +
 .../src/2_molecules/Pagination/Pagination.tsx | 39 +++++++++++++------
 4 files changed, 36 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/spicy-eagles-sneeze.md

diff --git a/.changeset/spicy-eagles-sneeze.md b/.changeset/spicy-eagles-sneeze.md
new file mode 100644
index 000000000..d75f9ba6e
--- /dev/null
+++ b/.changeset/spicy-eagles-sneeze.md
@@ -0,0 +1,6 @@
+---
+"frontend": patch
+"@sovryn/ui": patch
+---
+
+SOV-4302: add pagination page limit
diff --git a/apps/frontend/src/app/5_pages/LeaderboardPointsPage/components/LeaderboardPointsSeason2/LeaderboardPointsSeason2.constants.tsx b/apps/frontend/src/app/5_pages/LeaderboardPointsPage/components/LeaderboardPointsSeason2/LeaderboardPointsSeason2.constants.tsx
index cb74c834b..663d07498 100644
--- a/apps/frontend/src/app/5_pages/LeaderboardPointsPage/components/LeaderboardPointsSeason2/LeaderboardPointsSeason2.constants.tsx
+++ b/apps/frontend/src/app/5_pages/LeaderboardPointsPage/components/LeaderboardPointsSeason2/LeaderboardPointsSeason2.constants.tsx
@@ -10,7 +10,7 @@ import { translations } from '../../../../../locales/i18n';
 export const DATA_ENDPOINT_URL =
   'https://season2-spice-points-bucket.s3.us-east-2.amazonaws.com/latest_Season2_Spice_distributed.json';
 
-export const PAGE_SIZE = 80;
+export const PAGE_SIZE = 50;
 
 export const COLUMNS_CONFIG = (isSingleUser: boolean = false) => [
   {
diff --git a/apps/frontend/src/app/5_pages/LeaderboardPointsPage/components/LeaderboardPointsSeason2/LeaderboardPointsSeason2.tsx b/apps/frontend/src/app/5_pages/LeaderboardPointsPage/components/LeaderboardPointsSeason2/LeaderboardPointsSeason2.tsx
index 322eb8c89..469a40237 100644
--- a/apps/frontend/src/app/5_pages/LeaderboardPointsPage/components/LeaderboardPointsSeason2/LeaderboardPointsSeason2.tsx
+++ b/apps/frontend/src/app/5_pages/LeaderboardPointsPage/components/LeaderboardPointsSeason2/LeaderboardPointsSeason2.tsx
@@ -63,6 +63,7 @@ export const LeaderboardPointsSeason2: FC = () => {
             itemsPerPage={PAGE_SIZE}
             isNextButtonDisabled={isNextButtonDisabled}
             dataAttribute="leaderboard-points-users-pagination-season-2"
+            pageLimit={10}
           />
         </div>
       </div>
diff --git a/packages/ui/src/2_molecules/Pagination/Pagination.tsx b/packages/ui/src/2_molecules/Pagination/Pagination.tsx
index d23973729..5a62c18a0 100644
--- a/packages/ui/src/2_molecules/Pagination/Pagination.tsx
+++ b/packages/ui/src/2_molecules/Pagination/Pagination.tsx
@@ -18,6 +18,7 @@ type PaginationProps = {
   hideFirstPageButton?: boolean;
   hideLastPageButton?: boolean;
   isNextButtonDisabled?: boolean;
+  pageLimit?: number;
 };
 
 const DEFAULT_ITEMS_PER_PAGE = 5;
@@ -32,6 +33,7 @@ export const Pagination: FC<PaginationProps> = ({
   hideFirstPageButton,
   hideLastPageButton,
   isNextButtonDisabled,
+  pageLimit,
 }) => {
   const {
     isNextButtonDisabled: nextButtonDisabled,
@@ -68,17 +70,32 @@ export const Pagination: FC<PaginationProps> = ({
       />
       {totalPages !== undefined ? (
         <>
-          {new Array(totalPages).fill(0).map((_item, index) => (
-            <button
-              key={index}
-              className={classNames(styles.page, {
-                [styles.active]: index === page,
-              })}
-              onClick={() => onChange(index)}
-            >
-              {index + 1}
-            </button>
-          ))}
+          {new Array(
+            pageLimit && pageLimit < totalPages ? pageLimit : totalPages,
+          )
+            .fill(0)
+            .map((_item, index) => {
+              let start = pageLimit
+                ? Math.max(Math.floor(page - pageLimit / 2), 0)
+                : 0;
+
+              if (pageLimit && start + pageLimit > totalPages) {
+                start = totalPages - pageLimit;
+              }
+              const pageNumber = index + start;
+
+              return (
+                <button
+                  key={pageNumber}
+                  className={classNames(styles.page, {
+                    [styles.active]: pageNumber === page,
+                  })}
+                  onClick={() => onChange(pageNumber)}
+                >
+                  {pageNumber + 1}
+                </button>
+              );
+            })}
         </>
       ) : (
         <button className={classNames(styles.page, styles.active)}>