Init

src/Gridler/components/Pager.tsx

@@ -0,0 +1,62 @@
+
+import React, { useEffect } from 'react';
+
+import { range } from '../utils/range';
+import { useStore } from './Store';
+
+//The computer component does not need to be recalculated on every render, so we use React.memo to prevent unnecessary re-renders.
+export const Pager = React.memo(() => {
+  const [
+    setState,
+    glideref,
+    visiblePages,
+    //_visibleArea,
+    pageSize,
+    loadPage,
+    _loadingList,
+    hasLocalData
+  ] = useStore((s) => [
+    s.setState,
+    s._glideref,
+    s._visiblePages,
+    //s._visibleArea,
+    s.pageSize,
+    s.loadPage,
+
+    s._loadingList,
+    s.hasLocalData
+  ]);
+
+  useEffect(() => {
+    if (!glideref) {return;}
+    setState('mounted', true);
+  }, [setState]);
+
+  //Maybe move this into a computer component.
+  useEffect(() => {
+    if (!glideref) {return;}
+    if (hasLocalData) {
+      //using local data, no need to load pages
+      return;
+    }
+    const firstPage = Math.max(0, Math.floor(visiblePages.y / pageSize));
+    const lastPage = Math.floor((visiblePages.y + visiblePages.height) / pageSize);
+    //const upperPage = pageSize * firstPage;
+
+    // console.log(
+    //   'Render1',
+    //   { firstPage, lastPage, upperPage },
+    //   { pageSize, _visibleArea, visiblePages },
+    //   glideref,
+
+    //   _loadingList,
+    //   _editData
+    // );
+
+    for (const page of range(firstPage, lastPage + 1, 1)) {
+      loadPage(page);
+    }
+  }, [loadPage, pageSize, visiblePages, glideref, _loadingList,hasLocalData]);
+
+  return <></>;
+});