refactor: simplify

Author: DanielSchiavini

packages/curve-ui-kit/src/shared/ui/DataTable/TablePagination.tsx

@@ -1,4 +1,4 @@
-import { last } from 'lodash'
+import { capitalize, last } from 'lodash'
 import { useCallback, useId } from 'react'
 import { range } from '@curvefi/prices-api/objects.util'
 import IconButton from '@mui/material/IconButton'
@@ -50,6 +50,20 @@ const getPageOptions = (pageIndex: number, pageCount: number): [number[], number
   range(pageCount - 2, 2).filter((p) => p > pageIndex + 1),
 ]
 
+/**
+ * A button component for navigating to the previous or next page in pagination.
+ */
+const NeighborButton = <T extends TableItem>({ table, type }: { table: Table<T>; type: 'previous' | 'next' }) => (
+  <IconButton
+    size="extraSmall"
+    {...(table[`getCan${capitalize(type)}Page`]()
+      ? { 'data-testid': `btn-page-${type.substring(0, 4)}`, onClick: table[`${type}Page`] }
+      : { disabled: true })}
+  >
+    <ChevronDownIcon sx={{ transform: `rotate(${{ previous: '-90', next: '90' }[type]}deg)` }} />
+  </IconButton>
+)
+
 /**
  * Table pagination component for navigating through pages of a data table.
  * Renders previous/next buttons and page number buttons with ellipses for skipped pages.
@@ -59,34 +73,20 @@ export const TablePagination = <T extends TableItem>({ table }: { table: Table<T
   const [firstPages, aroundPages, lastPages] = getPageOptions(pageIndex, table.getPageCount())
   return (
     <Stack justifyContent="center" direction="row" data-testid="table-pagination">
-      <IconButton
-        size="extraSmall"
-        {...(table.getCanPreviousPage()
-          ? { 'data-testid': 'btn-page-prev', onClick: table.previousPage }
-          : { disabled: true })}
-      >
-        <ChevronDownIcon sx={{ transform: `rotate(90deg)` }} />
-      </IconButton>
+      <NeighborButton table={table} type="previous" />
       <ToggleButtonGroup value={pageIndex} size="extraSmall" exclusive data-testid="page-buttons">
         {firstPages.map((o) => (
           <PageButton key={o} page={o} table={table} />
         ))}
-        {firstPages.length > 0 && last(firstPages) != aroundPages[0] - 1 && <Spacer />}
+        {firstPages.length > 0 && last(firstPages) !== aroundPages[0] - 1 && <Spacer />}
         {aroundPages.map((o) => (
           <PageButton key={o} page={o} table={table} />
         ))}
-        {lastPages.length > 0 && lastPages[0] - 1 != last(aroundPages) && <Spacer />}
+        {lastPages.length > 0 && lastPages[0] - 1 !== last(aroundPages) && <Spacer />}
         {lastPages.map((o) => (
           <PageButton key={o} page={o} table={table} />
         ))}
-        <IconButton
-          size="extraSmall"
-          {...(table.getCanNextPage()
-            ? { 'data-testid': 'btn-page-next', onClick: table.nextPage }
-            : { disabled: true })}
-        >
-          <ChevronDownIcon sx={{ transform: `rotate(-90deg)` }} />
-        </IconButton>
+        <NeighborButton table={table} type="next" />
       </ToggleButtonGroup>
     </Stack>
   )

tests/cypress/e2e/main/dex-markets.cy.ts

@@ -1,3 +1,4 @@
+import { orderBy } from 'lodash'
 import { oneOf } from '@cy/support/generators'
 import { setShowSmallPools } from '@cy/support/helpers/user-profile'
 import { API_LOAD_TIMEOUT, type Breakpoint, LOAD_TIMEOUT, oneViewport } from '@cy/support/ui'
@@ -33,19 +34,20 @@ function visitAndWait(width: number, height: number, options?: { page?: number }
 
 type UsdValue = { text: string; parsed: number }
 
-const expectOrder = (actual: UsdValue[], order: 'asc' | 'desc') => {
-  const expected = [...actual].sort((a, b) => (a.parsed - b.parsed) * { asc: 1, desc: -1 }[order])
-  expect(JSON.stringify(actual), `Table values should be in ${order} order`).to.equal(JSON.stringify(expected))
-}
-
-const getTopUsdValues = (columnId: 'volume' | 'tvl', n = 5) =>
-  cy.get(`[data-testid="data-table-cell-${columnId}"]`).then(($cells) =>
-    Cypress.$.makeArray($cells)
-      .slice(0, n)
-      .map((el) => (el as HTMLElement).innerText)
-      .map((text): UsdValue => ({ text, parsed: parseCompactUsd(text) })),
+const expectOrder = (actual: UsdValue[], order: 'asc' | 'desc') =>
+  expect(JSON.stringify(actual), `Table values should be in ${order} order`).to.equal(
+    JSON.stringify(orderBy(actual, 'parsed', order)),
   )
 
+const getTopUsdValues = (columnId: 'volume' | 'tvl') =>
+  cy
+    .get(`[data-testid="data-table-cell-${columnId}"]`)
+    .then(($cells) =>
+      Cypress.$.makeArray($cells).map(
+        ({ innerText }): UsdValue => ({ text: innerText, parsed: parseCompactUsd(innerText) }),
+      ),
+    )
+
 describe('DEX Pools', () => {
   let breakpoint: Breakpoint
   let width: number, height: number
@@ -55,9 +57,7 @@ describe('DEX Pools', () => {
   })
 
   describe('First page', () => {
-    beforeEach(() => {
-      visitAndWait(width, height)
-    })
+    beforeEach(() => visitAndWait(width, height))
 
     function sortBy(field: string, expectedOrder: 'asc' | 'desc' | false) {
       if (breakpoint === 'mobile') {