feat(pagination): add initialPage validation

kadena-community · Aug 23, 2023 · 17d6d8c · 17d6d8c
1 parent a6fa5e3
commit 17d6d8c
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 8 deletions.
diff --git a/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx b/packages/libs/react-ui/src/components/Pagination/Pagination.stories.tsx
@@ -64,7 +64,11 @@ export const Controlled: Story = {
     initialSelectedPage: 2,
   },
   render: ({ totalPages, label, visiblePageLimit, initialSelectedPage }) => {
-    const [page, setPage] = React.useState(initialSelectedPage ?? 1);
+    const validInitialSelectedPage =
+      initialSelectedPage && initialSelectedPage <= totalPages;
+    const [page, setPage] = React.useState(
+      validInitialSelectedPage ? initialSelectedPage : 1,
+    );
 
     return (
       <Stack direction="column" gap="$4">

diff --git a/packages/libs/react-ui/src/components/Pagination/Pagination.tsx b/packages/libs/react-ui/src/components/Pagination/Pagination.tsx
@@ -24,7 +24,12 @@ export const Pagination: FC<IPaginationProps> = ({
   initialSelectedPage,
   onPageChange,
 }) => {
-  const [_page, setPage] = useState(initialSelectedPage ?? 1);
+  const validInitialSelectedPage =
+    initialSelectedPage && initialSelectedPage <= totalPages;
+
+  const [_page, setPage] = useState(
+    validInitialSelectedPage ? initialSelectedPage : 1,
+  );
   const page = currentPage || _page;
   const pages = paginate({
     page,
@@ -51,12 +56,14 @@ export const Pagination: FC<IPaginationProps> = ({
           />
         </li>
         {pages.map((pageNum) => (
-          <PageNum
-            key={pageNum}
-            number={pageNum}
-            current={pageNum === page}
-            onClick={() => onClick(pageNum)}
-          />
+          <li key={pageNum}>
+            <PageNum
+              key={pageNum}
+              number={pageNum}
+              current={pageNum === page}
+              onClick={() => onClick(pageNum)}
+            />
+          </li>
         ))}
         <li>
           <PageNav