feat(component): update map settings display

Pin is now like the Map page and, when clicked, displays the popup

fix ONEARMY#3856

packages/components/src/MapWithPin/MapPin.stories.tsx

@@ -12,7 +12,6 @@ export const Default: StoryFn<typeof MapPin> = () => {
   return (
     <MapPin
       position={position}
-      draggable={true}
       ondragend={(lng: number) => {
         position.lng = lng
       }}

packages/components/src/MapWithPin/MapPin.tsx

@@ -4,6 +4,8 @@ import L from 'leaflet'
 
 import customMarkerIcon from '../../assets/icons/map-marker.png'
 
+import type { DivIcon } from 'leaflet'
+
 const customMarker = L.icon({
   iconUrl: customMarkerIcon,
   iconSize: [20, 28],
@@ -15,16 +17,17 @@ export interface IProps {
     lat: number
     lng: number
   }
-  draggable: boolean
   ondragend(lng: number): void
+  markerIcon?: DivIcon
+  onClick?: () => void
 }
 
 export const MapPin = (props: IProps) => {
   const markerRef = React.useRef(null)
 
   return (
     <Marker
-      draggable={props.draggable}
+      draggable
       ondragend={() => {
         const marker: any = markerRef.current
 
@@ -39,7 +42,8 @@ export const MapPin = (props: IProps) => {
       }}
       position={[props.position.lat, props.position.lng]}
       ref={markerRef}
-      icon={customMarker}
+      icon={props.markerIcon || customMarker}
+      onclick={props.onClick}
     />
   )
 }

packages/components/src/MapWithPin/MapWithPin.stories.tsx

@@ -1,6 +1,9 @@
+import React from 'react'
+
 import { MapWithPin } from './MapWithPin'
 
 import type { Meta, StoryFn } from '@storybook/react'
+import type { Map } from 'react-leaflet'
 
 export default {
   title: 'Map/MapWithPin',
@@ -9,10 +12,12 @@ export default {
 
 export const Default: StoryFn<typeof MapWithPin> = () => {
   const position = { lat: 0, lng: 0 }
+  const newMapRef = React.useRef<Map>(null)
+
   return (
     <MapWithPin
+      mapRef={newMapRef}
       position={position}
-      draggable={true}
       updatePosition={(_position: { lat: number; lng: number }) => {
         position.lat = _position.lat
         position.lng = _position.lng

packages/components/src/MapWithPin/MapWithPin.tsx

@@ -7,33 +7,37 @@ import { Map } from '../Map/Map'
 import { OsmGeocoding } from '../OsmGeocoding/OsmGeocoding'
 import { MapPin } from './MapPin'
 
-import type { LeafletMouseEvent } from 'leaflet'
+import type { DivIcon, LeafletMouseEvent } from 'leaflet'
+import type { Map as MapType } from 'react-leaflet'
 import type { Result } from '../OsmGeocoding/types'
 
 import 'leaflet/dist/leaflet.css'
 
 const useUserLocation = 'Use my current location'
 const mapInstructions =
-  "You can click on the map, or drag the marker to adjust it's position."
+  "You can double click on the map to adjust it's position. Click on your pin to see the preview of your card."
 
 export interface Props {
+  mapRef: React.RefObject<MapType>
   position: {
     lat: number
     lng: number
   }
-  draggable: boolean
+  markerIcon?: DivIcon
   updatePosition?: any
   center?: any
   zoom?: number
   hasUserLocation?: boolean
+  onClickMapPin?: () => void
+  popup?: React.ReactNode
 }
 
 export const MapWithPin = (props: Props) => {
   const [zoom, setZoom] = React.useState(props.zoom || 1)
   const [center, setCenter] = React.useState(
     props.center || [props.position.lat, props.position.lng],
   )
-  const { draggable, position } = props
+  const { mapRef, position, markerIcon, onClickMapPin, popup } = props
 
   const hasUserLocation = props.hasUserLocation || false
   const onPositionChanged =
@@ -58,22 +62,20 @@ export const MapWithPin = (props: Props) => {
     )
   }
 
-  const onClick = (evt: LeafletMouseEvent) => {
+  const onDblClick = (evt: LeafletMouseEvent) => {
     onPositionChanged({ ...evt.latlng })
   }
 
   return (
     <Flex sx={{ flexDirection: 'column', gap: 2 }}>
-      {draggable && (
-        <Alert
-          variant="info"
-          sx={{
-            marginTop: 2,
-          }}
-        >
-          <Text sx={{ fontSize: 1 }}>{mapInstructions}</Text>
-        </Alert>
-      )}
+      <Alert
+        variant="info"
+        sx={{
+          marginTop: 2,
+        }}
+      >
+        <Text sx={{ fontSize: 1 }}>{mapInstructions}</Text>
+      </Alert>
       <div
         style={{
           position: 'relative',
@@ -90,52 +92,55 @@ export const MapWithPin = (props: Props) => {
             zIndex: 2,
           }}
         >
-          {draggable && (
-            <Flex style={{ width: '280px' }}>
-              <OsmGeocoding
-                callback={(data: Result) => {
-                  if (data.lat && data.lon) {
-                    onPositionChanged({
-                      lat: data.lat,
-                      lng: data.lon,
-                    })
-                    setCenter([data.lat, data.lon])
-                    setZoom(15)
-                  }
+          <Flex style={{ width: '280px' }}>
+            <OsmGeocoding
+              callback={(data: Result) => {
+                if (data.lat && data.lon) {
+                  onPositionChanged({
+                    lat: data.lat,
+                    lng: data.lon,
+                  })
+                  setCenter([data.lat, data.lon])
+                  setZoom(15)
+                }
+              }}
+              countrycodes=""
+              acceptLanguage="en"
+            />
+            {hasUserLocation && (
+              <Button
+                type="button"
+                mx={2}
+                onClick={(evt) => {
+                  evt.preventDefault()
+                  setLocationToNavigatorLocation()
                 }}
-                countrycodes=""
-                acceptLanguage="en"
-              />
-              {hasUserLocation && (
-                <Button
-                  type="button"
-                  mx={2}
-                  onClick={(evt) => {
-                    evt.preventDefault()
-                    setLocationToNavigatorLocation()
-                  }}
-                >
-                  {useUserLocation}
-                </Button>
-              )}
-            </Flex>
-          )}
+              >
+                {useUserLocation}
+              </Button>
+            )}
+          </Flex>
         </Box>
         <Map
+          ref={mapRef}
+          className="markercluster-map"
           center={center}
           zoom={zoom}
           zoomControl={false}
           setZoom={setZoom}
-          onclick={onClick}
+          ondblclick={onDblClick}
+          doubleClickZoom={false}
           style={{
             height: '300px',
             zIndex: 1,
           }}
         >
+          {popup}
           <ZoomControl position="topright" />
           <MapPin
             position={position}
-            draggable={draggable}
+            markerIcon={markerIcon}
+            onClick={onClickMapPin}
             ondragend={(evt: any) => {
               if (evt.lat && evt.lng)
                 onPositionChanged({

src/models/common.models.tsx

@@ -23,7 +23,8 @@ export interface ILocation {
   postcode: string
   value: string
 }
-interface ILatLng {
+
+export interface ILatLng {
   lat: number
   lng: number
 }

src/models/index.ts

@@ -1,5 +1,3 @@
-import type { IComment } from './discussion.models'
-
 export * from './common.models'
 export * from './discussion.models'
 export * from './howto.models'
@@ -14,7 +12,3 @@ export * from './tags.model'
 export * from './user.models'
 export * from './moderation.model'
 export * from './userPreciousPlastic.models'
-
-export interface UserComment extends IComment {
-  isEditable: boolean
-}

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

@@ -5,6 +5,7 @@ import { MapMemberCard, PinProfile } from 'oa-components'
 import { IModerationStatus } from 'oa-shared'
 import { MAP_GROUPINGS } from 'src/stores/Maps/maps.groupings'
 
+import type { ILatLng } from 'oa-shared'
 import type { Map } from 'react-leaflet'
 import type { IMapPin, IMapPinWithDetail } from 'src/models/maps.models'
 
@@ -15,12 +16,13 @@ interface IProps {
   mapRef: React.RefObject<Map>
   newMap?: boolean
   onClose?: () => void
+  customPosition?: ILatLng
 }
 
 export const Popup = (props: IProps) => {
   const leafletRef = useRef<LeafletPopup>(null)
   const activePin = props.activePin as IMapPinWithDetail
-  const { mapRef, newMap, onClose } = props
+  const { mapRef, newMap, onClose, customPosition } = props
 
   useEffect(() => {
     openPopup()
@@ -47,7 +49,7 @@ export const Popup = (props: IProps) => {
     activePin.location && (
       <LeafletPopup
         ref={leafletRef}
-        position={[activePin.location.lat, activePin.location.lng]}
+        position={customPosition ? customPosition : [activePin.location.lat, activePin.location.lng]}
         offset={new L.Point(2, -10)}
         closeButton={false}
         className={activePin !== undefined ? '' : 'closed'}

src/pages/UserSettings/SettingsPageMapPin.test.tsx

@@ -24,6 +24,21 @@ vi.mock('src/common/hooks/useCommonStores', () => ({
       },
       mapsStore: {
         getPin: vi.fn().mockResolvedValue(mockPin),
+        getPinDetail: vi.fn().mockResolvedValue(mockPin),
+      },
+      themeStore: {
+        currentTheme: {
+          id: 'string',
+          siteName: 'string',
+          logo: 'string',
+          badge: 'string',
+          avatar: 'string',
+          howtoHeading: 'string',
+          academyResource: 'string',
+          styles: {
+            communityProgramURL: '',
+          },
+        },
       },
     },
   }),