import { ChevronLeftIcon } from "@heroicons/react/24/solid"; import Image from "next/image"; import Link from "next/link"; import { Fragment, useEffect, useState } from "react"; import Skeleton from "react-loading-skeleton"; import Footer from "@/components/shared/footer"; import { getServerSession } from "next-auth"; import { authOptions } from "../../api/auth/[...nextauth]"; import Head from "next/head"; import MobileNav from "@/components/shared/MobileNav"; export default function TrendingAnime({ sessions }) { const [data, setData] = useState(null); const [page, setPage] = useState(1); const [nextPage, setNextPage] = useState(true); const [loading, setLoading] = useState(true); useEffect(() => { setLoading(true); const fetchData = async () => { const res = await fetch("https://graphql.anilist.co", { method: "POST", headers: { "Content-Type": "application/json", Accept: "application/json", }, body: JSON.stringify({ query: `query ($page: Int, $perPage: Int) { Page (page: $page, perPage: $perPage) { pageInfo { total currentPage lastPage hasNextPage perPage } media (sort: TRENDING_DESC, type: ANIME) { id idMal title { romaji } coverImage { large } averageScore description episodes status } } } `, variables: { page: page, perPage: 20, }, }), }); const get = await res.json(); if (get?.data?.Page?.media?.length === 0) { setNextPage(false); } else if (get !== null && page > 1) { setData((prevData) => { return [...(prevData ?? []), ...get?.data?.Page?.media]; }); setNextPage(get?.data?.Page?.pageInfo.hasNextPage); } else { setData(get?.data?.Page?.media); } setNextPage(get?.data?.Page?.pageInfo.hasNextPage); setLoading(false); }; fetchData(); }, [page]); useEffect(() => { function handleScroll() { if (page > 5 || !nextPage) { window.removeEventListener("scroll", handleScroll); return; } if ( window.innerHeight + window.pageYOffset >= document.body.offsetHeight - 3 ) { setPage((prevPage) => prevPage + 1); } } window.addEventListener("scroll", handleScroll); return () => window.removeEventListener("scroll", handleScroll); }, [page, nextPage]); return ( Moopa - Trending Anime

Trending Now

{data?.map((i, index) => (
{i.title.romaji}

{i.status === "RELEASING" ? ( ) : i.status === "NOT_YET_RELEASED" ? ( ) : null} {i.title.romaji}

))} {loading && ( <> {[1, 2, 4, 5, 6, 7, 8].map((item) => (
))} )}
{!loading && page > 5 && nextPage && ( )}