From 1fcdd9f7d859b925bf92265f441655d5522e351c Mon Sep 17 00:00:00 2001 From: Factiven Date: Tue, 11 Apr 2023 23:23:29 +0700 Subject: initial commit --- pages/search.js | 430 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 430 insertions(+) create mode 100644 pages/search.js (limited to 'pages/search.js') diff --git a/pages/search.js b/pages/search.js new file mode 100644 index 0000000..87f9cdc --- /dev/null +++ b/pages/search.js @@ -0,0 +1,430 @@ +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 +

+ + ); + }) + )} +
+ +
+