Allow passing in pagination props into the Pagination component

binary-butterfly · Dec 3, 2024 · e22acd2 · e22acd2
1 parent a958cfd
commit e22acd2
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 8 deletions.
diff --git a/src/js/components/ButterflyMap.tsx b/src/js/components/ButterflyMap.tsx
@@ -15,7 +15,7 @@ import {completeTheme} from '../Helpers/themeHelpers';
 import {completeLocalStrings} from '../Helpers/localisationHelpers';
 import Markers from './Markers';
 
-const ButterflyMap = (props: ButterflyMapProps) => {
+const ButterflyMap = (props: ButterflyMapProps | ButterflyMapPropsWithPagination) => {
     const localStrings = completeLocalStrings(props.localStrings);
     const [position, setPosition] = React.useState(props.center);
     const [reduceMotion, setReduceMotion] = React.useState<boolean>(() => {
@@ -170,10 +170,12 @@ const ButterflyMap = (props: ButterflyMapProps) => {
         {sortedPointsOfInterest.length > 0 &&
             <PointBar userPosition={userPosition}
                       localStrings={localStrings}
-                      page={paginationPage}
-                      setPage={setPaginationPage}
+                      page={props.paginationPage ?? paginationPage}
+                      setPage={props.setPaginationPage ?? setPaginationPage}
                       displayPoints={sortedPointsOfInterest}
                       handlePoiClick={handlePoiClick}
+                      entriesPerPage={entriesPerPage}
+                      setEntriesPerPage={setEntriesPerPage}
             />}
     </ThemeProvider>;
 };
@@ -189,4 +191,11 @@ type ButterflyMapProps = {
     customFilters?: CustomFilter[],
 }
 
+type ButterflyMapPropsWithPagination = ButterflyMapProps & {
+    entriesPerPage: number,
+    setEntriesPerPage: () => void,
+    paginationPage: number,
+    setPaginationPage: () => void,
+}
+
 export default ButterflyMap;
diff --git a/src/js/components/Pagination.tsx b/src/js/components/Pagination.tsx
@@ -6,7 +6,7 @@ import PaginationButtons from './Styled/Pagination/PaginationButtons';
 
 type PaginationProps = {
     page: number,
-    setPage: React.Dispatch<React.SetStateAction<number>>,
+    setPage: React.Dispatch<React.SetStateAction<number>> | (() => void),
     entriesPerPage: number,
     setEntriesPerPage: (page: number) => void,
     entryCount: number,

diff --git a/src/js/components/PointBar.tsx b/src/js/components/PointBar.tsx
@@ -22,15 +22,23 @@ type PointBarProps = {
     localStrings: LocalStrings,
 }
 
-const PointBar = (props: PointBarProps) => {
+type PointBarPropsWithPage = PointBarProps & {
+    entriesPerPage: number,
+    setEntriesPerPage: () => void,
+}
+
+const PointBar = (props: PointBarProps | PointBarPropsWithPage) => {
     const [entriesPerPage, _setEntriesPerPage] = React.useState<number>(window.innerWidth < 1000 ? 4 : 8);
-    const {page, setPage, displayPoints, localStrings, handlePoiClick, userPosition} = props;
 
     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];
@@ -47,8 +55,8 @@ const PointBar = (props: PointBarProps) => {
         </CardContainer>
         <Pagination page={page}
                     setPage={setPage}
-                    entriesPerPage={entriesPerPage}
-                    setEntriesPerPage={setEntriesPerPage}
+                    entriesPerPage={props.entriesPerPage ?? entriesPerPage}
+                    setEntriesPerPage={props.setEntriesPerPage ?? setEntriesPerPage}
                     entryCount={displayPoints.length}
                     localStrings={localStrings}
         />