From 261eba6b03730c0cc4581abe3b8f39e3c1c5bcc9 Mon Sep 17 00:00:00 2001
From: okorie2 <ellahokorie@gmail.com>
Date: Wed, 20 Nov 2024 15:48:30 +0000
Subject: [PATCH] fix: update infinite scroll logic

---
 .../components/AssetCollection/All/assetsGrid.tsx   |  4 ++--
 .../AssetCollection/Charts/chartsGrid.tsx           |  4 +++-
 .../AssetCollection/Datasets/datasetsGrid.tsx       | 13 +++++++++++--
 .../AssetCollection/Reports/reportsGrid.tsx         |  3 ++-
 4 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/app/modules/home-module/components/AssetCollection/All/assetsGrid.tsx b/src/app/modules/home-module/components/AssetCollection/All/assetsGrid.tsx
index d2bda6528..973e599c4 100644
--- a/src/app/modules/home-module/components/AssetCollection/All/assetsGrid.tsx
+++ b/src/app/modules/home-module/components/AssetCollection/All/assetsGrid.tsx
@@ -23,7 +23,7 @@ import ColoredReportIcon from "app/assets/icons/ColoredReportIcon";
 import DeleteDatasetDialog from "app/components/Dialogs/deleteDatasetDialog";
 import DeleteReportDialog from "app/components/Dialogs/deleteReportDialog";
 import { EditorState, convertFromRaw } from "draft-js";
-import { DatasetListItemAPIModel } from "app/modules/dataset-module/data";
+import { getLimit } from "app/modules/home-module/components/AssetCollection/Datasets/datasetsGrid";
 import { HomepageTable } from "app/modules/home-module/components/Table/";
 import { planDialogAtom } from "app/state/recoil/atoms";
 import { useSetRecoilState } from "recoil";
@@ -55,7 +55,7 @@ export default function AssetsGrid(props: Props) {
 
   const token = useStoreState((state) => state.AuthToken.value);
 
-  const limit = 15;
+  const limit = getLimit();
   const [offset, setOffset] = React.useState(0);
 
   const { isObserved } = useInfinityScroll(observerTarget);
diff --git a/src/app/modules/home-module/components/AssetCollection/Charts/chartsGrid.tsx b/src/app/modules/home-module/components/AssetCollection/Charts/chartsGrid.tsx
index e29bdd243..6f4bce3dc 100644
--- a/src/app/modules/home-module/components/AssetCollection/Charts/chartsGrid.tsx
+++ b/src/app/modules/home-module/components/AssetCollection/Charts/chartsGrid.tsx
@@ -22,6 +22,7 @@ import GridItem from "app/modules/home-module/components/AssetCollection/Charts/
 import { useAuth0 } from "@auth0/auth0-react";
 import { useSetRecoilState } from "recoil";
 import { planDialogAtom } from "app/state/recoil/atoms";
+import { getLimit } from "app/modules/home-module/components/AssetCollection/Datasets/datasetsGrid";
 
 interface Props {
   sortBy: string;
@@ -48,7 +49,8 @@ export default function ChartsGrid(props: Props) {
   const [enableButton, setEnableButton] = React.useState<boolean>(false);
   const token = useStoreState((state) => state.AuthToken.value);
   const initialRender = React.useRef(true);
-  const limit = 15;
+  const limit = getLimit();
+
   const [offset, setOffset] = React.useState(0);
 
   const { isObserved } = useInfinityScroll(observerTarget);
diff --git a/src/app/modules/home-module/components/AssetCollection/Datasets/datasetsGrid.tsx b/src/app/modules/home-module/components/AssetCollection/Datasets/datasetsGrid.tsx
index aa2be3a9c..0312fe374 100644
--- a/src/app/modules/home-module/components/AssetCollection/Datasets/datasetsGrid.tsx
+++ b/src/app/modules/home-module/components/AssetCollection/Datasets/datasetsGrid.tsx
@@ -30,12 +30,22 @@ interface Props {
   userOnly?: boolean;
 }
 
+export const getLimit = () => {
+  let rows = 4;
+  const size = Math.floor(window.innerHeight / 400);
+  if (window.innerHeight <= 1050) {
+    return rows * 4;
+  } else {
+    rows += size;
+    return rows * 4;
+  }
+};
 export default function DatasetsGrid(props: Readonly<Props>) {
+  const limit = getLimit();
   const observerTarget = React.useRef(null);
   const [cardId, setCardId] = React.useState<string>("");
   const [enableButton, setEnableButton] = React.useState<boolean>(false);
   const [modalDisplay, setModalDisplay] = React.useState<boolean>(false);
-  const limit = 15;
   const initialRender = React.useRef(true);
   const [offset, setOffset] = React.useState(0);
   const { isObserved } = useInfinityScroll(observerTarget);
@@ -43,7 +53,6 @@ export default function DatasetsGrid(props: Readonly<Props>) {
   const setPlanDialog = useSetRecoilState(planDialogAtom);
   const [loadedDatasets, setLoadedDatasets] =
     useRecoilState(loadedDatasetsAtom);
-
   const datasets = useStoreState(
     (state) =>
       (state.dataThemes.DatasetGetList.crudData ??
diff --git a/src/app/modules/home-module/components/AssetCollection/Reports/reportsGrid.tsx b/src/app/modules/home-module/components/AssetCollection/Reports/reportsGrid.tsx
index e5aa095c5..4aef70263 100644
--- a/src/app/modules/home-module/components/AssetCollection/Reports/reportsGrid.tsx
+++ b/src/app/modules/home-module/components/AssetCollection/Reports/reportsGrid.tsx
@@ -16,6 +16,7 @@ import { EditorState, convertFromRaw } from "draft-js";
 import { useSetRecoilState } from "recoil";
 import { planDialogAtom } from "app/state/recoil/atoms";
 import CircleLoader from "app/modules/home-module/components/Loader";
+import { getLimit } from "app/modules/home-module/components/AssetCollection/Datasets/datasetsGrid";
 
 interface Props {
   sortBy: string;
@@ -31,7 +32,7 @@ export default function ReportsGrid(props: Readonly<Props>) {
   const [modalDisplay, setModalDisplay] = React.useState<boolean>(false);
   const [enableButton, setEnableButton] = React.useState<boolean>(false);
   const [loadedReports, setLoadedReports] = React.useState<ReportModel[]>([]);
-  const limit = 15;
+  const limit = getLimit();
   const initialRender = React.useRef(true);
   const [offset, setOffset] = React.useState(0);
   const { isObserved } = useInfinityScroll(observerTarget);