From 352ba554368991c021d414f72b7e8b082e090b8a Mon Sep 17 00:00:00 2001
From: MVarshini <varm@redhat.com>
Date: Sat, 15 Apr 2023 16:56:34 +0530
Subject: [PATCH] per Page select error

---
 .../assets/constants/browsingPageConstants.js |  1 +
 .../components/PaginationComponent/index.jsx  | 40 +++++++++++++------
 .../components/TableComponent/index.jsx       |  2 +-
 3 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/dashboard/src/assets/constants/browsingPageConstants.js b/dashboard/src/assets/constants/browsingPageConstants.js
index 6b83d584e6..45d6f9de19 100644
--- a/dashboard/src/assets/constants/browsingPageConstants.js
+++ b/dashboard/src/assets/constants/browsingPageConstants.js
@@ -1,3 +1,4 @@
 export const DEFAULT_PER_PAGE = 20;
 export const LIMIT = 60;
 export const START_PAGE_NUMBER = 1;
+export const LIMIT_MULTIPLIER = 3;
diff --git a/dashboard/src/modules/components/PaginationComponent/index.jsx b/dashboard/src/modules/components/PaginationComponent/index.jsx
index f57cc3139f..6752af1bb5 100644
--- a/dashboard/src/modules/components/PaginationComponent/index.jsx
+++ b/dashboard/src/modules/components/PaginationComponent/index.jsx
@@ -8,33 +8,47 @@ import {
 } from "actions/datasetListActions";
 import { useDispatch, useSelector } from "react-redux";
 
+import { LIMIT_MULTIPLIER } from "assets/constants/browsingPageConstants";
 import React from "react";
 
 const TablePagination = ({ page, setPage }) => {
   const dispatch = useDispatch();
 
-  const { totalDatasets, publicData, perPage, limit } = useSelector(
+  const { totalDatasets, publicData, perPage } = useSelector(
     (state) => state.datasetlist
   );
   const onSetPage = (_event, pageNumber) => {
     setPage(pageNumber);
 
-    fetchData(_event, pageNumber);
+    fetchData(_event, pageNumber, perPage);
   };
-  const onPerPageSelect = (_event, perPage, newPage) => {
-    if (perPage > limit) {
-      dispatch(setPageLimit(perPage));
-    }
-    dispatch(setPerPage(perPage));
+  const onPerPageSelect = (_event, newPerPage, newPage) => {
+    dispatch(setPageLimit(newPerPage * LIMIT_MULTIPLIER));
+
+    dispatch(setPerPage(newPerPage));
     setPage(newPage);
 
-    fetchData(_event, newPage);
+    fetchData(_event, newPage, newPerPage);
   };
-  const fetchData = (_event, newPage) => {
-    const startIdx = (newPage - 1) * perPage;
-
-    if (!publicData[startIdx]) {
-      const offset = (newPage - 1) * perPage;
+  const fetchData = (_event, newPage, newPerPage = perPage) => {
+    const startIdx = (newPage - 1) * newPerPage;
+    const endIdx = newPage * newPerPage;
+    let left = startIdx;
+    let right = endIdx;
+    while (left < right) {
+      if (publicData[startIdx]) {
+        left++;
+      } else {
+        break;
+      }
+      if (publicData[endIdx]) {
+        right--;
+      } else {
+        break;
+      }
+    }
+    if (left !== right) {
+      const offset = (newPage - 1) * newPerPage;
 
       dispatch({
         type: TYPES.SET_PAGE_OFFSET,
diff --git a/dashboard/src/modules/components/TableComponent/index.jsx b/dashboard/src/modules/components/TableComponent/index.jsx
index 8e3348391d..5d856f9aac 100644
--- a/dashboard/src/modules/components/TableComponent/index.jsx
+++ b/dashboard/src/modules/components/TableComponent/index.jsx
@@ -233,7 +233,7 @@ const TableWithFavorite = () => {
                       </Tr>
                     ))
                   ) : (
-                    <Tr>
+                    <Tr key={"empty-row"}>
                       <Td colSpan={8}>
                         <EmptyTable />
                       </Td>