import { aniListData } from "../../lib/anilist/AniList"; import React, { useState, useEffect } from "react"; import Head from "next/head"; import Link from "next/link"; import Footer from "../../components/footer"; import Image from "next/image"; import Content from "../../components/home/content"; import { motion } from "framer-motion"; import { signIn, signOut } from "next-auth/react"; import { useAniList } from "../../lib/anilist/useAnilist"; import { getServerSession } from "next-auth/next"; import { authOptions } from "../api/auth/[...nextauth]"; import SearchBar from "../../components/searchBar"; import Genres from "../../components/home/genres"; import Schedule from "../../components/home/schedule"; import getUpcomingAnime from "../../lib/anilist/getUpcomingAnime"; import { useCountdown } from "../../lib/useCountdownSeconds"; import Navigasi from "../../components/home/staticNav"; // Filter schedules for each day // const filterByCountryOfOrigin = (schedule, country) => { // const filteredSchedule = {}; // for (const day in schedule) { // filteredSchedule[day] = schedule[day].filter( // (anime) => anime.countryOfOrigin === country // ); // } // return filteredSchedule; // }; export default function Home({ detail, populars, sessions, upComing }) { const { media: current } = useAniList(sessions, { stats: "CURRENT" }); const { media: plan } = useAniList(sessions, { stats: "PLANNING" }); const { media: release } = useAniList(sessions); const [schedules, setSchedules] = useState(null); const [anime, setAnime] = useState([]); const update = () => { setAnime((prevAnime) => prevAnime.slice(1)); }; const [days, hours, minutes, seconds] = useCountdown( anime[0]?.nextAiringEpisode?.airingAt * 1000 || Date.now(), update ); useEffect(() => { if (upComing && upComing.length > 0) { setAnime(upComing); } }, [upComing]); useEffect(() => { const getSchedule = async () => { const res = await fetch(`https://ruka.moopa.live/api/schedules`); const data = await res.json(); setSchedules(data); }; getSchedule(); }, []); const [releaseData, setReleaseData] = useState([]); useEffect(() => { function getRelease() { let releasingAnime = []; let progress = []; release.map((list) => { list.entries.map((entry) => { if (entry.media.status === "RELEASING") { releasingAnime.push(entry.media); } progress.push(entry); }); }); setReleaseData(releasingAnime); setProg(progress); } getRelease(); }, [release]); const [isVisible, setIsVisible] = useState(false); const [list, setList] = useState(null); const [planned, setPlanned] = useState(null); const [greeting, setGreeting] = useState(""); const [prog, setProg] = useState(null); const popular = populars?.data; const data = detail.data[0]; const handleShowClick = () => { setIsVisible(true); }; const handleHideClick = () => { setIsVisible(false); }; useEffect(() => { const time = new Date().getHours(); let greeting = ""; if (time >= 5 && time < 12) { greeting = "Good morning"; } else if (time >= 12 && time < 18) { greeting = "Good afternoon"; } else if (time >= 18 && time < 22) { greeting = "Good evening"; } else if (time >= 22 || time < 5) { greeting = "Good night"; } setGreeting(greeting); async function userData() { if (!sessions) return; const getMedia = current.filter((item) => item.status === "CURRENT")[0] || null; const list = getMedia?.entries .map(({ media }) => media) .filter((media) => media); const planned = plan?.[0]?.entries .map(({ media }) => media) .filter((media) => media); if (list) { setList(list.reverse()); } if (planned) { setPlanned(planned.reverse()); } } userData(); }, [sessions, current, plan]); return ( <> Moopa {/* NAVBAR */}
{!isVisible && ( )}
{/* Mobile Menu */}
{isVisible && sessions && ( user avatar )} {isVisible && (
{sessions ? ( ) : ( )}
)}
{/* PC / TABLET */}

{data.title.english || data.title.romaji || data.title.native}

{`alt
{/* {!sessions && (

{greeting}!

)} */} {sessions && (
{greeting},

{sessions?.user.name}

)}
{sessions && releaseData?.length > 0 && ( )} {sessions && list?.length > 0 && ( )} {/* SECTION 2 */} {sessions && planned?.length > 0 && ( )} {/* SECTION 3 */} {detail && ( )} {/* Schedule */} {anime.length > 0 && ( )} {/* SECTION 4 */} {popular && ( )}