Address autocomplete in React

// useAddressSearch.ts
import { useEffect, useState } from "react";

export type Address = {
  // The id in the register the address came from. In Australia it is the
  // G-NAF Address Detail PID, sent as address_detail_pid as well.
  id: string;
  formatted: string;
  lat: number;
  lng: number;
  mesh_block?: string;          // Australian records only
  components: Record<string, string>;
};

const KEY = import.meta.env.VITE_LOCIO_KEY as string;   // a public key
const API = "https://api.locio.com.au";

export function useAddressSearch(query: string) {
  const [results, setResults] = useState<Address[]>([]);
  const [busy, setBusy] = useState(false);

  useEffect(() => {
    const q = query.trim();
    if (q.length < 3) {
      setResults([]);
      return;
    }

    const controller = new AbortController();
    // 200ms of quiet, then one request. Cleanup cancels both the timer and
    // the fetch, so a stale answer can never overwrite a newer one.
    const timer = setTimeout(async () => {
      setBusy(true);
      try {
        const url = new URL(`${API}/v1/addresses`);
        url.searchParams.set("q", q);
        url.searchParams.set("limit", "8");
        const res = await fetch(url, {
          headers: { Authorization: `Bearer ${KEY}` },
          signal: controller.signal,
        });
        if (res.ok) {
          // country_code says which country was searched; note says why the
          // list is empty when empty is the right answer.
          const { data } = (await res.json()) as {
            data: Address[];
            country_code?: string;
            note?: string;
          };
          setResults(data);
        }
      } catch (err) {
        if ((err as Error).name !== "AbortError") console.error(err);
      } finally {
        if (!controller.signal.aborted) setBusy(false);
      }
    }, 200);

    return () => {
      clearTimeout(timer);
      controller.abort();
    };
  }, [query]);

  return { results, busy };
}

// AddressSearch.tsx
import { useId, useState } from "react";
import { useAddressSearch, type Address } from "./useAddressSearch";

export function AddressSearch({ onPick }: { onPick: (address: Address) => void }) {
  const id = useId();
  const [query, setQuery] = useState("");
  const [picked, setPicked] = useState<Address | null>(null);
  const { results, busy } = useAddressSearch(picked ? "" : query);

  return (
    <div>
      <label htmlFor={id}>Delivery address</label>
      <input
        id={id}
        type="search"
        autoComplete="off"
        placeholder="145 sydney road"
        value={query}
        onChange={(event) => {
          setPicked(null);
          setQuery(event.target.value);
        }}
      />
      {busy && <p>Searching…</p>}

      {results.length > 0 && !picked && (
        <ul role="listbox">
          {results.map((address) => (
            <li key={address.id}>
              <button
                type="button"
                onClick={() => {
                  setPicked(address);
                  setQuery(address.formatted);
                  onPick(address);
                }}
              >
                {address.formatted}
              </button>
            </li>
          ))}
        </ul>
      )}

      {/* The id is what your form should submit, not the text. */}
      <input type="hidden" name="address_id" value={picked?.id ?? ""} />
    </div>
  );
}

import { AddressSearch } from "./AddressSearch";

export function CheckoutForm() {
  return (
    <form method="post" action="/checkout">
      <AddressSearch
        onPick={(address) => {
          console.log(address.id, address.lat, address.lng, address.components.postcode);
        }}
      />
      <button type="submit">Continue</button>
    </form>
  );
}