Merge pull request #44 from binary-butterfly/pagination-props

Pagination props
binary-butterfly · Dec 4, 2024 · 800c40a · 800c40a
2 parents 9185426 + a4529b4
commit 800c40a
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 9 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-butterfly-map",
-  "version": "1.0.0-rc3",
+  "version": "1.0.0-rc4",
   "license": "MIT",
   "private": false,
   "main": "dist/reactButterflyMap.umd.cjs",

diff --git a/src/js/components/ButterflyMap.tsx b/src/js/components/ButterflyMap.tsx
@@ -42,7 +42,7 @@ const ButterflyMap = (props: ButterflyMapProps) => {
 
     React.useEffect(() => {
         let found = props.paginationPage === undefined;
-        for (const serverSideField of [props.setPaginationPage, props.entriesPerPage, props.setEntriesPerPage]) {
+        for (const serverSideField of [props.setPaginationPage, props.entriesPerPage, props.setEntriesPerPage, props.totalCount]) {
             if ((serverSideField === undefined) !== found) {
                 throw new Error('react butterfly map error: When one of the server side pagination props is set, all of them have to be.');
             }
@@ -185,7 +185,7 @@ const ButterflyMap = (props: ButterflyMapProps) => {
                       handlePoiClick={handlePoiClick}
                       entriesPerPage={props.entriesPerPage}
                       setEntriesPerPage={props.setEntriesPerPage}
-            />}
+                      totalCount={props.totalCount}/>}
     </ThemeProvider>;
 };
 
@@ -202,6 +202,7 @@ type ButterflyMapProps = {
     setEntriesPerPage?: React.Dispatch<React.SetStateAction<number>>,
     paginationPage?: number,
     setPaginationPage?: React.Dispatch<React.SetStateAction<number>>,
+    totalCount?: number,
 }
 
 export default ButterflyMap;
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
@@ -22,6 +22,7 @@ type PointBarProps = {
     localStrings: LocalStrings,
     entriesPerPage?: number,
     setEntriesPerPage?: React.Dispatch<React.SetStateAction<number>>,
+    totalCount?: number,
 }
 
 const PointBar = (props: PointBarProps) => {
@@ -52,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}/>)}
@@ -60,8 +68,9 @@ const PointBar = (props: PointBarProps) => {
                     setPage={setPage}
                     entriesPerPage={props.entriesPerPage ?? entriesPerPage}
                     setEntriesPerPage={props.setEntriesPerPage ?? setEntriesPerPage}
-                    entryCount={displayPoints.length}
-                    localStrings={localStrings}/>
+                    entryCount={props.totalCount ?? displayPoints.length}
+                    localStrings={localStrings}
+                    c={2}/>
     </>;
 };