import { useState, useEffect } from "react";

// importing other components 
import Header from "./components/Header.js";
import Footer from "./components/Footer.js";
import Home from "./pages/Home.js";


function App() {
// Creating state variables using useState Hooks :
// "animeList" variable will be used for the searched anime 
// "topAnime" variable will be used for all the popular anime
// "search" variable will be used for search terms
  const [animeList, setAnimeList] = useState([]);
  const [topAnime, setTopAnime] = useState([]);
  const [search, setSearch] = useState("");

  // Fetching top anime (by popularity) from jikan API
  // In place of simple fetch method you can axios library 
  // async function is used so don't to the keyword await

  const getTopAnime = async () => {
    const data = await fetch(
      `https://api.jikan.moe/v3/top/anime/1/bypopularity`
    ).then((res) => res.json());

    setTopAnime(data.top);
  };

  const handleSearch = (e) => {
    e.preventDefault();

    fetchAnime(search);
  };

  // Fetching searched anime from jikan API
  const fetchAnime = async (anime_name) => {
    const data = await fetch(
      `https://api.jikan.moe/v3/search/anime?q=${anime_name}&order_by=title&sort=asc&limit=10`
    ).then((res) => res.json());

    setAnimeList(data.results);
  };

  // get getTopAnime() as the site render useEffect is used
  useEffect(() => {
    getTopAnime();
  }, []);

  return (
    <>
    <div className="App" >
      <Header />

      {/*  Main Content  */}
      <Home
        // passing props to the Home Component 
        handleSearch={handleSearch}
        search={search}
        setSearch={setSearch}
        animeList={animeList}
        topAnime={topAnime}
      />

      <Footer />
      </div>
    </>
  );
}

export default App;

import "../styles/Home.css";
import AnimeCard from "../components/AnimeCard";

// you can get the props "function Home(props)" in this manner 
/* OR you can destructure it "function Home({handleSearch, search, setSearch, topAnime, animeList })" and use "search" instead of "props.search"   */

function Home(props) {
  return (
    <main>
      <div className="home">
        <form className="search-box" onSubmit={props.handleSearch}>
          <input
            type="search"
            placeholder="Search ..."
            required
            value={props.search}
            onChange={(e) => props.setSearch(e.target.value)}
          />
        </form>
      </div>

{/* if there is no text in the search bar it will show top anime(by popularity)
 and on searching it will show search results
use map() function to get all element in the array
 */}
      {!props.search ? (
        <div className="card-main">
          {props.topAnime.map((anime) => (
            <AnimeCard anime={anime} key={anime.mal_id} />
          ))}
        </div>
      ) : (
        <div className="card-main">
          {props.animeList.map((anime) => (
            <AnimeCard anime={anime} key={anime.mal_id} />
          ))}
        </div>
      )}

    </main>
  );
}

export default Home;

import "../styles/AnimeCard.css"

/* You can add anime synopsis you can check all elements using "console.log(getTopAnime)" in useEffect (App.js) if you want */

function AnimeCard({anime}) {
  // Anime Cards
    return (
        <a className="card-body" href={anime.url} alt={anime.title}>
        <figure className="card-fig">
          <img className="card-image" src={anime.image_url} alt="Anime Image" />
        </figure>
        <h3 className="card-title">{anime.title}</h3>
      </a>
    )
}

export default AnimeCard

import "../styles/Header.css";

function Header() {
  return (
    <header className="header">
      <h1 className="title">Anime-Suem</h1>
    </header>
  );
}

export default Header;

import "../styles/Footer.css";
import GitHubIcon from "@material-ui/icons/GitHub";
import LinkedInIcon from "@material-ui/icons/LinkedIn";

// I have used material-ui icons you can use whatever you wish
// "npm i @material-ui/icons" to install 

function Footer() {
  return (
    <footer>
   <div className="footer">

      <p>Created by: Sandeep Kumar Patel</p>

      <a href="https://github.com/sandyabhi/anime-suem" className="foots">
        <GitHubIcon /> Github
      </a>

      <a href="https://www.linkedin.com/in/sandeep-kumar-patel47/" className="foots">
        <LinkedInIcon /> Linkedin
      </a>

   </div>

    </footer>
  );
}

export default Footer;