From 701798acaeb28f657bd1420d06253d350eb41b96 Mon Sep 17 00:00:00 2001 From: Factiven Date: Tue, 12 Sep 2023 21:45:30 +0700 Subject: initial v4 commit --- pages/en/schedule/index.js | 523 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 523 insertions(+) create mode 100644 pages/en/schedule/index.js (limited to 'pages/en/schedule/index.js') diff --git a/pages/en/schedule/index.js b/pages/en/schedule/index.js new file mode 100644 index 0000000..0a49037 --- /dev/null +++ b/pages/en/schedule/index.js @@ -0,0 +1,523 @@ +import Image from "next/image"; +import { useEffect, useRef, useState } from "react"; +import { NewNavbar } from "../../../components/anime/mobile/topSection"; +import Link from "next/link"; +import { CalendarIcon } from "@heroicons/react/24/solid"; +import { ClockIcon } from "@heroicons/react/24/outline"; +import Loading from "../../../components/shared/loading"; +import { timeStamptoAMPM, timeStamptoHour } from "../../../utils/getTimes"; +import { + filterFormattedSchedule, + filterScheduleByDay, + sortScheduleByDay, + transformSchedule, +} from "../../../utils/schedulesUtils"; + +import { scheduleQuery } from "../../../lib/graphql/query"; +import MobileNav from "../../../components/shared/MobileNav"; + +import { useSession } from "next-auth/react"; +import redis from "../../../lib/redis"; +import Head from "next/head"; + +const day = [ + "Sunday", + "Monday", + "Tuesday", + "Wednesday", + "Thursday", + "Friday", + "Saturday", +]; + +const isAired = (timestamp) => { + const currentTime = new Date().getTime() / 1000; + return timestamp <= currentTime; +}; + +export async function getServerSideProps() { + const now = new Date(); + // Adjust for Japan timezone (add 9 hours) + const nowJapan = new Date(now.getTime() + 9 * 60 * 60 * 1000); + + // Calculate the time until midnight of the next day in Japan timezone + const midnightTomorrowJapan = new Date( + nowJapan.getFullYear(), + nowJapan.getMonth(), + nowJapan.getDate() + 1, + 0, + 0, + 0, + 0 + ); + const timeUntilMidnightJapan = Math.round( + (midnightTomorrowJapan - nowJapan) / 1000 + ); + + let cachedData; + + // Check if the data is already in Redis + if (redis) { + cachedData = await redis.get("new_schedule"); + } + + if (cachedData) { + const scheduleByDay = JSON.parse(cachedData); + + // const today = now.getDay(); + // const todaySchedule = day[today]; + + return { + props: { + schedule: scheduleByDay, + // today: todaySchedule, + }, + }; + } else { + now.setHours(0, 0, 0, 0); // Set the time to 00:00:00.000 + const dayInSeconds = 86400; // Number of seconds in a day + const yesterdayStart = Math.floor(now.getTime() / 1000) - dayInSeconds; + // Calculate weekStart from yesterday's 00:00:00 + const weekStart = yesterdayStart; + const weekEnd = weekStart + 604800; + + // const today = now.getDay(); + // const todaySchedule = day[today]; + + // const now = new Date(); + // const currentDayOfWeek = now.getDay(); // 0 = Sunday, 1 = Monday, ..., 6 = Saturday + + // // Calculate the number of seconds until the current Saturday at 00:00:00 + // const secondsUntilSaturday = (6 - currentDayOfWeek) * 24 * 60 * 60; + + // // Calculate weekStart as the current time minus secondsUntilSaturday + // const weekStart = Math.floor(now.getTime() / 1000) - secondsUntilSaturday; + + // // Calculate weekEnd as one week from weekStart + // const weekEnd = weekStart + 604800; // One week in seconds + + let page = 1; + const airingSchedules = []; + + while (true) { + const res = await fetch("https://graphql.anilist.co", { + method: "POST", + headers: { + "Content-Type": "application/json", + Accept: "application/json", + }, + body: JSON.stringify({ + query: scheduleQuery, + variables: { + weekStart, + weekEnd, + page, + }, + }), + }); + + const json = await res.json(); + const schedules = json.data.Page.airingSchedules; + + if (schedules.length === 0) { + break; // No more data to fetch + } + + airingSchedules.push(...schedules); + page++; + } + + const timestampToDay = (timestamp) => { + const options = { weekday: "long" }; + return new Date(timestamp * 1000).toLocaleDateString(undefined, options); + }; + + const scheduleByDay = {}; + airingSchedules.forEach((schedule) => { + const day = timestampToDay(schedule.airingAt); + if (!scheduleByDay[day]) { + scheduleByDay[day] = []; + } + scheduleByDay[day].push(schedule); + }); + + if (redis) { + await redis.set( + "new_schedule", + JSON.stringify(scheduleByDay), + "EX", + timeUntilMidnightJapan + ); + } + + return { + props: { + schedule: scheduleByDay, + // today: todaySchedule, + }, + }; + } + // setSchedule(scheduleByDay); +} + +export default function Schedule({ schedule }) { + const { data: session } = useSession(); + + // const [schedule, setSchedule] = useState({}); + const [filterDay, setFilterDay] = useState("All"); + const [loading, setLoading] = useState(true); + + useEffect(() => { + setLoading(true); + async function setDay() { + const now = new Date(); + const today = day[now.getDay()]; + setFilterDay(today); + setLoading(false); + } + setDay(); + }, []); + // Sort the schedule object by day, placing today's schedule first + const sortedSchedule = sortScheduleByDay(schedule); + const formattedSchedule = transformSchedule(schedule); + + // State to keep track of the next airing anime + const [nextAiringAnime, setNextAiringAnime] = useState(null); + // const [nextAiringBanner, setNextAiringBanner] = useState(null); + + // State to keep track of the currently airing anime + const [currentlyAiringAnime, setCurrentlyAiringAnime] = useState(null); + + const [layout, setLayout] = useState(1); + + // Effect to update the next and currently airing anime + useEffect(() => { + const now = new Date().getTime() / 1000; // Current time in seconds + let nextAiring = null; + let currentlyAiring = null; + + for (const [, schedules] of Object.entries(sortedSchedule)) { + for (const s of schedules) { + if (s.airingAt > now) { + if (!nextAiring) { + nextAiring = s.id; + // setNextAiringBanner(s.media.bannerImage); + } + } else if (s.airingAt + 1440 > now) { + currentlyAiring = s.id; + } + } + if (nextAiring && currentlyAiring) break; + } + + setNextAiringAnime(nextAiring); + setCurrentlyAiringAnime(currentlyAiring); + }, [sortedSchedule]); + + const scrollContainerRef = useRef(null); + + useEffect(() => { + // Scroll to center the active button when it changes + if (scrollContainerRef.current) { + const activeButton = + scrollContainerRef.current.querySelector(".text-action"); + if (activeButton) { + const containerWidth = scrollContainerRef.current.clientWidth; + const buttonLeft = activeButton.offsetLeft; + const buttonWidth = activeButton.clientWidth; + const scrollLeft = buttonLeft - containerWidth / 2 + buttonWidth / 2; + scrollContainerRef.current.scrollLeft = scrollLeft; + } + } + }, [filterDay]); + + return ( + <> + + Moopa - Schedule + {/* write a meta with good seo for this page */} + + + + + + + + + + + + + + + {/* + */} + + + + + + + +
+ + +
+ +
+
+
    + + {day.map((i) => ( + + ))} +
+
+ setLayout(1)} + /> + setLayout(2)} + /> +
+
+ + {layout === 1 ? ( + !loading ? ( + Object.entries( + filterFormattedSchedule(formattedSchedule, filterDay) + ).map(([day, timeSlots], index) => ( +
+

+ {day} +

+ {Object.entries(timeSlots).map(([time, animeList]) => ( +
+
+

+ {timeStamptoAMPM(time)} +

+ {/* {!isAired(time) &&

Airing Next

} */} +

+
+
+ {animeList.map((s, index) => { + const m = s.media; + return ( + <> + + image +
+

+ {m.title.romaji} +

+

+ Ep {s.episode} {timeStamptoHour(s.airingAt)} +

+
+ +

+ + ); + })} +
+
+ ))} +
+ )) + ) : ( +
+ +
+ ) + ) : !loading ? ( + Object.entries(filterScheduleByDay(sortedSchedule, filterDay)).map( + ([day, schedules]) => ( +
+

+ {day} +

+
+ {schedules.map((s) => { + const m = s.media; + + return ( + + {/*

*/} +

+ + {/* */} + + Next Airing + +

+

+ + + + Airing Now + +

+ {/* + Airing Next + */} + {/*

*/} + {/* {s.media?.bannerImage && ( + banner + )} */} + image +
+

+ {m.title.romaji} +

+

+ Ep {s.episode} {timeStamptoHour(s.airingAt)} +

+
+ + ); + })} +
+
+ ) + ) + ) : ( +
+ +
+ )} +
+
+ + ); +} -- cgit v1.2.3