fix(twap): fix navigation for big count of orders (#6237)

Author: shoom3301

apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTablePagination/PageNavigationButton.tsx

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react'
+
+import { ArrowButton, PageButtonLink } from './styled'
+
+interface PageNavigationButtonProps {
+  index: number
+  getPageUrl?(index: number): Partial<{ pathname: string; search: string }>
+  goToPage(index: number): void
+  children: ReactNode
+  active?: boolean
+}
+
+export function PageNavigationButton({
+  index,
+  active = false,
+  getPageUrl,
+  goToPage,
+  children,
+}: PageNavigationButtonProps): ReactNode {
+  return getPageUrl ? (
+    <PageButtonLink to={getPageUrl(index)} $active={active}>
+      {children}
+    </PageButtonLink>
+  ) : (
+    <ArrowButton onClick={() => goToPage(index)} $active={active}>
+      {children}
+    </ArrowButton>
+  )
+}

apps/cowswap-frontend/src/modules/ordersTable/pure/OrdersTablePagination/index.tsx

@@ -1,8 +1,9 @@
-import { useCallback, useMemo } from 'react'
+import { ReactNode, useCallback, useMemo } from 'react'
 
 import { ChevronLeft, ChevronRight } from 'react-feather'
 
-import { ArrowButton, BlankButton, PageButton, PageButtonLink, PaginationBox } from './styled'
+import { PageNavigationButton } from './PageNavigationButton'
+import { BlankButton, PaginationBox } from './styled'
 
 const PAGES_LIMIT = 14
 
@@ -15,17 +16,14 @@ export interface OrdersTablePaginationProps {
   className?: string
 }
 
-// TODO: Break down this large function into smaller functions
-// TODO: Add proper return type annotation
-// eslint-disable-next-line max-lines-per-function, @typescript-eslint/explicit-function-return-type
 export function OrdersTablePagination({
   pageSize,
   totalCount,
   currentPage,
   getPageUrl,
   onPageChange,
   className,
-}: OrdersTablePaginationProps) {
+}: OrdersTablePaginationProps): ReactNode {
   const pagesCount = Math.ceil(totalCount / pageSize)
 
   const pagesArray = useMemo(() => [...new Array(pagesCount)].map((item, i) => i), [pagesCount])
@@ -42,12 +40,8 @@ export function OrdersTablePagination({
     (page: number) => {
       if (onPageChange) {
         onPageChange(page)
-        return
-      }
-
-      if (getPageUrl) {
+      } else if (getPageUrl) {
         getPageUrl(page)
-        return
       }
     },
     [onPageChange, getPageUrl],
@@ -57,12 +51,15 @@ export function OrdersTablePagination({
     <PaginationBox className={className}>
       {isListBig && (
         <>
-          <ArrowButton onClick={() => goToPage(Math.max(currentPage - 1, 1))}>
+          <PageNavigationButton goToPage={goToPage} getPageUrl={getPageUrl} index={Math.max(currentPage - 1, 1)}>
             <ChevronLeft size={20} />
-          </ArrowButton>
+          </PageNavigationButton>
+
           {!isFirstPagesBatch && (
             <>
-              <PageButton onClick={() => goToPage(1)}>1</PageButton>
+              <PageNavigationButton goToPage={goToPage} getPageUrl={getPageUrl} index={1}>
+                1
+              </PageNavigationButton>
               <BlankButton>...</BlankButton>
             </>
           )}
@@ -71,35 +68,35 @@ export function OrdersTablePagination({
       {pagesArray.slice(batchStart, batchEnd).map((i) => {
         const index = i + 1
 
-        if (onPageChange) {
-          return (
-            <PageButton key={index} $active={index === currentPage} onClick={() => onPageChange(index)}>
-              {index}
-            </PageButton>
-          )
-        }
-
-        if (getPageUrl) {
-          return (
-            <PageButtonLink key={index} $active={index === currentPage} to={getPageUrl(index)}>
-              {index}
-            </PageButtonLink>
-          )
-        }
-
-        return null
+        return (
+          <PageNavigationButton
+            key={index}
+            goToPage={goToPage}
+            getPageUrl={getPageUrl}
+            index={index}
+            active={index === currentPage}
+          >
+            {index}
+          </PageNavigationButton>
+        )
       })}
       {isListBig && (
         <>
           {!isLastPagesBatch && (
             <>
               <BlankButton>...</BlankButton>
-              <PageButton onClick={() => goToPage(pagesCount)}>{pagesCount}</PageButton>
+              <PageNavigationButton goToPage={goToPage} getPageUrl={getPageUrl} index={pagesCount}>
+                {pagesCount}
+              </PageNavigationButton>
             </>
           )}
-          <ArrowButton onClick={() => goToPage(Math.min(currentPage + 1, pagesCount))}>
+          <PageNavigationButton
+            goToPage={goToPage}
+            getPageUrl={getPageUrl}
+            index={Math.min(currentPage + 1, pagesCount)}
+          >
             <ChevronRight size={20} />
-          </ArrowButton>
+          </PageNavigationButton>
         </>
       )}
     </PaginationBox>