fix(tours): hold the client warning ratchet and the server format baseline flat after the rebase onto dev

client/src/components/Map/MapView.leaflet.test.tsx

@@ -94,6 +94,16 @@ function clickOn(el: Element) {
   })
 }
 
+/** The Leaflet marker that renders `el`; throws when the map has none. */
+function markerOf(map: L.Map, el: Element): L.Marker {
+  let found: L.Marker | null = null
+  map.eachLayer(layer => {
+    if (layer instanceof L.Marker && layer.getElement() === el) found = layer
+  })
+  if (!found) throw new Error('no marker renders this element')
+  return found
+}
+
 function pointer(type: string, x: number, y: number): Event {
   const event = new Event(type, { bubbles: true, cancelable: true })
   Object.defineProperties(event, {
@@ -149,11 +159,7 @@ describe('MapView on a real Leaflet map', () => {
     const map = maps[maps.length - 1]
     await waitFor(() => expect(view.container.querySelector('.tour-planner-waypoint-marker')).not.toBeNull())
     const pin = view.container.querySelector('.tour-planner-waypoint-marker') as HTMLElement
-    let marker: L.Marker | null = null
-    map.eachLayer(layer => {
-      if (layer instanceof L.Marker && layer.getElement() === pin) marker = layer
-    })
-    expect(marker).not.toBeNull()
+    const marker = markerOf(map, pin)
     const start = map.latLngToContainerPoint([waypoint.lat, waypoint.lng])
     const end = start.add([30, 20])
     const expected = map.containerPointToLatLng(end)
@@ -164,8 +170,8 @@ describe('MapView on a real Leaflet map', () => {
       pin.dispatchEvent(mouse('mousedown', start.x, start.y))
       pin.dispatchEvent(pointer('pointermove', end.x, end.y))
     })
-    expect(marker!.getLatLng().lat).toBeCloseTo(expected.lat, 6)
-    expect(marker!.getLatLng().lng).toBeCloseTo(expected.lng, 6)
+    expect(marker.getLatLng().lat).toBeCloseTo(expected.lat, 6)
+    expect(marker.getLatLng().lng).toBeCloseTo(expected.lng, 6)
     expect(onMove).not.toHaveBeenCalled()
     expect(waypoints[0]).toEqual(waypoint)
 
@@ -184,8 +190,8 @@ describe('MapView on a real Leaflet map', () => {
         routeProfileFocus={{ distanceMeters: 100, elevationMeters: 0, lat: 34.69, lng: 135.84, sampleIndex: 0 }}
       />
     )
-    expect(marker!.getLatLng().lat).toBeCloseTo(expected.lat, 6)
-    expect(marker!.getLatLng().lng).toBeCloseTo(expected.lng, 6)
+    expect(marker.getLatLng().lat).toBeCloseTo(expected.lat, 6)
+    expect(marker.getLatLng().lng).toBeCloseTo(expected.lng, 6)
 
     act(() => {
       pin.dispatchEvent(pointer('pointerup', end.x, end.y))
@@ -238,10 +244,7 @@ describe('MapView on a real Leaflet map', () => {
     const map = maps[maps.length - 1]
     await waitFor(() => expect(view.container.querySelector('.tour-planner-waypoint-marker')).not.toBeNull())
     const pin = view.container.querySelector('.tour-planner-waypoint-marker') as HTMLElement
-    let marker: L.Marker | null = null
-    map.eachLayer(layer => {
-      if (layer instanceof L.Marker && layer.getElement() === pin) marker = layer
-    })
+    const marker = markerOf(map, pin)
     const start = map.latLngToContainerPoint([waypoint.lat, waypoint.lng])
     const end = start.add([30, 20])
 
@@ -250,15 +253,15 @@ describe('MapView on a real Leaflet map', () => {
       pin.dispatchEvent(pointer('pointermove', end.x, end.y))
       pin.dispatchEvent(pointer('pointercancel', end.x, end.y))
     })
-    expect(marker!.getLatLng().lat).toBeCloseTo(waypoint.lat, 6)
-    expect(marker!.getLatLng().lng).toBeCloseTo(waypoint.lng, 6)
+    expect(marker.getLatLng().lat).toBeCloseTo(waypoint.lat, 6)
+    expect(marker.getLatLng().lng).toBeCloseTo(waypoint.lng, 6)
     expect(onMove).not.toHaveBeenCalled()
 
     clickOn(pin)
     expect(onSelect).toHaveBeenCalledOnce()
     expect(onSelect).toHaveBeenCalledWith(waypoint.id)
     expect(onMapClick).not.toHaveBeenCalled()
-    act(() => map.fire('click', { latlng: L.latLng(34.7, 135.85) }))
+    act(() => { map.fire('click', { latlng: L.latLng(34.7, 135.85) }) })
     expect(onMapClick).toHaveBeenCalledOnce()
   })
 

client/src/components/Map/MapView.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState, useMemo, useCallback, createElement, memo, type ComponentType } from 'react'
+import { useEffect, useLayoutEffect, useRef, useState, useMemo, useCallback, createElement, memo, type ComponentType } from 'react'
 import DOM from 'react-dom'
 import { renderIconMarkup } from '../../utils/iconMarkup'
 import { MapContainer, TileLayer, Marker, Polyline, CircleMarker, Circle, useMap, Tooltip } from 'react-leaflet'
@@ -784,7 +784,7 @@ function PlannerWaypointMarker({
   const map = useMap()
   const [marker, setMarker] = useState<L.Marker | null>(null)
   const handlersRef = useRef({ onClick, onMove })
-  handlersRef.current = { onClick, onMove }
+  useLayoutEffect(() => { handlersRef.current = { onClick, onMove } }, [onClick, onMove])
   const position = useMemo(() => [point.lat, point.lng] as [number, number], [point.lat, point.lng])
   const icon = useMemo(() => plannerWaypointIcon(index, selected, !!onMove), [index, onMove, selected])
   const eventHandlers = useMemo(() => ({

client/src/components/Map/MapViewGL.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useMemo, useState, createElement, useCallback } from 'react'
+import { useEffect, useLayoutEffect, useRef, useMemo, useState, createElement, useCallback } from 'react'
 import { makeMarkerDraggable, makePoiDraggable, draggedPoiId } from './markerDrag'
 import { useStableVias } from './viaMarkerState'
 import { wirePlannerWaypointDrag } from './plannerWaypointDrag'
@@ -711,7 +711,9 @@ export function MapViewGL({
   const viaPinsRef = useRef<PlacePin[]>([])
   const plannerWaypointPinsRef = useRef<PlacePin[]>([])
   const plannerWaypointHandlersRef = useRef({ onPlannerWaypointClick, onPlannerWaypointMove })
-  plannerWaypointHandlersRef.current = { onPlannerWaypointClick, onPlannerWaypointMove }
+  useLayoutEffect(() => {
+    plannerWaypointHandlersRef.current = { onPlannerWaypointClick, onPlannerWaypointMove }
+  }, [onPlannerWaypointClick, onPlannerWaypointMove])
   const plannerWaypointsDraggable = !!onPlannerWaypointMove
   const profileFocusPinRef = useRef<PlacePin | null>(null)
   /** The drive-time pills on the offered routes; same treatment. */