Improve pagination performance

binary-butterfly · Dec 4, 2024 · 5786948 · 5786948
1 parent fbe9e51
commit 5786948
Showing 1 changed file with 18 additions and 18 deletions.
diff --git a/src/js/components/PointBar.tsx b/src/js/components/PointBar.tsx
@@ -24,31 +24,32 @@ type PointBarProps = {
     setEntriesPerPage?: React.Dispatch<React.SetStateAction<number>>,
 }
 
-type PointBarPropsWithPage = PointBarProps & {
-    entriesPerPage: number,
-    setEntriesPerPage: () => void,
-}
+const PointBar = (props: PointBarProps) => {
+    const {page, setPage, displayPoints, localStrings, handlePoiClick, userPosition} = props;
 
-const PointBar = (props: PointBarProps | PointBarPropsWithPage) => {
     const [entriesPerPage, _setEntriesPerPage] = React.useState<number>(window.innerWidth < 1000 ? 4 : 8);
+    const [paginatedPoints, setPaginatedPoints] = React.useState<PointOfInterest[]>([]);
 
     const setEntriesPerPage = (newEntriesPerPage: number) => {
         _setEntriesPerPage(newEntriesPerPage);
         setPage(1);
     };
 
-    const {page, setPage, displayPoints, localStrings, handlePoiClick, userPosition} = props;
-
-
-
-    let paginatedPoints = [];
-    for (let c = 0; c < entriesPerPage; c++) {
-        const point = displayPoints[entriesPerPage * (page - 1) + c];
-        if (point === undefined) {
-            break;
+    React.useEffect(() => {
+        if (props.setEntriesPerPage) {
+            setPaginatedPoints(displayPoints);
+        } else {
+            const newPaginatedPoints = [];
+            for (let c = 0; c < entriesPerPage; c++) {
+                const point = displayPoints[entriesPerPage * (page - 1) + c];
+                if (point === undefined) {
+                    break;
+                }
+                newPaginatedPoints.push(point);
+            }
+            setPaginatedPoints(newPaginatedPoints);
         }
-        paginatedPoints.push(point);
-    }
+    }, [page, displayPoints, entriesPerPage]);
 
     return <>
         <CardContainer>
@@ -60,8 +61,7 @@ const PointBar = (props: PointBarProps | PointBarPropsWithPage) => {
                     entriesPerPage={props.entriesPerPage ?? entriesPerPage}
                     setEntriesPerPage={props.setEntriesPerPage ?? setEntriesPerPage}
                     entryCount={displayPoints.length}
-                    localStrings={localStrings}
-        />
+                    localStrings={localStrings}/>
     </>;
 };