import { useEffect, useRef, useState } from "react"; import { AnimatePresence, motion as m } from "framer-motion"; import Skeleton, { SkeletonTheme } from "react-loading-skeleton"; import { useRouter } from "next/router"; import "react-loading-skeleton/dist/skeleton.css"; import Link from "next/link"; import Navbar from "../components/navbar"; import Head from "next/head"; import Footer from "../components/footer"; import { useAniList } from "../lib/useAnilist"; const genre = [ "Action", "Adventure", "Cars", "Comedy", "Drama", "Fantasy", "Horror", "Mahou Shoujo", "Mecha", "Music", "Mystery", "Psychological", "Romance", "Sci-Fi", "Slice of Life", "Sports", "Supernatural", "Thriller", ]; const types = ["ANIME", "MANGA"]; const sorts = [ "POPULARITY_DESC", "POPULARITY", "TRENDING_DESC", "TRENDING", "UPDATED_AT_DESC", "UPDATED_AT", "START_DATE_DESC", "START_DATE", "END_DATE_DESC", "END_DATE", "FAVOURITES_DESC", "FAVOURITES", "SCORE_DESC", "SCORE", "TITLE_ROMAJI_DESC", "TITLE_ROMAJI", "TITLE_ENGLISH_DESC", "TITLE_ENGLISH", "TITLE_NATIVE_DESC", "TITLE_NATIVE", "EPISODES_DESC", "EPISODES", "ID", "ID_DESC", ]; export default function Card() { const router = useRouter(); // const { genres } = router.query; // console.log(genres); const { aniAdvanceSearch } = useAniList(); const [data, setData] = useState(); const [loading, setLoading] = useState(true); // const [selectedGenre, setSelectedGenre] = useState(null); // const [selectedType, setSelectedType] = useState(type[0]); // const [selectedSort, setSelectedSort] = useState(null); const { hasil } = router.query; const [search, setQuery] = useState(hasil || null); const [type, setSelectedType] = useState("ANIME"); const [seasonYear, setSeasonYear] = useState(); const [season, setSeason] = useState(); const [genres, setSelectedGenre] = useState(); const [perPage, setPerPage] = useState(25); const [sort, setSelectedSort] = useState(["POPULARITY_DESC"]); const [isVisible, setIsVisible] = useState(false); // const [query, setQuery] = useState(hasil || null); const inputRef = useRef(null); async function advance() { setLoading(true); const data = await aniAdvanceSearch( search, type, seasonYear, season, genres, perPage, sort ); setData(data); setLoading(false); } useEffect(() => { advance(); }, [search, type, seasonYear, season, genres, perPage, sort]); console.log(data); // useEffect(() => { // async function fetchData() { // setLoading(true); // try { // const res = await fetch( // `https://api.moopa.my.id/meta/anilist/advanced-search?${ // query ? `query=${query}&` : "" // }${selectedGenre ? `genres=["${selectedGenre}"]&` : ""}${ // selectedType ? `type=${selectedType}&` : "" // }${selectedSort ? `sort=["${selectedSort}"]` : ""}` // ); // const data = await res.json(); // setData(data); // setLoading(false); // } catch (e) { // console.error(e); // } // } // fetchData(); // }, [query, selectedGenre, selectedType, selectedSort]); const handleKeyDown = async (event) => { if (event.key === "Enter") { event.preventDefault(); const inputValue = event.target.value; setQuery(inputValue); } }; function trash() { setQuery(null); inputRef.current.value = ""; setSelectedGenre(null); setSelectedSort(["POPULARITY_DESC"]); } function handleVisible() { setIsVisible(!isVisible); } return ( <> Moopa - search

TITLE

{/* TYPE */}

TYPE

{/* SORT */}

SORT

{/* OPTIONS */}

{/* TRASH ICON */}

{isVisible && (

GENRE

TYPE

SORT

)}

{loading ? ( <>

) : data && data.media.length === 0 ? (

Oops!

Nothing's Found...

) : ( data.media.map((anime) => { return (

{anime.title.userPreferred}

{anime.format ||
-
} ·{" "} {anime.status ||
-
} · {anime.episodes || 0}{" "} Episodes

); }) )}