diff --git a/components/Common/Pagination/PaginationListItem/__tests__/index.test.mjs b/components/Common/Pagination/PaginationListItem/__tests__/index.test.mjs index e5d91a4c10d52..d4996c47b2d16 100644 --- a/components/Common/Pagination/PaginationListItem/__tests__/index.test.mjs +++ b/components/Common/Pagination/PaginationListItem/__tests__/index.test.mjs @@ -1,7 +1,7 @@ import { render, screen } from '@testing-library/react'; -import { IntlProvider } from 'react-intl'; import PaginationListItem from '@/components/Common/Pagination/PaginationListItem'; +import { LocaleProvider } from '@/providers/localeProvider'; function renderPaginationListItem({ url, @@ -10,14 +10,14 @@ function renderPaginationListItem({ totalPages, }) { render( - + - + ); } diff --git a/components/Common/Pagination/PaginationListItem/index.tsx b/components/Common/Pagination/PaginationListItem/index.tsx index 105ee30eeb17e..e8ce23810ddfe 100644 --- a/components/Common/Pagination/PaginationListItem/index.tsx +++ b/components/Common/Pagination/PaginationListItem/index.tsx @@ -24,7 +24,6 @@ const PaginationListItem: FC = ({ return (
  • ({ url: `${item.url}-${Math.random()}` })); render( - + - + ); return { diff --git a/components/Common/Pagination/useGetPageElements.tsx b/components/Common/Pagination/useGetPageElements.tsx index a6e02f44d23af..b61acc8c4b6e8 100644 --- a/components/Common/Pagination/useGetPageElements.tsx +++ b/components/Common/Pagination/useGetPageElements.tsx @@ -68,28 +68,28 @@ export const useGetPageElements = ( totalPages ); - const firstPageIndex = 0; - const lastPageIndex = totalPages - 1; + const firstIndex = 0; + const lastIndex = totalPages - 1; // If there are at least two (2) elements between the far-left sibling of // the current page, and the first page, we should show left ellipsis // between them - const hasLeftEllipsis = leftSiblingsFirstIndex > firstPageIndex + 2; + const hasLeftEllipsis = leftSiblingsFirstIndex > firstIndex + 2; // If there are at least two (2) elements between the far-right sibling of // the current page, and the last page, we should show right ellipsis // between them - const hasRightEllipsis = rightSiblingsLastIndex < lastPageIndex - 1; + const hasRightEllipsis = rightSiblingsLastIndex < lastIndex - 1; if (!hasLeftEllipsis && hasRightEllipsis) { const leftPagesLastIndex = MINIMUM_AMOUNT_OF_ELEMENTS + totalSiblingsCount; - const leftPages = parsedPages.slice(firstPageIndex, leftPagesLastIndex); + const leftPages = parsedPages.slice(firstIndex, leftPagesLastIndex); return [ ...createPaginationListItems(leftPages), - Ellipsis(), - ...createPaginationListItems(parsedPages.slice(lastPageIndex)), + , + ...createPaginationListItems(parsedPages.slice(lastIndex)), ]; } @@ -101,9 +101,9 @@ export const useGetPageElements = ( return [ ...createPaginationListItems( - parsedPages.slice(firstPageIndex, firstPageIndex + 1) + parsedPages.slice(firstIndex, firstIndex + 1) ), - Ellipsis(), + , ...createPaginationListItems(rightPages), ]; } @@ -116,12 +116,12 @@ export const useGetPageElements = ( return [ ...createPaginationListItems( - parsedPages.slice(firstPageIndex, firstPageIndex + 1) + parsedPages.slice(firstIndex, firstIndex + 1) ), - Ellipsis(), + , ...createPaginationListItems(middlePages), - Ellipsis(), - ...createPaginationListItems(parsedPages.slice(lastPageIndex)), + , + ...createPaginationListItems(parsedPages.slice(lastIndex)), ]; } };