From 6748d5ff7e3c206767dfa7571531d2758cbaea2c Mon Sep 17 00:00:00 2001
From: Jennifer Kirsch <jennifer.kirsch@binary-butterfly.de>
Date: Wed, 4 Dec 2024 15:22:15 +0100
Subject: [PATCH] Add second pagination

---
 src/js/components/Pagination.tsx |  5 +++--
 src/js/components/PointBar.tsx   | 10 +++++++++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/js/components/Pagination.tsx b/src/js/components/Pagination.tsx
index cb1f87b..a2834fa 100644
--- 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
index 5286e3c..d9c96f9 100644
--- 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}/>
     </>;
 };