feat: drop old map

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

@@ -44,17 +44,9 @@ const allItems = [
 ]
 
 export const Default: StoryFn<typeof CardList> = () => {
-  return <CardList dataCy="stories" list={allItems} filteredList={null} />
-}
-
-export const FiltedDisplay: StoryFn<typeof CardList> = () => {
-  const filteredList = [allItems[0], allItems[2]]
-
-  return (
-    <CardList dataCy="stories" list={allItems} filteredList={filteredList} />
-  )
+  return <CardList dataCy="stories" list={allItems} />
 }
 
 export const WhenFiltedDisplayIsZero: StoryFn<typeof CardList> = () => {
-  return <CardList dataCy="stories" list={allItems} filteredList={[]} />
+  return <CardList dataCy="stories" list={[]} />
 }

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, WhenFiltedDisplayIsZero } from './CardList.stories'
 
 describe('CardList', () => {
   it('Shows all items when no filtering is done', () => {
@@ -17,15 +13,7 @@ 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)} />,
     )

packages/components/src/CardList/CardList.tsx

@@ -3,36 +3,34 @@ 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'
 
 export interface IProps {
   columnsCountBreakPoints?: { [key: number]: number }
   dataCy: string
-  filteredList: IMapPin[] | null
   list: IMapPin[]
 }
 
 export const EMPTY_LIST = 'Oh nos! Nothing to show!'
+const DEFAULT_BREAKPOINTS = { 600: 1, 1100: 2, 1600: 3 }
 
 export const CardList = (props: IProps) => {
-  const { columnsCountBreakPoints, dataCy, filteredList, list } = props
+  const { dataCy, list } = props
 
-  const listToShow = filteredList === null ? list : filteredList
-  const displayItems = listToShow
+  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} />)
 
-  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
@@ -43,36 +41,25 @@ 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 && (
-            <ResponsiveMasonry
-              columnsCountBreakPoints={
-                columnsCountBreakPoints
-                  ? columnsCountBreakPoints
-                  : { 600: 1, 1100: 2, 1600: 3 }
-              }
-            >
-              <Masonry>{displayItems}</Masonry>
-            </ResponsiveMasonry>
-          )}
-        </>
+      <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 && (
+        <ResponsiveMasonry columnsCountBreakPoints={columnsCountBreakPoints}>
+          <Masonry>{displayItems}</Masonry>
+        </ResponsiveMasonry>
       )}
     </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/cypress/src/integration/map.spec.ts

@@ -14,24 +14,7 @@ describe('[Map]', () => {
     cy.step('Shows all pins onload')
     cy.visit('/map')
 
-    cy.step('Old map pins can be clicked on')
-    cy.get(`[data-cy=pin-${userId}]`).click()
-    cy.get('[data-cy=MapMemberCard]').within(() => {
-      cy.get('[data-cy=Username]').contains(userId)
-    })
-    cy.url().should('include', `#${userId}`)
-
-    cy.step('Old map pins can be hidden')
-    cy.get('.markercluster-map').click(0, 0)
-    cy.get('[data-cy=MapMemberCard]').should('not.exist')
-    cy.url().should('not.include', `#${userId}`)
-
-    cy.step('Link to new map visible and clickable')
-    cy.get('[data-cy=Banner]').contains('Test it out!').click()
-    cy.get('[data-cy=Banner]').contains('go back to the old one!')
-
-    cy.step('New map shows the cards')
-    cy.get('[data-cy="welome-header"]').should('be.visible')
+    cy.step('Shows the cards')
     cy.get('[data-cy="CardList-desktop"]').should('be.visible')
     cy.get('[data-cy="list-results"]').contains(/\d+ results in view/)
 
@@ -63,10 +46,14 @@ describe('[Map]', () => {
     cy.get('[data-cy=MapFilterList-ShowResultsButton]').first().click()
 
     cy.step('As the user moves in the list updates')
+    cy.visit(`/map#${userId}`)
+    cy.wait(500) // Wait for animation to complete
     for (let i = 0; i < 6; i++) {
       cy.get('.leaflet-control-zoom-in').click()
     }
+
     cy.get('[data-cy="list-results"]').contains('1 result')
+    cy.wait(500) // Wait for animation to complete
     cy.get('[data-cy="CardList-desktop"]').within(() => {
       cy.get('[data-cy=CardListItem]')
         .within(() => {
@@ -77,15 +64,15 @@ describe('[Map]', () => {
         .and('include', `/u/${userId}`)
     })
 
-    cy.step('New map pins can be clicked on')
+    cy.step('Map pins can be clicked on')
     cy.get(`[data-cy=pin-${userId}]`).click()
     cy.get('[data-cy=PinProfile]').within(() => {
       cy.get('[data-cy=Username]').contains(userId)
       cy.get('[data-cy=ProfileTagsList]').contains('Organise Meetups')
     })
     cy.url().should('include', `#${userId}`)
 
-    cy.step('New map pins can be hidden with the cross button')
+    cy.step('Map pins can be hidden with the cross button')
     cy.get('[data-cy=PinProfile]').should('be.visible')
     cy.get('[data-cy=PinProfileCloseButton]').click()
     cy.url().should('not.include', `#${userId}`)
@@ -139,8 +126,6 @@ describe('[Map]', () => {
   it('Test zoom out/ globe button + zoom in to users location button', () => {
     cy.viewport('macbook-16')
     cy.visit('/map')
-    cy.get('[data-cy=Banner]').contains('Test it out!').click()
-    cy.wait(500)
 
     cy.get('[data-cy="WorldViewButton"]', { timeout: 10000 })
       .should('exist')

packages/cypress/src/integration/settings.spec.ts

@@ -159,7 +159,6 @@ describe('[Settings]', () => {
       cy.step('Can view pin on new map')
       cy.visit(`/map#${user.username}`)
       cy.wait(2000)
-      cy.get('[data-cy=Banner]').contains('Test it out!').click()
       cy.get('[data-cy=CardListItem]').contains(user.username)
 
       cy.step('Can delete map pin')

src/config/config.ts

@@ -92,12 +92,19 @@ export const isProductionEnvironment = (): boolean => {
 const firebaseConfigs: { [variant in siteVariants]: IFirebaseConfig } = {
   /** Sandboxed dev site, all features available for interaction */
   dev_site: {
-    apiKey: 'AIzaSyChVNSMiYxCkbGd9C95aChr9GxRJtW6NRA',
-    authDomain: 'precious-plastics-v4-dev.firebaseapp.com',
-    databaseURL: 'https://precious-plastics-v4-dev.firebaseio.com',
-    messagingSenderId: '174193431763',
-    projectId: 'precious-plastics-v4-dev',
-    storageBucket: 'precious-plastics-v4-dev.appspot.com',
+    apiKey: 'AIzaSyCjc22Q5wl6MEnel4qrSDQNjO5xczspVbk',
+
+    authDomain: 'onearmyworld.firebaseapp.com',
+
+    databaseURL: 'https://onearmyworld.firebaseio.com',
+
+    projectId: 'onearmyworld',
+
+    storageBucket: 'onearmyworld.appspot.com',
+
+    messagingSenderId: '95034788341',
+
+    appId: '1:95034788341:web:c9c75aa61378d740d478bc',
   },
   /** Sandboxed dev site, populated with copy of live site data (reset weekly) */
   preview: {