Fix address bar bug (#2773)

Author: Giolii

client/src/components/FoodSeeker/AddressDropDown.jsx

@@ -28,7 +28,13 @@ export default function AddressDropDown({ autoFocus }) {
     searchCoordinates?.locationName || ""
   );
   const [open, setOpen] = useState(false);
-  const { mapboxResults, fetchMapboxResults, isLoading } = useMapboxGeocoder();
+  const {
+    mapboxResults,
+    searchMapboxResults,
+    ensureMapboxResults,
+    isLoading,
+    resultsQuery,
+  } = useMapboxGeocoder();
   const dispatch = useAppDispatch();
   const navigate = useNavigate();
   const { flyTo } = useMapbox();
@@ -76,10 +82,9 @@ export default function AddressDropDown({ autoFocus }) {
   const handleInputChange = (delta) => {
     if (!delta) return;
     const safeValue = typeof delta === "string" ? delta : delta.target.value;
+    setHighlightedOption(null);
     setInputVal(safeValue);
-    if (safeValue) {
-      fetchMapboxResults(safeValue);
-    }
+    searchMapboxResults(safeValue);
   };
 
   const handleAutocompleteOnChange = (selectedResult) => {
@@ -206,12 +211,30 @@ export default function AddressDropDown({ autoFocus }) {
     );
   };
 
-  const handleKeyDown = (event) => {
-    if (event.key === "Enter" && !isLoading) {
+  const handleKeyDown = async (event) => {
+    if (event.key === "Enter") {
       event.preventDefault();
-      if (mapboxOptions.length > 0) {
-        const selected = highlightedOption ?? mapboxOptions[0];
-        handleAutocompleteOnChange(selected);
+
+      const normalizedInput = inputVal.trim();
+      if (!normalizedInput) {
+        return;
+      }
+
+      const hasCurrentAddressResults =
+        !isLoading && resultsQuery === normalizedInput;
+
+      if (hasCurrentAddressResults && highlightedOption?.type === "mapbox") {
+        handleAutocompleteOnChange(highlightedOption);
+        return;
+      }
+
+      const resolvedResults = await ensureMapboxResults(normalizedInput);
+
+      if (resolvedResults.length > 0) {
+        handleAutocompleteOnChange({
+          type: "mapbox",
+          value: resolvedResults[0],
+        });
       }
     }
   };

client/src/hooks/useMapboxGeocoder.js

@@ -5,14 +5,15 @@ import {
   MAPBOX_ACCESS_TOKEN,
   DEFAULT_VIEWPORTS,
 } from "helpers/Constants";
-import { useCallback, useReducer } from "react";
+import { useCallback, useReducer, useRef } from "react";
 
 const baseUrl = `https://api.mapbox.com/geocoding/v5/mapbox.places`;
 
 const initialState = {
   isLoading: false,
   error: false,
   mapboxResults: [],
+  resultsQuery: "",
 };
 
 const actionTypes = {
@@ -24,13 +25,14 @@ const actionTypes = {
 function reducer(state = initialState, action) {
   switch (action.type) {
     case actionTypes.FETCH_REQUEST:
-      return { ...state, isLoading: true };
+      return { ...state, isLoading: true, resultsQuery: action.query };
     case actionTypes.FETCH_SUCCESS:
       return {
         ...state,
         error: false,
         isLoading: false,
         mapboxResults: action.results,
+        resultsQuery: action.query,
       };
     case actionTypes.FETCH_FAILURE:
       console.error(action.error);
@@ -41,35 +43,112 @@ function reducer(state = initialState, action) {
 }
 
 export function useMapboxGeocoder() {
-  const [{ isLoading, error, mapboxResults }, dispatch] = useReducer(
-    reducer,
-    initialState
-  );
+  const [{ isLoading, error, mapboxResults, resultsQuery }, dispatch] =
+    useReducer(reducer, initialState);
+  const latestQueryRef = useRef("");
+
+  const performFetch = useCallback(async (searchString) => {
+    const bbox = DEFAULT_VIEWPORTS[TENANT_ID].bbox;
+    const mapboxUrl = `${baseUrl}/${searchString}.json?bbox=${bbox}&access_token=${MAPBOX_ACCESS_TOKEN}`;
+
+    try {
+      const response = await axios.get(mapboxUrl);
+      const results = response.data.features;
+
+      if (latestQueryRef.current === searchString) {
+        dispatch({
+          type: actionTypes.FETCH_SUCCESS,
+          results,
+          query: searchString,
+        });
+      }
+
+      return results;
+    } catch (error) {
+      if (latestQueryRef.current === searchString) {
+        dispatch({ type: actionTypes.FETCH_FAILURE, error });
+      }
+      return [];
+    }
+  }, []);
 
   const debouncedFetch = useCallback(
     debounce(
       async (searchString) => {
-        const bbox = DEFAULT_VIEWPORTS[TENANT_ID].bbox;
-        const mapboxUrl = `${baseUrl}/${searchString}.json?bbox=${bbox}&access_token=${MAPBOX_ACCESS_TOKEN}`;
-
-        try {
-          const response = await axios.get(mapboxUrl);
-          dispatch({
-            type: actionTypes.FETCH_SUCCESS,
-            results: response.data.features,
-          });
-        } catch (error) {
-          dispatch({ type: actionTypes.FETCH_FAILURE, error });
-        }
+        await performFetch(searchString);
       },
       { wait: 300 }
     ),
-    []
+    [performFetch]
+  );
+
+  const clearResults = useCallback(() => {
+    debouncedFetch.cancel?.();
+    latestQueryRef.current = "";
+    dispatch({
+      type: actionTypes.FETCH_SUCCESS,
+      results: [],
+      query: "",
+    });
+  }, [debouncedFetch]);
+
+  const searchMapboxResults = useCallback(
+    (searchString) => {
+      const normalizedSearchString = searchString.trim();
+      latestQueryRef.current = normalizedSearchString;
+
+      if (!normalizedSearchString) {
+        clearResults();
+        return;
+      }
+
+      dispatch({
+        type: actionTypes.FETCH_REQUEST,
+        query: normalizedSearchString,
+      });
+      debouncedFetch(normalizedSearchString);
+    },
+    [clearResults, debouncedFetch]
+  );
+
+  const ensureMapboxResults = useCallback(
+    async (searchString) => {
+      const normalizedSearchString = searchString.trim();
+
+      if (!normalizedSearchString) {
+        clearResults();
+        return [];
+      }
+
+      if (!isLoading && resultsQuery === normalizedSearchString) {
+        return mapboxResults;
+      }
+
+      latestQueryRef.current = normalizedSearchString;
+      debouncedFetch.cancel?.();
+      dispatch({
+        type: actionTypes.FETCH_REQUEST,
+        query: normalizedSearchString,
+      });
+
+      return performFetch(normalizedSearchString);
+    },
+    [
+      clearResults,
+      debouncedFetch,
+      isLoading,
+      mapboxResults,
+      performFetch,
+      resultsQuery,
+    ]
   );
-  const fetchMapboxResults = useCallback((searchString) => {
-    dispatch({ type: actionTypes.FETCH_REQUEST });
-    debouncedFetch(searchString);
-  }, []);
 
-  return { error, isLoading, mapboxResults, fetchMapboxResults };
+  return {
+    error,
+    isLoading,
+    mapboxResults,
+    resultsQuery,
+    searchMapboxResults,
+    ensureMapboxResults,
+  };
 }