SOV-4302: add pagination page limit (#959)

* feat: add pagination page limit * Create spicy-eagles-sneeze.md
DistributedCollective · Jul 23, 2024 · 8d41bc7 · 8d41bc7
1 parent 9ed0c28
commit 8d41bc7
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 12 deletions.
diff --git a/.changeset/spicy-eagles-sneeze.md b/.changeset/spicy-eagles-sneeze.md
@@ -0,0 +1,6 @@
+---
+"frontend": patch
+"@sovryn/ui": patch
+---
+
+SOV-4302: add pagination page limit
diff --git a/...oardPointsPage/components/LeaderboardPointsSeason2/LeaderboardPointsSeason2.constants.tsx b/...oardPointsPage/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/...es/LeaderboardPointsPage/components/LeaderboardPointsSeason2/LeaderboardPointsSeason2.tsx b/...es/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
@@ -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)}>