Search and autocomplete

import { baatoRequest } from "./baato";

export function searchPlaces(query, coordinate) {
  const params = { q: query, limit: "20" };

  // Biasing towards the user's location markedly improves ranking
  if (coordinate) {
    params.lat = coordinate.latitude;
    params.lon = coordinate.longitude;
  }

  return baatoRequest("/search", params);
}

import { useEffect, useState } from "react";

export function useSearch(query, coordinate) {
  const [results, setResults] = useState([]);

  useEffect(() => {
    if (query.length < 2) {
      setResults([]);
      return;
    }

    let cancelled = false;
    const timer = setTimeout(async () => {
      try {
        const data = await searchPlaces(query, coordinate);
        if (!cancelled) setResults(data);
      } catch (error) {
        console.warn("Baato search failed", error);
      }
    }, 300);

    return () => {
      cancelled = true;
      clearTimeout(timer);
    };
  }, [query, coordinate]);

  return results;
}

<FlatList
  data={results}
  keyExtractor={(item) => String(item.placeId)}
  renderItem={({ item }) => (
    <Pressable onPress={() => handleSelect(item)}>
      <Text style={styles.name}>{item.name}</Text>
      <Text style={styles.address}>{item.address}</Text>
    </Pressable>
  )}
/>

export function getPlaceDetails(placeId) {
  return baatoRequest("/places", { placeId });
}

async function handleSelect(result) {
  const [place] = await getPlaceDetails(result.placeId);

  camera.current?.setCamera({
    centerCoordinate: [place.centroid.lon, place.centroid.lat],
    zoomLevel: 15,
    animationDuration: 800,
  });
}