From 7327a69b55a20b99b14ee0803d6cf5f8b88c45ef Mon Sep 17 00:00:00 2001 From: Factiven Date: Wed, 13 Sep 2023 00:45:53 +0700 Subject: Update v4 - Merge pre-push to main (#71) * Create build-test.yml * initial v4 commit * update: github workflow * update: push on branch * Update .github/ISSUE_TEMPLATE/bug_report.md * configuring next.config.js file --- pages/en/anime/recent.js | 163 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 163 insertions(+) create mode 100644 pages/en/anime/recent.js (limited to 'pages/en/anime/recent.js') diff --git a/pages/en/anime/recent.js b/pages/en/anime/recent.js new file mode 100644 index 0000000..89a868a --- /dev/null +++ b/pages/en/anime/recent.js @@ -0,0 +1,163 @@ +import Head from "next/head"; +import { Fragment, useEffect, useState } from "react"; +import Link from "next/link"; +import { ChevronLeftIcon } from "@heroicons/react/24/outline"; +import Skeleton from "react-loading-skeleton"; +import Footer from "../../../components/footer"; +import { getServerSession } from "next-auth"; +import { authOptions } from "../../api/auth/[...nextauth]"; +import Image from "next/image"; +import MobileNav from "../../../components/shared/MobileNav"; + +export async function getServerSideProps(context) { + const session = await getServerSession(context.req, context.res, authOptions); + + return { + props: { + sessions: session, + }, + }; +} + +export default function Recent({ sessions }) { + const [data, setData] = useState(null); + const [page, setPage] = useState(1); + const [nextPage, setNextPage] = useState(true); + const [loading, setLoading] = useState(true); + + useEffect(() => { + setLoading(true); + async function getRecent() { + const data = await fetch(`/api/v2/etc/recent/${page}`).then((res) => + res.json() + ); + if (data?.results?.length === 0) { + setNextPage(false); + } else if (data !== null && page > 1) { + setData((prevData) => { + return [...(prevData ?? []), ...data?.results]; + }); + setNextPage(data?.hasNextPage); + } else { + setData(data?.results); + } + setNextPage(data?.hasNextPage); + setLoading(false); + } + getRecent(); + }, [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 - New Episodes + + + + +
+
+ + +

New Episodes

+ +
+
+ {data?.map((i, index) => ( +
+ +
+
+ {i.title.romaji} +
+ episode-bade +

+ Episode {i?.episodeNumber} +

+ + +

+ + {i.title.romaji} +

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