Update pagination of lists on the validator page

pshenmic · Oct 16, 2024 · 50045fe · 50045fe
1 parent 82d2a12
commit 50045fe
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 6 deletions.
diff --git a/packages/frontend/src/app/validator/[hash]/Validator.js b/packages/frontend/src/app/validator/[hash]/Validator.js
@@ -423,12 +423,13 @@ function Validator ({ hash }) {
                     : <ErrorMessageBlock/>
                   }
 
-                  {proposedBlocks.data?.resultSet?.length > 0 &&
+                  {proposedBlocks.data?.resultSet &&
                     <div className={'ValidatorPage__ListPagination'}>
                       <Pagination
                         onPageChange={pagination => paginationHandler(setProposedBlocks, pagination.selected)}
                         pageCount={Math.ceil(proposedBlocks.data?.pagination?.total / pageSize) || 1}
                         forcePage={currentPage}
+                        pageRangeDisplayed={0}
                       />
                     </div>
                   }
@@ -445,13 +446,13 @@ function Validator ({ hash }) {
                       </div>
                     : <ErrorMessageBlock/>}
 
-                  {transactions.data?.resultSet?.length > 0 &&
+                  {transactions.data?.resultSet &&
                     <div className={'ValidatorPage__ListPagination'}>
                       <Pagination
-                        className={'ValidatorPage__ListPagination'}
                         onPageChange={pagination => paginationHandler(setTransactions, pagination.selected)}
                         pageCount={Math.ceil(transactions.data?.pagination?.total / pageSize) || 1}
                         forcePage={currentPage}
+                        pageRangeDisplayed={0}
                       />
                     </div>
                   }

diff --git a/packages/frontend/src/app/validator/[hash]/ValidatorPage.scss b/packages/frontend/src/app/validator/[hash]/ValidatorPage.scss
@@ -35,6 +35,20 @@
 
   &__ListPagination {
     margin-top: 20px;
+
+    .PageItem {
+      &--Previous, &--Next {
+        display: block;
+      }
+
+      &--Previous {
+        margin-right: auto;
+      }
+
+      &--Next {
+        margin-left: auto;
+      }
+    }
   }
 
   &__List {

diff --git a/packages/frontend/src/components/pagination/index.js b/packages/frontend/src/components/pagination/index.js
@@ -2,16 +2,22 @@ import './Pagination.scss'
 
 import ReactPaginate from 'react-paginate'
 
-function Pagination ({ onPageChange, pageCount, forcePage }) {
+function Pagination ({
+  onPageChange,
+  pageCount,
+  forcePage,
+  pageRangeDisplayed = 2,
+  marginPagesDisplayed = 1
+}) {
   pageCount = Math.max(pageCount, 1)
 
   return (
     <ReactPaginate
       breakLabel={'...'}
       nextLabel={'>'}
       onPageChange={onPageChange}
-      pageRangeDisplayed={2}
-      marginPagesDisplayed={1}
+      pageRangeDisplayed={pageRangeDisplayed}
+      marginPagesDisplayed={marginPagesDisplayed}
       pageCount={pageCount}
       previousLabel={'<'}
       pageClassName={'PageItem'}