From a16c4b622361482cab81a0d391113b24338f0fa6 Mon Sep 17 00:00:00 2001
From: luciob <lucio.bordonaro@gmail.com>
Date: Wed, 15 Sep 2021 13:37:37 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20[Table]=20Fixed=20page=20?=
 =?UTF-8?q?out=20of=20range=20in=20MUITablePagination?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Closes: 208
---
 .../Table/components/Pagination/index.tsx     | 10 +++++--
 src/components/Table/index.test.tsx           | 29 +++++++++++++++++++
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/components/Table/components/Pagination/index.tsx b/src/components/Table/components/Pagination/index.tsx
index 440e211b..c751377a 100644
--- a/src/components/Table/components/Pagination/index.tsx
+++ b/src/components/Table/components/Pagination/index.tsx
@@ -1,4 +1,4 @@
-import React, { FC, useCallback } from "react";
+import React, { FC, useCallback, useMemo } from "react";
 import {
   TablePagination as MUITablePagination,
   TablePaginationProps as MUITablePaginationProps,
@@ -24,11 +24,15 @@ const TablePagination: FC<ITablePagination> = ({
     [dataCy, subpart]
   );
 
+  const safeCount = useMemo(() => rowsTotal || 0, [rowsTotal]);
+
+  const safePage = useMemo(() => (!safeCount ? 0 : page), [page, safeCount]);
+
   return (
     <MUITablePagination
       ActionsComponent={paginationActions}
       component="div"
-      count={rowsTotal || 0}
+      count={safeCount}
       onPageChange={(event, page) => {
         suppressEvent(event);
         onPageChange && onPageChange(page);
@@ -37,7 +41,7 @@ const TablePagination: FC<ITablePagination> = ({
         const pageSize = parseInt(event.target.value, 10);
         onPageSizeChange && onPageSizeChange(0, pageSize);
       }}
-      page={page}
+      page={safePage}
       rowsPerPage={pageSize}
       rowsPerPageOptions={pageSizeOptions}
       style={style}
diff --git a/src/components/Table/index.test.tsx b/src/components/Table/index.test.tsx
index 40ba5e23..e139c039 100644
--- a/src/components/Table/index.test.tsx
+++ b/src/components/Table/index.test.tsx
@@ -242,6 +242,35 @@ describe("Table test suite:", () => {
     expect(onPageChange).toHaveBeenCalledWith(9);
   });
 
+  it("pagination - safe", () => {
+    const onPageChange = jest.fn();
+
+    const { wrapper } = getTableTestable({
+      props: {
+        onPageChange,
+        page: 3,
+        rows: [],
+        rowsTotal: 0,
+      },
+    });
+
+    const firstPageButtonDataCy = getComposedDataCy(DATA_CY_DEFAULT, SUBPARTS_MAP.pagination, "first");
+    const firstPageButton = wrapper.find(`button[data-cy='${firstPageButtonDataCy}']`);
+    expect(firstPageButton.prop("disabled")).toBeTruthy();
+
+    const prevPageButtonDataCy = getComposedDataCy(DATA_CY_DEFAULT, SUBPARTS_MAP.pagination, "prev");
+    const prevPageButton = wrapper.find(`button[data-cy='${prevPageButtonDataCy}']`);
+    expect(prevPageButton.prop("disabled")).toBeTruthy();
+
+    const nextPageButtonDataCy = getComposedDataCy(DATA_CY_DEFAULT, SUBPARTS_MAP.pagination, "next");
+    const nextPageButton = wrapper.find(`button[data-cy='${nextPageButtonDataCy}']`);
+    expect(nextPageButton.prop("disabled")).toBeTruthy();
+
+    const lastPageButtonDataCy = getComposedDataCy(DATA_CY_DEFAULT, SUBPARTS_MAP.pagination, "last");
+    const lastPageButton = wrapper.find(`button[data-cy='${lastPageButtonDataCy}']`);
+    expect(lastPageButton.prop("disabled")).toBeTruthy();
+  });
+
   it("pre-selection", () => {
     const { element } = getTableTestable({ props: { selectionFilter: (d) => d.name.startsWith("P") } });