feat: drop old map

.env

@@ -20,6 +20,9 @@ VITE_COMMUNITY_PROGRAM_URL=https://community.preciousplastic.com/academy/guides/
 VITE_PROFILE_GUIDELINES_URL=https://community.preciousplastic.com/academy/guides/platform
 VITE_QUESTIONS_GUIDELINES_URL=https://community.preciousplastic.com/academy/guides/guidelines-questions
 
+# Optional variable for limiting the display of member map pins by default on load
+VITE_HIDE_MEMBER_PINS_BY_DEFAULT=false
+
 # For testing, VITE_PLATFORM_PROFILES in localStorage is prioritised over this value
 # All valid options for VITE_PLATFORM_PROFILES: "member,workspace,community-builder,space,collection-point,machine-builder"
 VITE_PLATFORM_PROFILES="member,workspace,community-builder,collection-point,machine-builder"

packages/components/src/CardList/CardList.stories.tsx

@@ -8,7 +8,7 @@ export default {
   component: CardList,
 } as Meta<typeof CardList>
 
-const allItems = [
+const list = [
   {
     _deleted: false,
     _id: 'first-one',
@@ -43,44 +43,24 @@ const allItems = [
   },
 ]
 
-const onBlur = () => undefined
 const onPinClick = () => undefined
 
 export const Default: StoryFn<typeof CardList> = () => {
   return (
     <CardList
-      list={allItems}
-      onBlur={onBlur}
+      list={list}
       onPinClick={onPinClick}
-      filteredList={null}
       selectedPin={undefined}
       viewport="stories"
     />
   )
 }
 
-export const FiltedDisplay: StoryFn<typeof CardList> = () => {
-  const filteredList = [allItems[0], allItems[2]]
-
-  return (
-    <CardList
-      list={allItems}
-      onBlur={onBlur}
-      onPinClick={onPinClick}
-      filteredList={filteredList}
-      selectedPin={undefined}
-      viewport="stories"
-    />
-  )
-}
-
-export const WhenFiltedDisplayIsZero: StoryFn<typeof CardList> = () => {
+export const WhenDisplayIsZero: StoryFn<typeof CardList> = () => {
   return (
     <CardList
-      list={allItems}
-      onBlur={onBlur}
+      list={[]}
       onPinClick={onPinClick}
-      filteredList={[]}
       selectedPin={undefined}
       viewport="stories"
     />

packages/components/src/CardList/CardList.test.tsx

@@ -4,11 +4,7 @@ import { describe, expect, it } from 'vitest'
 
 import { render } from '../test/utils'
 import { EMPTY_LIST, type IProps } from './CardList'
-import {
-  Default,
-  FiltedDisplay,
-  WhenFiltedDisplayIsZero,
-} from './CardList.stories'
+import { Default, WhenDisplayIsZero } from './CardList.stories'
 
 describe('CardList', () => {
   it('Shows all items when no filtering is done', () => {
@@ -17,17 +13,9 @@ describe('CardList', () => {
     expect(getAllByTestId('CardListItem').length).toBe(4)
   })
 
-  it('Shows only filted items when provided', () => {
-    const { getAllByTestId } = render(
-      <FiltedDisplay {...(FiltedDisplay.args as IProps)} />,
-    )
-
-    expect(getAllByTestId('CardListItem').length).toBe(2)
-  })
-
-  it('Shows the no items label when filted items is empty', () => {
+  it('Shows the no item label when filted items is empty', () => {
     const { getByText } = render(
-      <WhenFiltedDisplayIsZero {...(WhenFiltedDisplayIsZero.args as IProps)} />,
+      <WhenDisplayIsZero {...(WhenDisplayIsZero.args as IProps)} />,
     )
 
     expect(getByText(EMPTY_LIST)).toBeInTheDocument()

packages/components/src/CardList/CardList.tsx

@@ -1,60 +1,68 @@
+import { useEffect, useState } from 'react'
 import Masonry, { ResponsiveMasonry } from 'react-responsive-masonry'
 import { Flex, Text } from 'theme-ui'
 
+import { Button } from '../Button/Button'
 import { CardListItem } from '../CardListItem/CardListItem'
 import { Icon } from '../Icon/Icon'
-import { Loader } from '../Loader/Loader'
 
 import type { IMapPin } from 'oa-shared'
 
 export interface IProps {
   columnsCountBreakPoints?: { [key: number]: number }
-  filteredList: IMapPin[] | null
   list: IMapPin[]
-  onBlur: () => void
   onPinClick: (arg: IMapPin) => void
   selectedPin: IMapPin | undefined
   viewport: string
 }
 
+const DEFAULT_BREAKPOINTS = { 600: 1, 1100: 2, 1600: 3 }
 export const EMPTY_LIST = 'Oh nos! Nothing to show!'
+const ITEMS_PER_RENDER = 20
 
 export const CardList = (props: IProps) => {
-  const {
-    columnsCountBreakPoints,
-    filteredList,
-    list,
-    onBlur,
-    onPinClick,
-    selectedPin,
-    viewport,
-  } = props
+  const [renderCount, setRenderCount] = useState<number>(ITEMS_PER_RENDER)
+  const [displayItems, setDisplayItems] = useState<JSX.Element[]>([])
+  const { list, onPinClick, selectedPin, viewport } = props
 
-  const listToShow = filteredList === null ? list : filteredList
-  const displayItems = listToShow
-    .sort(
-      (a, b) =>
-        Date.parse(b.creator?._lastActive || '0') -
-        Date.parse(a.creator?._lastActive || '0'),
-    )
-    .map((item) => {
-      const isSelectedPin = item._id === selectedPin?._id
-      return (
-        <CardListItem
-          item={item}
-          key={item._id}
-          isSelectedPin={isSelectedPin}
-          onPinClick={isSelectedPin ? onBlur : onPinClick}
-          viewport={viewport}
-        />
+  useEffect(() => {
+    setRenderCount(ITEMS_PER_RENDER)
+  }, [list])
+
+  useEffect(() => {
+    const toRender = list
+      .sort(
+        (a, b) =>
+          Date.parse(b.creator?._lastActive || '0') -
+          Date.parse(a.creator?._lastActive || '0'),
       )
-    })
+      .slice(0, renderCount)
+      .map((item) => {
+        const isSelectedPin = item._id === selectedPin?._id
+
+        return (
+          <CardListItem
+            item={item}
+            key={item._id}
+            isSelectedPin={isSelectedPin}
+            onPinClick={onPinClick}
+            viewport={viewport}
+          />
+        )
+      })
+
+    setDisplayItems(toRender)
+  }, [renderCount, list])
+
+  const addRenderItems = () =>
+    setRenderCount((count) => count + ITEMS_PER_RENDER)
+
+  const hasMore = !(displayItems.length === list.length)
 
-  const isListEmpty = displayItems.length === 0
-  const hasListLoaded = list
-  const results = `${displayItems.length} result${
-    displayItems.length == 1 ? '' : 's'
-  } in view`
+  const isListEmpty = list.length === 0
+  const results = `${list.length} result${list.length == 1 ? '' : 's'} in view`
+  const columnsCountBreakPoints =
+    props.columnsCountBreakPoints || DEFAULT_BREAKPOINTS
 
   return (
     <Flex
@@ -65,34 +73,30 @@ export const CardList = (props: IProps) => {
         padding: 2,
       }}
     >
-      {!hasListLoaded && <Loader />}
-      {hasListLoaded && (
+      <Flex
+        sx={{
+          justifyContent: 'space-between',
+          paddingX: 2,
+          paddingTop: 2,
+          fontSize: 2,
+        }}
+      >
+        <Text data-cy="list-results">{results}</Text>
+        <Flex sx={{ alignItems: 'center', gap: 1 }}>
+          <Text> Most recently active</Text>
+          <Icon glyph="arrow-full-down" />
+        </Flex>
+      </Flex>
+      {isListEmpty && EMPTY_LIST}
+      {!isListEmpty && (
         <>
-          <Flex
-            sx={{
-              justifyContent: 'space-between',
-              paddingX: 2,
-              paddingTop: 2,
-              fontSize: 2,
-            }}
-          >
-            <Text data-cy="list-results">{results}</Text>
-            <Flex sx={{ alignItems: 'center', gap: 1 }}>
-              <Text> Most recently active</Text>
-              <Icon glyph="arrow-full-down" />
+          <ResponsiveMasonry columnsCountBreakPoints={columnsCountBreakPoints}>
+            <Masonry>{displayItems}</Masonry>
+          </ResponsiveMasonry>
+          {hasMore && (
+            <Flex sx={{ justifyContent: 'center' }}>
+              <Button onClick={addRenderItems}>Show more </Button>
             </Flex>
-          </Flex>
-          {isListEmpty && EMPTY_LIST}
-          {!isListEmpty && (
-            <ResponsiveMasonry
-              columnsCountBreakPoints={
-                columnsCountBreakPoints
-                  ? columnsCountBreakPoints
-                  : { 600: 1, 1100: 2, 1600: 3 }
-              }
-            >
-              <Masonry>{displayItems}</Masonry>
-            </ResponsiveMasonry>
           )}
         </>
       )}

packages/components/src/CardProfile/CardDetailsMemberProfile.tsx

@@ -1,5 +1,6 @@
 import { Avatar, Box, Flex } from 'theme-ui'
 
+import defaultProfileImage from '../../assets/images/default_member.svg'
 import { MemberBadge } from '../MemberBadge/MemberBadge'
 import { ProfileTagsList } from '../ProfileTagsList/ProfileTagsList'
 import { Username } from '../Username/Username'
@@ -24,29 +25,26 @@ export const CardDetailsMemberProfile = ({ creator, isLink }: IProps) => {
         alignContent: 'stretch',
       }}
     >
-      {userImage && (
-        <Box sx={{ aspectRatio: 1, width: '60px', height: '60px' }}>
-          <Flex
-            sx={{
-              alignContent: 'flex-start',
-              justifyContent: 'flex-end',
-              flexWrap: 'wrap',
-            }}
-          >
-            <Avatar
-              src={userImage}
-              sx={{ width: '60px', height: '60px', objectFit: 'cover' }}
-              loading="lazy"
-            />
-            <MemberBadge
-              profileType={profileType}
-              size={22}
-              sx={{ transform: 'translateY(-22px)' }}
-            />
-          </Flex>
-        </Box>
-      )}
-      {!userImage && <MemberBadge profileType={profileType} size={50} />}
+      <Box sx={{ aspectRatio: 1, width: '60px', height: '60px' }}>
+        <Flex
+          sx={{
+            alignContent: 'flex-start',
+            justifyContent: 'flex-end',
+            flexWrap: 'wrap',
+          }}
+        >
+          <Avatar
+            src={userImage || defaultProfileImage}
+            sx={{ width: '60px', height: '60px', objectFit: 'cover' }}
+            loading="lazy"
+          />
+          <MemberBadge
+            profileType={profileType}
+            size={22}
+            sx={{ transform: 'translateY(-22px)' }}
+          />
+        </Flex>
+      </Box>
 
       <Flex sx={{ flexDirection: 'column', gap: 1, flex: 1 }}>
         <Username

packages/components/src/CardProfile/CardProfile.tsx

@@ -14,17 +14,20 @@ export interface IProps {
 export const CardProfile = ({ item, isLink = false }: IProps) => {
   const { creator } = item
 
-  const isMember = creator?.profileType === 'member'
+  const isWorkspace = creator?.profileType && creator?.profileType !== 'member'
+  const isMember = !isWorkspace && creator
 
   return (
     <Flex sx={{ alignItems: 'stretch', alignContent: 'stretch' }}>
+      {isWorkspace && (
+        <CardDetailsSpaceProfile creator={creator} isLink={isLink} />
+      )}
       {isMember && (
         <CardDetailsMemberProfile creator={creator} isLink={isLink} />
       )}
-      {!isMember && creator && (
-        <CardDetailsSpaceProfile creator={creator} isLink={isLink} />
+      {!isWorkspace && !isMember && (
+        <CardDetailsFallback item={item} isLink={isLink} />
       )}
-      {!creator && <CardDetailsFallback item={item} isLink={isLink} />}
     </Flex>
   )
 }

packages/components/src/Loader/Loader.tsx

@@ -43,7 +43,7 @@ export const Loader = ({ label, sx }: Props) => {
           />
         )}
         <Text sx={{ width: '100%', textAlign: 'center' }}>
-          {label || 'loading...'}
+          {label || 'Loading...'}
         </Text>
       </Flex>
     </>

packages/components/src/MapFilterList/MapFilterList.tsx

@@ -32,14 +32,15 @@ export const MapFilterList = (props: IProps) => {
     ({ filterType }) => filterType === 'profileType',
   )
 
-  const tagFilters = availableFilters.filter(
-    ({ filterType }) => filterType === 'profileTag',
-  )
+  const tagFilters = availableFilters
+    .slice(0)
+    .filter(({ filterType }) => filterType === 'profileTag')
+    .sort((a, b) => (a.label > b.label ? 1 : 0))
 
   const isActive = (checkingFilter: string) =>
     !!activeFilters.find((filter) => filter.label === checkingFilter)
 
-  const buttonLabel = `Show ${pinCount} result${pinCount === 1 ? '' : 's'}`
+  const buttonLabel = `${pinCount} result${pinCount === 1 ? '' : 's'} in current view`
 
   return (
     <Flex
@@ -60,9 +61,15 @@ export const MapFilterList = (props: IProps) => {
           padding: 2,
         }}
       >
-        <Heading as="h3" variant="small">
-          So what are you looking for?
-        </Heading>
+        <Flex sx={{ flexDirection: 'column' }}>
+          <Heading as="h3" variant="small">
+            Filter what you see
+          </Heading>
+
+          <Text variant="quiet">
+            Zoom out on the map to search the whole world
+          </Text>
+        </Flex>
 
         <ButtonIcon
           data-cy="MapFilterList-CloseButton"
@@ -111,7 +118,7 @@ export const MapFilterList = (props: IProps) => {
 
         {tagFilters.length > 0 && (
           <Flex sx={{ gap: 1, flexDirection: 'column' }}>
-            <Text>Activities</Text>
+            <Text>Spaces activities</Text>
             <MapFilterListWrapper>
               {tagFilters.map((typeFilter, index) => {
                 const onClick = () => onFilterChange(typeFilter)