fix: update infinite scroll logic

zimmerman-team · Nov 20, 2024 · 261eba6 · 261eba6
1 parent 3da22a6
commit 261eba6
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 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
@@ -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
@@ -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
@@ -30,20 +30,29 @@ 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);
   const token = useStoreState((state) => state.AuthToken.value);
   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
@@ -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);