harden map search cleanup

Author: dnywh

src/components/MapThumbnail/MapThumbnail.tsx

@@ -5,9 +5,9 @@ import {
   sharedMediaFrameRadius,
   sharedMediaFrameShapeStyles,
 } from "@/styles/mediaFrame";
-import { useMemo } from "react";
+import { forwardRef, useMemo } from "react";
 
-import Map, { AttributionControl } from "react-map-gl/maplibre";
+import Map, { AttributionControl, type MapRef } from "react-map-gl/maplibre";
 import "maplibre-gl/dist/maplibre-gl.css";
 import { useLocale } from "next-intl";
 
@@ -17,45 +17,48 @@ import { handleMapError } from "@/features/map/lib/mapErrors";
 import { createProtomapsStyle } from "@/features/map/lib/protomapsStyle";
 import { usePreferredMapFlavor } from "@/features/map/hooks/usePreferredMapFlavor";
 
+type MapThumbnailProps = {
+  height?: number | string;
+  children?: ReactNode;
+} & Omit<ComponentProps<typeof Map>, "children" | "style" | "mapStyle">;
+
 const MapContainer = styled.div`
   ${sharedMediaFrameShapeStyles}
   ${sharedMediaFrameBorderStyles}
   background-color: ${theme.colors.background.map};
   position: relative;
 `;
 
-export default function MapThumbnail({
-  height = "300",
-  children,
-  ...props
-}: {
-  height?: number | string;
-  children?: ReactNode;
-} & Omit<ComponentProps<typeof Map>, "children" | "style" | "mapStyle">) {
-  const locale = useLocale();
-  const mapFlavor = usePreferredMapFlavor();
-  const mapStyle = useMemo(
-    () => createProtomapsStyle({ flavorName: mapFlavor, locale }),
-    [locale, mapFlavor]
-  );
+const MapThumbnail = forwardRef<MapRef, MapThumbnailProps>(
+  function MapThumbnail({ height = "300", children, ...props }, ref) {
+    const locale = useLocale();
+    const mapFlavor = usePreferredMapFlavor();
+    const mapStyle = useMemo(
+      () => createProtomapsStyle({ flavorName: mapFlavor, locale }),
+      [locale, mapFlavor]
+    );
+
+    return (
+      <MapContainer>
+        <Map
+          ref={ref}
+          attributionControl={false} // Customised below
+          mapStyle={mapStyle}
+          onError={handleMapError}
+          renderWorldCopies={true}
+          style={{
+            width: "100%",
+            height: height,
+            borderRadius: sharedMediaFrameRadius,
+          }}
+          {...props}
+        >
+          <AttributionControl compact={true} />
+          {children}
+        </Map>
+      </MapContainer>
+    );
+  }
+);
 
-  return (
-    <MapContainer>
-      <Map
-        attributionControl={false} // Customised below
-        mapStyle={mapStyle}
-        onError={handleMapError}
-        renderWorldCopies={true}
-        style={{
-          width: "100%",
-          height: height,
-          borderRadius: sharedMediaFrameRadius,
-        }}
-        {...props}
-      >
-        <AttributionControl compact={true} />
-        {children}
-      </Map>
-    </MapContainer>
-  );
-}
+export default MapThumbnail;

src/features/map/hooks/useGeocodingSearch.ts

@@ -55,11 +55,13 @@ export function useGeocodingSearch({
 
     setStatus("loading");
 
+    let cancelled = false;
+
     const timeout = window.setTimeout(() => {
       const apiKey = process.env.NEXT_PUBLIC_MAPTILER_API_KEY;
 
       if (!apiKey) {
-        if (requestIdRef.current === requestId) {
+        if (!cancelled && requestIdRef.current === requestId) {
           setFeatures([]);
           setStatus("error");
         }
@@ -77,13 +79,13 @@ export function useGeocodingSearch({
           types: MAP_GEOCODING_TYPES,
         })
         .then((result) => {
-          if (requestIdRef.current !== requestId) return;
+          if (cancelled || requestIdRef.current !== requestId) return;
 
           setFeatures(result.features);
           setStatus("success");
         })
         .catch((error) => {
-          if (requestIdRef.current !== requestId) return;
+          if (cancelled || requestIdRef.current !== requestId) return;
 
           console.warn("Could not search MapTiler geocoding:", error);
           setFeatures([]);
@@ -92,6 +94,10 @@ export function useGeocodingSearch({
     }, debounceMs);
 
     return () => {
+      cancelled = true;
+      if (requestIdRef.current === requestId) {
+        requestIdRef.current += 1;
+      }
       window.clearTimeout(timeout);
     };
   }, [countryCode, debounceMs, enabled, limit, minLength, proximity, query]);