feat(component): update map settings display

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

fix #3856

packages/components/src/MapWithPin/MapPin.tsx

@@ -1,13 +1,11 @@
-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 type { DivIcon } from 'leaflet'
 
-import './MapPin.css'
-
 const customMarker = L.icon({
   iconUrl: customMarkerIcon,
   iconSize: [20, 28],
@@ -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)}
       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

packages/components/src/MapWithPin/MapWithPin.tsx

@@ -126,7 +126,7 @@ export const MapWithPin = (props: Props) => {
         </Box>
         <Map
           ref={mapRef}
-          className="markercluster-map"
+          className="markercluster-map settings-page"
           center={center}
           zoom={zoom}
           zoomControl={false}

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/Maps/Content/MapView/Sprites.tsx

@@ -36,7 +36,11 @@ export const createClusterIcon = () => {
   }
 }
 
-export const createMarkerIcon = (pin: IMapPin, currentTheme: PlatformTheme) => {
+export const createMarkerIcon = (
+  pin: IMapPin,
+  currentTheme: PlatformTheme,
+  draggable?: boolean,
+) => {
   const icon =
     pin.moderation === IModerationStatus.ACCEPTED
       ? Workspace.findWorkspaceBadge(pin.type, true, pin.verified, currentTheme)
@@ -46,7 +50,7 @@ export const createMarkerIcon = (pin: IMapPin, currentTheme: PlatformTheme) => {
   }
   return L.divIcon({
     className: `icon-marker icon-${pin.type}`,
-    html: `<img data-cy="pin-${pin._id}" src="${icon}" />`,
+    html: `<img data-cy="pin-${pin._id}" src="${icon}" style="${draggable ? 'cursor: grab' : ''}" />`,
     iconSize: L.point(38, 38, true),
   })
 }

src/pages/UserSettings/SettingsPageMapPin.tsx

@@ -1,4 +1,5 @@
-import React, { useEffect, useState } from 'react'
+/* eslint-disable no-console */
+import { useEffect, useRef, useState } from 'react'
 import { Field, Form } from 'react-final-form'
 import { toJS } from 'mobx'
 import {
@@ -28,13 +29,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,20 +169,23 @@ export const SettingsPageMapPin = () => {
 
   const currentTheme = themeStore.currentTheme
 
-  const newMapRef = React.useRef<Map>(null)
+  const newMapRef = useRef<Map>(null)
 
   useEffect(() => {
     const init = async () => {
+      console.log({ user }, user?.userName)
       if (!user) return
 
       const pin = await mapsStore.getPin(user.userName)
+      console.log({ pin })
       if (!pin) return
 
       const pinDetail = await mapsStore.getPinDetail(pin)
+      console.log({ pinDetail })
       if (!pinDetail) return
 
       setMapPin(pinDetail)
-      setMarkerIcon(createMarkerIcon(pin, currentTheme))
+      setMarkerIcon(createMarkerIcon(pin, currentTheme, true))
       setIsLoading(false)
     }
 
@@ -245,7 +245,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