feat: add infinite scroll to card list for map

packages/components/package.json

@@ -35,6 +35,7 @@
     "react-country-flag": "^3.1.0",
     "react-icons": "^5.3.0",
     "react-image-crop": "^11.0.5",
+    "react-infinite-scroll-component": "^6.1.0",
     "react-player": "^2.16.0",
     "react-portal": "^4.2.2",
     "react-responsive-masonry": "2.1.7",

packages/components/src/CardList/CardList.tsx

@@ -1,8 +1,11 @@
+import { useEffect, useState } from 'react'
+import InfiniteScroll from 'react-infinite-scroll-component'
 import Masonry, { ResponsiveMasonry } from 'react-responsive-masonry'
 import { Flex, Text } from 'theme-ui'
 
 import { CardListItem } from '../CardListItem/CardListItem'
 import { Icon } from '../Icon/Icon'
+import { Loader } from '../Loader/Loader'
 
 import type { IMapPin } from 'oa-shared'
 
@@ -12,20 +15,35 @@ export interface IProps {
   list: IMapPin[]
 }
 
-export const EMPTY_LIST = 'Oh nos! Nothing to show!'
 const DEFAULT_BREAKPOINTS = { 600: 1, 1100: 2, 1600: 3 }
+export const EMPTY_LIST = 'Oh nos! Nothing to show!'
+const ITEMS_PER_RENDER = 30
 
 export const CardList = (props: IProps) => {
+  const [renderCount, setRenderCount] = useState<number>(ITEMS_PER_RENDER)
+  const [displayItems, setDisplayItems] = useState<JSX.Element[]>([])
   const { dataCy, list } = props
 
-  const displayItems = list
-    .splice(0, 30)
-    .sort(
-      (a, b) =>
-        Date.parse(b.creator?._lastActive || '0') -
-        Date.parse(a.creator?._lastActive || '0'),
-    )
-    .map((item) => <CardListItem item={item} key={item._id} />)
+  useEffect(() => {
+    setRenderCount(ITEMS_PER_RENDER)
+  }, [list])
+
+  useEffect(() => {
+    const toRender = list
+      .slice(0, renderCount)
+      .sort(
+        (a, b) =>
+          Date.parse(b.creator?._lastActive || '0') -
+          Date.parse(a.creator?._lastActive || '0'),
+      )
+      .map((item) => <CardListItem item={item} key={item._id} />)
+
+    setDisplayItems(toRender)
+  }, [renderCount, list])
+
+  const addRenderItems = () =>
+    setRenderCount((count) => count + ITEMS_PER_RENDER)
+  const hasMore = !(displayItems.length === list.length)
 
   const isListEmpty = list.length === 0
   const results = `${list.length} result${list.length == 1 ? '' : 's'} in view`
@@ -57,9 +75,18 @@ export const CardList = (props: IProps) => {
       </Flex>
       {isListEmpty && EMPTY_LIST}
       {!isListEmpty && (
-        <ResponsiveMasonry columnsCountBreakPoints={columnsCountBreakPoints}>
-          <Masonry>{displayItems}</Masonry>
-        </ResponsiveMasonry>
+        <InfiniteScroll
+          dataLength={displayItems.length}
+          next={addRenderItems}
+          hasMore={hasMore}
+          loader={<Loader />}
+          endMessage={<></>}
+          style={{ display: 'flex', flexDirection: 'column', width: '100%' }}
+        >
+          <ResponsiveMasonry columnsCountBreakPoints={columnsCountBreakPoints}>
+            <Masonry>{displayItems}</Masonry>
+          </ResponsiveMasonry>{' '}
+        </InfiniteScroll>
       )}
     </Flex>
   )

src/pages/Maps/Content/MapView/MapContainer.tsx

@@ -95,7 +95,7 @@ export const MapContainer = (props: IProps) => {
       />
 
       <MapView
-        allPins={allPins}
+        allPins={filteredPins}
         center={center}
         setCenter={setCenter}
         mapRef={mapRef}

src/pages/Maps/Content/MapView/MapList.tsx

@@ -20,7 +20,6 @@ interface IProps {
 export const MapList = (props: IProps) => {
   const {
     pins,
-
     allToggleFilters,
     activePinFilters,
     setActivePinFilters,

src/pages/Maps/Content/MapView/MapWithListHeader.tsx

@@ -69,7 +69,7 @@ export const MapWithListHeader = (props: IProps) => {
           backgroundColor: 'background',
           gap: 2,
           paddingY: 2,
-          paddingTop: isMobile ? '50px' : 2,
+          paddingTop: isMobile ? '50px' : 6,
         }}
       >
         <Flex sx={{ paddingX: 4, gap: 2, flexDirection: 'row' }}>

src/pages/Maps/utils/filterPins.ts

@@ -35,5 +35,5 @@ export const filterPins = (
     return tagFilteredList
   }
 
-  return filteredPins.length === 0 ? pins : filteredPins
+  return filteredPins
 }

yarn.lock

@@ -25379,6 +25379,7 @@ __metadata:
     react-dom: ^18.3.1
     react-icons: ^5.3.0
     react-image-crop: ^11.0.5
+    react-infinite-scroll-component: ^6.1.0
     react-player: ^2.16.0
     react-portal: ^4.2.2
     react-responsive-masonry: 2.1.7
@@ -27986,6 +27987,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-infinite-scroll-component@npm:^6.1.0":
+  version: 6.1.0
+  resolution: "react-infinite-scroll-component@npm:6.1.0"
+  dependencies:
+    throttle-debounce: ^2.1.0
+  peerDependencies:
+    react: ">=16.0.0"
+  checksum: 3708398934366df907dbad215247ebc1033221957ce7e32289ea31750cce70aa16513e2d03743e06c8b868ac7c542d12d5dbb6c830fd408433a4762f3cb5ecfb
+  languageName: node
+  linkType: hard
+
 "react-is@npm:18.1.0":
   version: 18.1.0
   resolution: "react-is@npm:18.1.0"
@@ -30990,6 +31002,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"throttle-debounce@npm:^2.1.0":
+  version: 2.3.0
+  resolution: "throttle-debounce@npm:2.3.0"
+  checksum: 6d90aa2ddb294f8dad13d854a1cfcd88fdb757469669a096a7da10f515ee466857ac1e750649cb9da931165c6f36feb448318e7cb92570f0a3679d20e860a925
+  languageName: node
+  linkType: hard
+
 "throttleit@npm:^1.0.0":
   version: 1.0.1
   resolution: "throttleit@npm:1.0.1"