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/Map/index.css

@@ -1,3 +1,11 @@
 .markercluster-map .closed {
   display: none;
 }
+
+.leaflet-marker-icon:hover {
+  cursor: grab;
+}
+
+.leaflet-drag-target {
+  cursor: grabbing;
+}

packages/components/src/MapWithPin/MapPin.tsx

@@ -1,20 +1,18 @@
-import { useRef, useState } from 'react'
+import { useRef } from 'react'
 import { Marker } from 'react-leaflet'
 import L from 'leaflet'
 
-import customMarkerIcon from '../../assets/icons/map-marker.png'
+import customMarker from '../../assets/icons/map-marker.png'
 
 import type { DivIcon } from 'leaflet'
 
-import './MapPin.css'
-
-const customMarker = L.icon({
-  iconUrl: customMarkerIcon,
+const customMarkerIcon = L.icon({
+  iconUrl: customMarker,
   iconSize: [20, 28],
   iconAnchor: [10, 28],
 })
 
-export interface IProps {
+interface IProps {
   position: {
     lat: number
     lng: number
@@ -26,7 +24,6 @@ export interface IProps {
 
 export const MapPin = (props: IProps) => {
   const markerRef = useRef(null)
-  const [isDragging, setIsDragging] = useState(false)
 
   const handleDrag = () => {
     const marker: any = markerRef.current
@@ -43,15 +40,11 @@ export const MapPin = (props: IProps) => {
 
   return (
     <Marker
-      className={`map-pin ${isDragging ? 'dragging' : ''}`}
       draggable
       onDrag={handleDrag}
       position={[props.position.lat, props.position.lng]}
       ref={markerRef}
-      icon={props.markerIcon || customMarker}
-      onMouseDown={() => setIsDragging(true)}
-      onMouseUp={() => setIsDragging(false)}
-      onMouseLeave={() => setIsDragging(false)}
+      icon={props.markerIcon || customMarkerIcon}
       onclick={props.onClick}
     />
   )

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import { useRef } from 'react'
 
 import { MapWithPin } from './MapWithPin'
 
@@ -12,7 +12,7 @@ export default {
 
 export const Default: StoryFn<typeof MapWithPin> = () => {
   const position = { lat: 0, lng: 0 }
-  const newMapRef = React.useRef<Map>(null)
+  const newMapRef = useRef<Map>(null)
 
   return (
     <MapWithPin

src/models/common.models.tsx

@@ -1,5 +1,7 @@
 // A reminder that dates should be saved in the ISOString format
 // i.e. new Date().toISOString() => 2011-10-05T14:48:00.000Z
+import type { ILatLng } from "oa-shared"
+
 // This is more consistent than others and allows better querying
 export type ISODateString = string
 
@@ -24,9 +26,4 @@ export interface ILocation {
   value: string
 }
 
-export interface ILatLng {
-  lat: number
-  lng: number
-}
-
 export type FetchState = 'idle' | 'fetching' | 'completed'

src/models/index.ts

@@ -1,3 +1,5 @@
+import type { IComment } from './discussion.models'
+
 export * from './common.models'
 export * from './discussion.models'
 export * from './howto.models'
@@ -15,4 +17,3 @@ export * from './moderation.model'
 export interface UserComment extends IComment {
   isEditable: boolean
 }
-export * from './userPreciousPlastic.models'

src/pages/UserSettings/SettingsPageMapPin.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { Field, Form } from 'react-final-form'
 import { toJS } from 'mobx'
 import {
@@ -28,13 +28,9 @@ import { SettingsFormNotifications } from './content/SettingsFormNotifications'
 import { MAX_PIN_LENGTH } from './constants'
 
 import type { DivIcon } from 'leaflet'
+import type { ILatLng } from 'oa-shared'
 import type { Map } from 'react-leaflet'
-import type {
-  ILatLng,
-  ILocation,
-  IMapPinWithDetail,
-  IUserPPDB,
-} from 'src/models'
+import type { ILocation, IMapPinWithDetail, IUserDB } from 'src/models'
 import type { IFormNotification } from './content/SettingsFormNotifications'
 
 interface IPinProps {
@@ -172,7 +168,7 @@ export const SettingsPageMapPin = () => {
 
   const currentTheme = themeStore.currentTheme
 
-  const newMapRef = React.useRef<Map>(null)
+  const newMapRef = useRef<Map>(null)
 
   useEffect(() => {
     const init = async () => {
@@ -245,7 +241,7 @@ export const SettingsPageMapPin = () => {
     >
       <Flex sx={{ flexDirection: 'column', gap: 1 }}>
         <Heading as="h2" id="your-map-pin">
-          {mapPin ? yourPinTitle : addPinTitle}
+          {mapPin ? addPinTitle: yourPinTitle}
         </Heading>
         {isMember && (
           <Text