Fix rank vs filtering using the new transform feature

oasisprotocol · May 16, 2024 · 879a750 · 879a750
1 parent 4ceb388
commit 879a750
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 4 deletions.
diff --git a/src/app/components/Validators/index.tsx b/src/app/components/Validators/index.tsx
@@ -12,8 +12,12 @@ import { ValidatorCumulativeVoting } from './ValidatorCumulativeVoting'
 import { ValidatorLink } from './ValidatorLink'
 import { useRequiredScopeParam } from '../../hooks/useScopeParam'
 
+export type RankedValidator = Validator & {
+  rank: number
+}
+
 type ValidatorsProps = {
-  validators?: Validator[]
+  validators?: RankedValidator[]
   isLoading: boolean
   limit: number
   pagination: false | TablePaginationProps
@@ -49,7 +53,7 @@ export const Validators: FC<ValidatorsProps> = ({
       {
         align: TableCellAlign.Center,
         // TODO: replace index when rank is implemented in the API
-        content: <div>{offset + index + 1}</div>,
+        content: <div>{validator.rank !== undefined ? validator.rank + 1 : offset + index + 1}</div>,
         key: 'rank',
       },
       {

diff --git a/src/app/pages/ValidatorsPage/hooks.ts b/src/app/pages/ValidatorsPage/hooks.ts
@@ -5,6 +5,7 @@ import { NUMBER_OF_ITEMS_ON_SEPARATE_PAGE } from '../../config'
 import { Network } from '../../../types/network'
 import { useTypedSearchParam } from '../../hooks/useTypedSearchParam'
 import { TFunction } from 'i18next'
+import { RankedValidator } from '../../components/Validators'
 import { hasTextMatch } from '../../components/HighlightedText/text-matching'
 
 export const useValidatorNameSearch = () => useTypedSearchParam('name', '', { deleteParams: ['page'] })
@@ -31,11 +32,14 @@ const useWantedValidatorFilter = (): ValidatorFilter => {
 }
 
 export const useLoadedValidators = (network: Network, tableView: TableLayout) => {
-  const pagination = useClientSidePagination<Validator, ValidatorList, [number, boolean]>({
+  const pagination = useClientSidePagination<RankedValidator, ValidatorList, [number, boolean]>({
     paramName: 'page',
     serverPageSize: 1000,
     clientPageSize: NUMBER_OF_ITEMS_ON_SEPARATE_PAGE,
-    transform: (data, r) => [data, [r.total_count, r.is_total_count_clipped]],
+    transform: (data, r) => [
+      data.map((v, index): RankedValidator => ({ ...v, rank: index })), // add rank as an extra field
+      [r.total_count, r.is_total_count_clipped], // Extract the real number of validators
+    ],
     filter: useWantedValidatorFilter(),
   })
   const { offset, limit } = pagination.paramsForServer