feat: update map setting display (#3862)

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

@@ -1,9 +1,11 @@
-import * as React from 'react'
+import { useRef } from 'react'
 import { Marker } from 'react-leaflet'
 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,31 +17,35 @@ export interface IProps {
     lat: number
     lng: number
   }
-  draggable: boolean
-  ondragend(lng: number): void
+  onDrag(lng: number): void
+  markerIcon?: DivIcon
+  onClick?: () => void
 }
 
 export const MapPin = (props: IProps) => {
-  const markerRef = React.useRef(null)
+  const markerRef = useRef(null)
+
+  const handleDrag = () => {
+    const marker: any = markerRef.current
+
+    if (!marker) {
+      return
+    }
+
+    const markerLatLng = marker.leafletElement.getLatLng()
+    if (props.onDrag) {
+      props.onDrag(markerLatLng)
+    }
+  }
 
   return (
     <Marker
-      draggable={props.draggable}
-      ondragend={() => {
-        const marker: any = markerRef.current
-
-        if (!marker) {
-          return null
-        }
-
-        const markerLatLng = marker.leafletElement.getLatLng()
-        if (props.ondragend) {
-          props.ondragend(markerLatLng)
-        }
-      }}
+      draggable
+      onDrag={handleDrag}
       position={[props.position.lat, props.position.lng]}
       ref={markerRef}
-      icon={customMarker}
+      icon={props.markerIcon || customMarker}
+      onclick={props.onClick}
     />
   )
 }

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

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

packages/components/src/MapWithPin/MapWithPin.client.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import { useState } from 'react'
 import { ZoomControl } from 'react-leaflet'
 import { Alert, Box, Flex, Text } from 'theme-ui'
 
@@ -7,33 +7,37 @@ import { Map } from '../Map/Map.client'
 import { OsmGeocoding } from '../OsmGeocoding/OsmGeocoding'
 import { MapPin } from './MapPin.client'
 
-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."
+  'To move your pin, grab it to move it or double click where you want it to go.'
 
 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(
+  const [zoom, setZoom] = useState(props.zoom || 1)
+  const [center, setCenter] = 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',
@@ -84,66 +86,75 @@ export const MapWithPin = (props: Props) => {
         <Box
           sx={{
             position: 'absolute',
-            top: 0,
-            left: 0,
-            padding: 2,
             zIndex: 2,
+            padding: 4,
+            top: 0,
+            right: 0,
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
           }}
         >
-          {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)
+                }
+              }}
+              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 settings-page"
           center={center}
           zoom={zoom}
           zoomControl={false}
           setZoom={setZoom}
-          onclick={onClick}
+          ondblclick={onDblClick}
+          doubleClickZoom={false}
           style={{
-            height: '300px',
+            height: '500px',
             zIndex: 1,
           }}
         >
-          <ZoomControl position="topright" />
-          <MapPin
-            position={position}
-            draggable={draggable}
-            ondragend={(evt: any) => {
-              if (evt.lat && evt.lng)
-                onPositionChanged({
-                  lat: evt.lat,
-                  lng: evt.lng,
-                })
-            }}
-          />
+          <ZoomControl position="topleft" />
+          <>
+            {popup}
+            {position && (
+              <MapPin
+                position={position}
+                markerIcon={markerIcon}
+                onClick={onClickMapPin}
+                onDrag={(evt: any) => {
+                  if (evt.lat && evt.lng)
+                    onPositionChanged({
+                      lat: evt.lat,
+                      lng: evt.lng,
+                    })
+                }}
+              />
+            )}
+          </>
         </Map>
       </div>
     </Flex>

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

@@ -1,6 +1,9 @@
+import { useRef } from 'react'
+
 import { MapWithPin } from './MapWithPin.client'
 
 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 = 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/cypress/src/integration/settings.spec.ts

@@ -13,11 +13,10 @@ const locationStub = {
   value: 'Singapore',
 }
 
-const mapDetails = (description) => ({
-  description,
+const mapDetails = {
   searchKeyword: 'singapo',
   locationName: locationStub.value,
-})
+}
 
 describe('[Settings]', () => {
   beforeEach(() => {
@@ -51,7 +50,6 @@ describe('[Settings]', () => {
       const userImage = 'avatar'
       const displayName = 'settings_member_new'
       const description = "I'm a very active member"
-      const mapPinDescription = 'Fun, vibrant and full of amazing people'
       const profileType = 'member'
       const tag = ['Sewing', 'Accounting']
       const user = generateNewUserDetails()
@@ -148,7 +146,7 @@ describe('[Settings]', () => {
       cy.get('[data-cy="tab-Map"]').click()
       cy.get('[data-cy=descriptionMember').should('be.visible')
       cy.contains('No map pin currently saved')
-      cy.fillSettingMapPin(mapDetails(mapPinDescription))
+      cy.fillSettingMapPin(mapDetails)
       cy.get('[data-cy=save-map-pin]').click()
       cy.contains('Map pin saved successfully')
       cy.contains('Your current map pin is here:')

packages/cypress/src/support/commandsUi.ts

@@ -18,7 +18,6 @@ interface IInfo {
 type ILink = Omit<IUser['links'][0] & { index: number }, 'key'>
 
 interface IMapPin {
-  description: string
   searchKeyword: string
   locationName: string
 }
@@ -144,7 +143,6 @@ Cypress.Commands.add('fillSettingMapPin', (mapPin: IMapPin) => {
   cy.wait('@fetchAddress').then(() => {
     cy.get('[data-cy="osm-geocoding-results"]').find('li:eq(0)').click()
   })
-  cy.get('[data-cy=pin-description]').clear().type(mapPin.description)
 })
 
 Cypress.Commands.add('setSettingPublicContact', () => {

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

@@ -5,7 +5,7 @@ import { MapMemberCard, PinProfile } from 'oa-components'
 import { IModerationStatus } from 'oa-shared'
 import { MAP_GROUPINGS } from 'src/stores/Maps/maps.groupings'
 
-import type { IMapPin, IMapPinWithDetail } from 'oa-shared'
+import type { ILatLng, IMapPin, IMapPinWithDetail } from 'oa-shared'
 import type { Map } from 'react-leaflet'
 
 import './popup.css'
@@ -15,12 +15,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,8 +48,14 @@ 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)}
+        closeOnClick={false}
+        closeOnEscapeKey={false}
         closeButton={false}
         className={activePin !== undefined ? '' : 'closed'}
         minWidth={230}