import axios from "axios"; import Head from "next/head"; import Image from "next/image"; import Link from "next/link"; import { useEffect, useState } from "react"; import Layout from "../../../components/layout"; // { `Don't touch this` } // import { useUser } from "@auth0/nextjs-auth0/client"; // import { // arrayRemove, // arrayUnion, // collection, // doc, // getDoc, // getDocs, // setDoc, // updateDoc, // } from "firebase/firestore"; // import db from "../../../lib/firebase"; const options = [ "mangadex", "mangahere", "mangakakalot", "mangapark", "mangapill", "mangareader", "mangasee123", ]; export default function MangaDetail({ data, manga, aniId, provider }) { const [selectOption, setSelectedOption] = useState(options[0]); const [recentWatch, setRecentWatch] = useState(); const [load, setLoad] = useState(true); useEffect(() => { function getRecent() { const recentWatch = JSON.parse(localStorage.getItem("watchedManga"))?.map( (data) => data.id ); setRecentWatch(recentWatch); } getRecent(); }, []); function handleLoad() { setLoad(false); } const relation = data?.relations.filter( (relation) => relation.malId !== null ); const mangan = JSON.stringify(manga); async function clickDeez(props) { localStorage.setItem("chapters", mangan); localStorage.setItem("currentChapterId", props); } return ( <> {data.title?.english || data.title.romaji}
{data ? (
CoverImage

{data.title?.english}

{relation?.length > 0 ? (

Relations

{relation && relation.map((relation, index) => { return (
{relation.relationType}
{relation.title.romaji || relation.title.english || relation.title.userPreferred}

{relation.type}

{`Cover
); })}
{relation.length > 3 && ( )}
) : (

No Relations

)}

Chapters

{manga?.map((chapter, index) => { return (
clickDeez(chapter.id)} className={`${ recentWatch?.includes(chapter.id) ? "text-gray-400" : "" }`} > {typeof chapter.title === "string" && !isNaN(Number(chapter.title)) ? (
Chapter {Number(chapter.title)}
) : (
{chapter.chapter ? (

Chapter {chapter.chapter}

) : (

{chapter.title}

)}
)}
); })}
) : (

Oops no data found :(

)}
); } export const getServerSideProps = async (context) => { context.res.setHeader("Cache-Control", "public, max-age=3600"); const { aniId, aniTitle } = context.query; const prv = "mangahere"; try { const info = await axios.get( `https://api.moopa.my.id/meta/anilist-manga/info/${aniId}?provider=${prv}` ); const result = info.data; const manga = result.chapters; return { props: { data: result, aniId: aniId, provider: prv, manga, }, }; } catch (error) { if (error.response && error.response.status === 404) { try { const prv = "mangakakalot"; const manga = await axios.get( `https://api.moopa.my.id/meta/anilist-manga/info/${aniId}?provider=${prv}` ); const results = manga.data; return { props: { data: results, aniId: aniId, manga: results.chapters, provider: prv, }, }; } catch (error) { console.error(error); return { notFound: true, }; } } else { console.error(error); return { notFound: true, }; } } };