Function App

react-anime/src/App.tsx:16–119

()

}

export const App = () => {
  // const [likedAnime, setLikedAnime] = useState<Array<IAnime>>([]);
  // const [dislikedAnime, setDislikedAnime] = useState<Array<IAnime>>([]);
  const [query, setQuery] = useState<string>('naruto');
  const [results, setResults] = useState<Array<IAnime>>([]);
  const [showFavorites, setShowFavorites] = useState<boolean>(false);
  const [favorites, setFavorites] = useState<Array<IAnime>>([]);

  // Fetch anime data on page load.
  useEffect(() => {
    fetchAnimeData();
  }, []); // eslint-disable-line react-hooks/exhaustive-deps

  useEffect(() => {
    console.log(favorites);
  }, [favorites]);

  useEffect(() => {
    console.log(showFavorites);
  }, [showFavorites]);

  // Testing useEffect.
  // useEffect(() => {
  //   console.log(query);
  // }, [query]);

  const fetchAnimeData = (): void => {
    setShowFavorites(false);

    // Define the config we'll need for our Api request
    const url = `https://api.jikan.moe/v3/search/anime?q=${query}`;

    // Make the HTTP Api request
    fetch(url)
      .then((response: Response) => response.json())
      .then((data) => {
        setResults([...data.results]);
      })
      .catch((error) => {
        alert('Error, check console');
        console.error(error);
      });
  };

  const toggleFavoritesSection = () => {
    setShowFavorites(!showFavorites);
  };

  return (
    <div className="font-sans antialiased min-h-screen  bg-gray-100 text-gray-900 py-8 flex flex-col place-items-center">
      <div className="text-center flex flex-col space-y-8 w-7/12 lg:w-5/12 h-full">
        {/* Search */}
        <div className="flex space-x-4 justify-center">
          <div>
            <input
              type="text"
              value={query}
              onChange={(e) => setQuery(e.target.value)}