import React, { useMemo, useState } from "react";
import CachedSearch from "./CachedSearch";
import { search } from "./dummyApi";
import ResultsTable from "./ResultsTable";
import CacheInfo from "./CacheInfo";
export default () => {
  const [query, setQuery] = useState("");
  const [results, setResults] = useState([]);

  const cachedSearch = useMemo(() => new CachedSearch(search, setResults), []);
  const handleQueryChange = query => {
    setQuery(query);
    cachedSearch.changeQuery(query);
  };
  return (
    <div>
      <h3>Hooks Based Search (good)</h3>
      <form>
        <label>Search:</label>
        <input onChange={({ target: { value } }) => handleQueryChange(value)} />
      </form>
      <ResultsTable results={results} />
      <CacheInfo cacheObject={cachedSearch} />
    </div>
  );
};