diff --git a/src/js/components/ButterflyMap.tsx b/src/js/components/ButterflyMap.tsx index 732d01d..43d7f05 100644 --- 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(() => { @@ -170,10 +170,12 @@ const ButterflyMap = (props: ButterflyMapProps) => { {sortedPointsOfInterest.length > 0 && } ; }; @@ -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 index e70d9bb..42138aa 100644 --- 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>, + setPage: React.Dispatch> | (() => void), entriesPerPage: number, setEntriesPerPage: (page: number) => void, entryCount: number, diff --git a/src/js/components/PointBar.tsx b/src/js/components/PointBar.tsx index 60f2e93..fa0b894 100644 --- 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(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) => {