feat: update for selected pin interaction change

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

@@ -4,7 +4,7 @@ import { describe, expect, it } from 'vitest'
 
 import { render } from '../test/utils'
 import { EMPTY_LIST, type IProps } from './CardList'
-import { Default, WhenFiltedDisplayIsZero } from './CardList.stories'
+import { Default, WhenDisplayIsZero } from './CardList.stories'
 
 describe('CardList', () => {
   it('Shows all items when no filtering is done', () => {
@@ -15,7 +15,7 @@ describe('CardList', () => {
 
   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

@@ -16,7 +16,6 @@ export interface IProps {
   onPinClick: (arg: IMapPin) => void
   selectedPin: IMapPin | undefined
   viewport: string
-
 }
 
 const DEFAULT_BREAKPOINTS = { 600: 1, 1100: 2, 1600: 3 }
@@ -26,14 +25,8 @@ 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 {
-    list,
-    onBlur,
-    onPinClick,
-    selectedPin,
-    viewport,
-  } = props
-
+  const { list, onBlur, onPinClick, selectedPin, viewport } = props
+
   useEffect(() => {
     setRenderCount(ITEMS_PER_RENDER)
   }, [list])
@@ -45,18 +38,20 @@ export const CardList = (props: IProps) => {
         (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}
-        />
       )
-    })
+      .map((item) => {
+        const isSelectedPin = item._id === selectedPin?._id
+
+        return (
+          <CardListItem
+            item={item}
+            key={item._id}
+            isSelectedPin={isSelectedPin}
+            onPinClick={isSelectedPin ? onBlur : onPinClick}
+            viewport={viewport}
+          />
+        )
+      })
 
     setDisplayItems(toRender)
   }, [renderCount, list])

packages/components/src/PinProfile/PinProfile.tsx

@@ -39,6 +39,7 @@ export const PinProfile = (props: IProps) => {
             <InternalLink
               to={`/u/${creator?._id}`}
               data-cy="PinProfileMessageLink"
+              target="_blank"
             >
               <Button icon="contact" sx={{ margin: 1 }} small>
                 Send Message

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

@@ -48,19 +48,18 @@ describe('[Map]', () => {
     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++) {
+    for (let i = 0; i < 7; 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(() => {
+      cy.get('[data-cy=CardListItem-selected]').within(() => {
         cy.contains(userId)
         cy.get('[data-cy="MemberBadge-member"]')
       })
     })
-    cy.get('[data-cy=CardListItem]').contains(userId).click()
     cy.get('[data-cy="PinProfile"]')
       .get('[data-cy="Username"]')
       .contains(userId)

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

@@ -20,14 +20,15 @@ const INITIAL_ZOOM = 3
 
 export const MapContainer = (props: IProps) => {
   const { allPins, allToggleFilters } = props
-  const [center, setCenter] = useState<ILatLng>(INITIAL_CENTER)
-  const [boundaries, setBoundaries] = useState(null)
-  const [activePin, setActivePin] = useState<IMapPin | null>(null)
-  const [zoom, setZoom] = useState<number>(INITIAL_ZOOM)
-  const [showMobileList, setShowMobileList] = useState<boolean>(false)
+
+  const [selectedPin, setSelectedPin] = useState<IMapPin | undefined>()
   const [activePinFilters, setActivePinFilters] =
     useState<MapFilterOptionsList>([])
+  const [boundaries, setBoundaries] = useState(null)
+  const [center, setCenter] = useState<ILatLng>(INITIAL_CENTER)
   const [filteredPins, setFilteredPins] = useState<IMapPin[]>(allPins)
+  const [showMobileList, setShowMobileList] = useState<boolean>(false)
+  const [zoom, setZoom] = useState<number>(INITIAL_ZOOM)
 
   const navigate = useNavigate()
   const location = useLocation()
@@ -43,39 +44,26 @@ export const MapContainer = (props: IProps) => {
 
   useEffect(() => {
     const pinId = location.hash.slice(1)
-    if (pinId.length > 0) {
-      if (activePin) {
-        setActivePin(null)
-      } else {
-        selectPinByUserId(pinId)
-      }
-    } else {
-      setActivePin(null)
-    }
+    selectPinByUserId(pinId.length > 0 ? pinId : undefined)
   }, [location.hash])
 
-  const selectPinByUserId = async (userId: string) => {
-    // First check the mapPins to see if the pin is already
-    // partially loaded
+  const selectPinByUserId = async (userId: string | undefined) => {
     const preLoadedPin = allPins.find((pin) => pin._id === userId)
-    if (preLoadedPin) {
-      setCenter(preLoadedPin.location)
-      setActivePin(preLoadedPin)
-    }
+    preLoadedPin && setCenter(preLoadedPin.location)
+    setSelectedPin(preLoadedPin)
   }
 
   const onBlur = () => {
-    setActivePin(null)
-    navigate('/map')
+    navigate(`/map`, { replace: true })
   }
 
-  const onLocationChange = (latlng) => setCenter(latlng)
-  const mapZoom = center ? zoom : 2
   const onPinClick = (pin) => {
-    selectPinByUserId(pin._id)
-    navigate(`/map#${pin._id}`)
+    navigate(`/map#${pin._id}`, { replace: true })
   }
 
+  const onLocationChange = (latlng) => setCenter(latlng)
+  const mapZoom = center ? zoom : 2
+
   return (
     <Flex
       sx={{
@@ -84,27 +72,30 @@ export const MapContainer = (props: IProps) => {
       }}
     >
       <MapList
-        pins={filteredPins}
         allToggleFilters={allToggleFilters}
         activePinFilters={activePinFilters}
+        onBlur={onBlur}
+        onLocationChange={onLocationChange}
+        onPinClick={onPinClick}
+        pins={filteredPins}
+        selectedPin={selectedPin}
         setActivePinFilters={setActivePinFilters}
         setShowMobileList={setShowMobileList}
         showMobileList={showMobileList}
-        onBlur={onBlur}
-        onLocationChange={onLocationChange}
       />
 
       <MapView
         allPins={filteredPins}
         center={center}
-        setCenter={setCenter}
         mapRef={mapRef}
-        zoom={mapZoom}
         setBoundaries={setBoundaries}
         setZoom={setZoom}
-        onPinClick={onPinClick}
         onBlur={onBlur}
+        onPinClick={onPinClick}
+        setCenter={setCenter}
+        selectedPin={selectedPin}
         setShowMobileList={setShowMobileList}
+        zoom={mapZoom}
       />
     </Flex>
   )

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

@@ -6,27 +6,30 @@ import { MapWithListHeader } from './MapWithListHeader'
 import type { IMapPin, MapFilterOption, MapFilterOptionsList } from 'oa-shared'
 
 interface IProps {
-  pins: IMapPin[]
-  allToggleFilters: MapFilterOptionsList
-
   activePinFilters: MapFilterOptionsList
+  allToggleFilters: MapFilterOptionsList
+  onBlur: () => void
+  onLocationChange: (ILatLng) => void
+  onPinClick: (pin: IMapPin) => void
+  pins: IMapPin[]
+  selectedPin: IMapPin | undefined
   setActivePinFilters: (MapFilterOption) => void
   setShowMobileList: (boolean) => void
   showMobileList: boolean
-  onBlur: () => void
-  onLocationChange: (ILatLng) => void
 }
 
 export const MapList = (props: IProps) => {
   const {
-    pins,
-    allToggleFilters,
     activePinFilters,
+    allToggleFilters,
+    onBlur,
+    onLocationChange,
+    onPinClick,
+    pins,
+    selectedPin,
     setActivePinFilters,
     setShowMobileList,
     showMobileList,
-    onBlur,
-    onLocationChange,
   } = props
 
   const onFilterChange = (changedOption: MapFilterOption) => {
@@ -50,6 +53,18 @@ export const MapList = (props: IProps) => {
 
   const mobileListDisplay = showMobileList ? 'block' : 'none'
 
+  const headerProps = {
+    activePinFilters,
+    availableFilters: allToggleFilters,
+    onBlur,
+    onFilterChange,
+    onLocationChange,
+    onPinClick,
+    pins,
+    selectedPin,
+    setShowMobileList,
+  }
+
   return (
     <>
       {/* Desktop list view */}
@@ -61,15 +76,7 @@ export const MapList = (props: IProps) => {
           overflow: 'scroll',
         }}
       >
-        <MapWithListHeader
-          pins={pins}
-          activePinFilters={activePinFilters}
-          availableFilters={allToggleFilters}
-          onBlur={onBlur}
-          onFilterChange={onFilterChange}
-          onLocationChange={onLocationChange}
-          viewport="desktop"
-        />
+        <MapWithListHeader {...headerProps} viewport="desktop" />
       </Box>
 
       {/* Mobile/tablet list view */}
@@ -100,16 +107,7 @@ export const MapList = (props: IProps) => {
             Show map view
           </Button>
         </Flex>
-        <MapWithListHeader
-          pins={pins}
-          activePinFilters={activePinFilters}
-          availableFilters={allToggleFilters}
-          onBlur={onBlur}
-          onFilterChange={onFilterChange}
-          onLocationChange={onLocationChange}
-          setShowMobileList={setShowMobileList}
-          viewport="mobile"
-        />
+        <MapWithListHeader {...headerProps} viewport="mobile" />
       </Box>
     </>
   )