Add second pagination

binary-butterfly · Dec 4, 2024 · 6748d5f · 6748d5f
1 parent dea32cb
commit 6748d5f
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/src/js/components/Pagination.tsx b/src/js/components/Pagination.tsx
@@ -11,6 +11,7 @@ type PaginationProps = {
     setEntriesPerPage: React.Dispatch<React.SetStateAction<number>> | ((page: number) => void),
     entryCount: number,
     localStrings: LocalStrings,
+    c: number,
 }
 
 const Pagination = React.memo((props: PaginationProps) => {
@@ -36,7 +37,7 @@ const Pagination = React.memo((props: PaginationProps) => {
         <div>
             <select value={entriesPerPage}
                     onChange={(e) => setEntriesPerPage(Number(e.target.value))}
-                    id="react-butterfly-map-pagination-entries-per-page">
+                    id={"react-butterfly-map-pagination-entries-per-page" + String(props.c)}>
                 <option value={2}>2</option>
                 <option value={4}>4</option>
                 <option value={5}>5</option>
@@ -46,7 +47,7 @@ const Pagination = React.memo((props: PaginationProps) => {
                 <option value={25}>25</option>
                 <option value={50}>50</option>
             </select>
-            <label htmlFor="react-butterfly-map-pagination-entries-per-page">{localStrings.entriesPerPage}</label>
+            <label htmlFor={"react-butterfly-map-pagination-entries-per-page" + String(props.c)}>{localStrings.entriesPerPage}</label>
             <span>{localStrings.showing} {entriesPerPage * (page - 1) + 1}-{mostEntries > entryCount ? entryCount : mostEntries} {localStrings.of} {entryCount}.</span>
         </div>
     </PaginationMeta>;

diff --git a/src/js/components/PointBar.tsx b/src/js/components/PointBar.tsx
@@ -53,6 +53,13 @@ const PointBar = (props: PointBarProps) => {
     }, [page, displayPoints, entriesPerPage]);
 
     return <>
+        <Pagination page={page}
+                    setPage={setPage}
+                    entriesPerPage={props.entriesPerPage ?? entriesPerPage}
+                    setEntriesPerPage={props.setEntriesPerPage ?? setEntriesPerPage}
+                    entryCount={props.totalCount ?? displayPoints.length}
+                    localStrings={localStrings}
+                    c={1}/>
         <CardContainer>
             {paginatedPoints.map((point, index) =>
                 <point.CardComponent key={point.uuid} handlePoiClick={handlePoiClick} userPosition={userPosition} selected={index === 0}/>)}
@@ -62,7 +69,8 @@ const PointBar = (props: PointBarProps) => {
                     entriesPerPage={props.entriesPerPage ?? entriesPerPage}
                     setEntriesPerPage={props.setEntriesPerPage ?? setEntriesPerPage}
                     entryCount={props.totalCount ?? displayPoints.length}
-                    localStrings={localStrings}/>
+                    localStrings={localStrings}
+                    c={2}/>
     </>;
 };