address geocoding review

Author: dnywh

src/components/LocationSelect/LocationSelect.tsx

@@ -43,7 +43,8 @@ const ZOOM_LEVEL = 16;
 import { config, geocoding, geolocation } from "@maptiler/client";
 
 // Reverse geocoding for legible location (area_name)
-config.apiKey = process.env.NEXT_PUBLIC_MAPTILER_API_KEY ?? "";
+const mapTilerApiKey = process.env.NEXT_PUBLIC_MAPTILER_API_KEY ?? "";
+config.apiKey = mapTilerApiKey;
 
 // const maptilerClient = new maptilersdk.Maptiler();
 
@@ -148,14 +149,12 @@ async function getAreaNameMatch(
   latitude: number
 ): Promise<AreaNameMatch | null> {
   try {
-    const apiKey = process.env.NEXT_PUBLIC_MAPTILER_API_KEY;
-
-    if (!apiKey) {
+    if (!mapTilerApiKey) {
       return null;
     }
 
     const coordinates = await geocoding.reverse([longitude, latitude], {
-      apiKey,
+      apiKey: mapTilerApiKey,
     });
 
     return getBestAreaNameMatchFromFeatures(
@@ -191,6 +190,10 @@ export default function LocationSelect({
 
   useEffect(() => {
     if (autoDetectCountry && !countryCode) {
+      if (!mapTilerApiKey) {
+        return;
+      }
+
       let isMounted = true; // Track if component is mounted
 
       const initializeLocation = async () => {

src/features/map/components/GeocodingSearch.tsx

@@ -257,24 +257,28 @@ const GeocodingSearch = forwardRef<GeocodingSearchHandle, GeocodingSearchProps>(
     const [query, setQuery] = useState("");
     const [isFocused, setIsFocused] = useState(false);
     const [activeIndex, setActiveIndex] = useState(0);
+    const hasSearchableQuery =
+      query.trim().length >= MAP_GEOCODING_MIN_QUERY_LENGTH;
+    const canShowResults = variant === "palette" || isFocused;
+    const showResults = hasSearchableQuery && canShowResults;
     const { features, isError, isLoading, isReady } = useGeocodingSearch({
       query,
       countryCode,
+      enabled: showResults,
       proximity,
     });
-    const hasSearchableQuery =
-      query.trim().length >= MAP_GEOCODING_MIN_QUERY_LENGTH;
-    const showResults =
-      hasSearchableQuery && (variant === "palette" || isFocused);
+    const hasVisibleListbox = showResults && features.length > 0;
     const showNoResults =
       showResults && isReady && !isLoading && !isError && features.length === 0;
-    const statusMessage = isLoading
-      ? loadingMessage
-      : isError
-        ? error || errorMessage
-        : showNoResults
-          ? noResultsMessage
-          : "";
+    const statusMessage = showResults
+      ? isLoading
+        ? loadingMessage
+        : isError
+          ? error || errorMessage
+          : showNoResults
+            ? noResultsMessage
+            : ""
+      : "";
     const shouldRenderStatusMessage =
       variant === "palette" || !onStatusMessageChange;
     const activeFeature = showResults ? features[activeIndex] : undefined;
@@ -345,8 +349,8 @@ const GeocodingSearch = forwardRef<GeocodingSearchHandle, GeocodingSearchProps>(
             autoFocus={autoFocus}
             placeholder={placeholder}
             aria-autocomplete="list"
-            aria-controls={listId}
-            aria-expanded={showResults}
+            aria-controls={hasVisibleListbox ? listId : undefined}
+            aria-expanded={hasVisibleListbox}
             aria-label={ariaLabel}
             aria-labelledby={ariaLabelledBy}
             aria-invalid={ariaInvalid}
@@ -389,7 +393,7 @@ const GeocodingSearch = forwardRef<GeocodingSearchHandle, GeocodingSearchProps>(
           </StatusMessage>
         ) : null}
 
-        {showResults && features.length > 0 ? (
+        {hasVisibleListbox ? (
           <ResultsPanel $variant={variant}>
             <ResultList id={listId} role="listbox">
               {features.map((feature, index) => (

src/features/map/components/MapSearch.tsx

@@ -6,6 +6,7 @@ import { useTranslations } from "next-intl";
 import { keyframes, styled } from "next-yak";
 import type { GeocodingFeature } from "@maptiler/client";
 
+import IconButton from "@/components/IconButton";
 import { theme } from "@/styles/theme.yak";
 import GeocodingSearch from "./GeocodingSearch";
 
@@ -115,39 +116,57 @@ const DialogContent = styled(Dialog.Content)`
   }
 `;
 
+const DialogCloseButton = styled(IconButton)`
+  position: absolute;
+  right: -0.625rem;
+  top: -0.625rem;
+  border-radius: 0.7rem;
+  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.13);
+`;
+
 export default function MapSearch({
   countryCode,
   onOpenChange,
   onPick,
   open,
 }: MapSearchProps) {
-  const t = useTranslations("Map");
+  const actionsT = useTranslations("Actions");
+  const mapT = useTranslations("Map");
+  const closeLabel = actionsT("close");
 
   return (
     <Dialog.Root open={open} onOpenChange={onOpenChange}>
       <Dialog.Portal>
         <DialogOverlay />
         <DialogContent data-testid="map-search-dialog">
           <VisuallyHidden.Root>
-            <Dialog.Title>{t("searchDialogTitle")}</Dialog.Title>
-            <Dialog.Description>{t("searchPlaceholder")}</Dialog.Description>
+            <Dialog.Title>{mapT("searchDialogTitle")}</Dialog.Title>
+            <Dialog.Description>{mapT("searchPlaceholder")}</Dialog.Description>
           </VisuallyHidden.Root>
           <GeocodingSearch
-            ariaLabel={t("searchDialogTitle")}
+            ariaLabel={mapT("searchDialogTitle")}
             autoFocus={true}
-            clearLabel={t("searchClear")}
+            clearLabel={mapT("searchClear")}
             countryCode={countryCode}
-            errorMessage={t("searchError")}
-            loadingMessage={t("searchLoading")}
-            noResultsMessage={t("searchNoResults")}
+            errorMessage={mapT("searchError")}
+            loadingMessage={mapT("searchLoading")}
+            noResultsMessage={mapT("searchNoResults")}
             onPick={(feature) => {
               onPick(feature);
               onOpenChange(false);
             }}
-            placeholder={t("searchPlaceholder")}
+            placeholder={mapT("searchPlaceholder")}
             proximity="ip"
             variant="palette"
           />
+          <Dialog.Close asChild>
+            <DialogCloseButton
+              icon="close"
+              aria-label={closeLabel}
+              title={closeLabel}
+              type="button"
+            />
+          </Dialog.Close>
         </DialogContent>
       </Dialog.Portal>
     </Dialog.Root>