import { useState, useTransition } from 'react';
import './App.css';

type Book = {
  id: number;
  title: string;
};

const App: React.FC = () => {
  const [searchString, setSearchString] = useState('');
  const [books, setBooks] = useState<Book[]>([]);
  const [isPending, startTransition] = useTransition();

  function search() {
    startTransition(() => {
      fetch(`http://localhost:3001/books?title_like=${searchString}`)
        .then((response) => response.json())
        .then((data) => setBooks(data))
        .catch(() => {});
    });
  }

  return (
    <div>
      <div>
        <input
          type="text"
          value={searchString}
          onChange={(event) => setSearchString(event.target.value)}
        />
        <button onClick={() => search()}>filter</button>
      </div>
      {isPending && <div>loading</div>}
      {!isPending && (
        <ul>
          {books.map((book) => (
            <li key={book.id}>{book.title}</li>
          ))}
        </ul>
      )}
    </div>
  );
};
export default App;

