Merge pull request #295 from pshenmic/feat/validators-list

Implement "All" option for items on page selector in the validators list
pshenmic · Oct 22, 2024 · e8ea228 · e8ea228
2 parents e5b3acf + afd916c
commit e8ea228
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 6 deletions.
diff --git a/packages/frontend/src/app/validators/Validators.js b/packages/frontend/src/app/validators/Validators.js
@@ -14,7 +14,7 @@ import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 const paginateConfig = {
   pageSize: {
     default: 25,
-    values: [10, 25, 50, 75, 100]
+    values: [10, 25, 50, 75, 100, 'All']
   },
   defaultPage: 1
 }
@@ -25,14 +25,18 @@ function Validators ({ defaultPage = 1, defaultPageSize, defaultIsActive }) {
   const [currentPage, setCurrentPage] = useState(defaultPage ? defaultPage - 1 : 0)
   const [total, setTotal] = useState(1)
   const [activeState, setActiveState] = useState(defaultIsActive !== undefined ? defaultIsActive : 'all')
-  const pageCount = Math.ceil(total / pageSize)
+  const pageCount = String(pageSize).toLocaleLowerCase() !== 'all'
+    ? Math.ceil(total / pageSize)
+    : 1
   const router = useRouter()
   const pathname = usePathname()
   const searchParams = useSearchParams()
 
   const fetchData = (page, count, active) => {
     setValidators({ data: {}, loading: true, error: false })
 
+    if (String(count).toLowerCase() === 'all') count = 0
+
     const state = (() => {
       if (active === 'all') return null
       return active === 'current'
@@ -54,7 +58,7 @@ function Validators ({ defaultPage = 1, defaultPageSize, defaultIsActive }) {
   useEffect(() => {
     const page = parseInt(searchParams.get('page')) || paginateConfig.defaultPage
     setCurrentPage(Math.max(page - 1, 0))
-    setPageSize(parseInt(searchParams.get('page-size')) || paginateConfig.pageSize.default)
+    setPageSize(searchParams.get('page-size') || paginateConfig.pageSize.default)
   }, [searchParams, pathname])
 
   useEffect(() => {
@@ -118,7 +122,7 @@ function Validators ({ defaultPage = 1, defaultPageSize, defaultIsActive }) {
               forcePage={currentPage}
             />
             <PageSizeSelector
-              PageSizeSelectHandler={(e) => setPageSize(Number(e.target.value))}
+              PageSizeSelectHandler={e => setPageSize(e.target.value)}
               value={pageSize}
               items={paginateConfig.pageSize.values}
             />

diff --git a/packages/frontend/src/components/pageSizeSelector/PageSizeSelector.scss b/packages/frontend/src/components/pageSizeSelector/PageSizeSelector.scss
@@ -5,7 +5,7 @@
   display: flex;
   font-family: $font-mono;
   align-items: center;
-  
+
   &__Title {
     margin-right: 8px;
     white-space: nowrap;

diff --git a/packages/frontend/src/components/validators/ValidatorsList.js b/packages/frontend/src/components/validators/ValidatorsList.js
@@ -91,7 +91,13 @@ export default function ValidatorsList ({ validators, pageSize }) {
 
         {!validators?.loading
           ? getSortedList().map((validator, i) => <ValidatorListItem key={i} validator={validator}/>)
-          : Array.from({ length: pageSize }, (x, i) => <ValidatorListItem key={i} loading={true}/>)
+          : Array.from({
+            length: String(pageSize).toLowerCase() === 'all'
+              ? 50
+              : pageSize
+          }, (x, i) => (
+            <ValidatorListItem key={i} loading={true}/>
+          ))
         }
       </div>
     </div>