Debounce

import { useEffect, useState } from 'react';

const DELAY = 300; // ms of quiet before searching

type Result = { id: string; title: string };

function useDebouncedValue<T>(value: T, delay: number) {
  const [debounced, setDebounced] = useState(value);
  useEffect(() => {
    // Every keystroke clears the timer and starts the wait again.
    const id = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(id);
  }, [value, delay]);
  return debounced;
}

export function SearchBox() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState<Result[]>([]);
  const debouncedQuery = useDebouncedValue(query.trim(), DELAY);

  useEffect(() => {
    if (debouncedQuery.length < 2) return;
    // Cancel the previous request so older results never replace newer ones.
    const controller = new AbortController();
    fetch(`/api/search?q=${encodeURIComponent(debouncedQuery)}`, {
      signal: controller.signal
    })
      .then((response) => response.json() as Promise<Result[]>)
      .then(setResults)
      .catch((error: unknown) => {
        if (!controller.signal.aborted) console.error(error);
      });
    return () => controller.abort();
  }, [debouncedQuery]);

  return (
    <div className='w-80'>
      <input
        type='search'
        value={query}
        onChange={(event) => setQuery(event.target.value)}
        placeholder='Search projects'
        aria-label='Search projects'
        className='h-10 w-full rounded-lg border bg-background px-3 text-sm'
      />
      {query.trim().length >= 2 && (
        <ul className='mt-2 rounded-lg border p-1 text-sm empty:hidden'>
          {results.map((result) => (
            <li key={result.id} className='rounded-md px-3 py-2 hover:bg-muted'>
              {result.title}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}