Update v4.2.0 (#93)v4.2.0

author: Factiven <[email protected]> 2023-10-22 19:43:17 +0700
committer: GitHub <[email protected]> 2023-10-22 19:43:17 +0700
commit: f801f8f422954b884a6541321dba0669ee9d6173 (patch)
tree: e0d5e106b99e9b4e0a4c4bf7bb0464617db85b8d /pages/en/manga
parent: Bump @babel/traverse from 7.22.8 to 7.23.2 (#90) (diff)
download: moopa-4.2.0.tar.xz
moopa-4.2.0.zip
3 files changed, 592 insertions, 181 deletions
diff --git a/pages/en/manga/[...id].js b/pages/en/manga/[...id].js
new file mode 100644
index 0000000..106bce2
--- /dev/null
+++ b/pages/en/manga/[...id].js
@@ -0,0 +1,425 @@
+import ChapterSelector from "@/components/manga/chapters";
+import Footer from "@/components/shared/footer";
+import Head from "next/head";
+import { useEffect, useState } from "react";
+import { getServerSession } from "next-auth";
+import { authOptions } from "../../api/auth/[...nextauth]";
+import { mediaInfoQuery } from "@/lib/graphql/query";
+import Modal from "@/components/modal";
+import { signIn, useSession } from "next-auth/react";
+import AniList from "@/components/media/aniList";
+import ListEditor from "@/components/listEditor";
+import MobileNav from "@/components/shared/MobileNav";
+import Image from "next/image";
+import DetailTop from "@/components/anime/mobile/topSection";
+import Characters from "@/components/anime/charactersCard";
+import Content from "@/components/home/content";
+import { toast } from "sonner";
+import axios from "axios";
+import getAnifyInfo from "@/lib/anify/info";
+import { redis } from "@/lib/redis";
+import getMangaId from "@/lib/anify/getMangaId";
+
+export default function Manga({ info, anifyData, color, chapterNotFound }) {
+  const [domainUrl, setDomainUrl] = useState("");
+  const { data: session } = useSession();
+
+  const [loading, setLoading] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [statuses, setStatuses] = useState(null);
+  const [watch, setWatch] = useState();
+
+  const [chapter, setChapter] = useState(null);
+
+  const [open, setOpen] = useState(false);
+
+  const rec = info?.recommendations?.nodes?.map(
+    (data) => data.mediaRecommendation
+  );
+
+  useEffect(() => {
+    setDomainUrl(window.location.origin);
+  }, []);
+
+  useEffect(() => {
+    if (chapterNotFound) {
+      toast.error("Chapter not found");
+      const cleanUrl = window.location.origin + window.location.pathname;
+      window.history.replaceState(null, null, cleanUrl);
+    }
+  }, [chapterNotFound]);
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        setLoading(true);
+
+        const { data } = await axios.get(`/api/v2/info?id=${anifyData.id}`);
+
+        if (!data.chapters) {
+          setLoading(false);
+          return;
+        }
+
+        setChapter(data);
+        setLoading(false);
+      } catch (error) {
+        console.error(error);
+      }
+    }
+    fetchData();
+
+    return () => {
+      setChapter(null);
+    };
+  }, [info?.id]);
+
+  function handleOpen() {
+    setOpen(true);
+    document.body.style.overflow = "hidden";
+  }
+
+  function handleClose() {
+    setOpen(false);
+    document.body.style.overflow = "auto";
+  }
+
+  return (
+    <>
+      <Head>
+        <title>
+          {info
+            ? `Manga - ${
+                info.title.romaji || info.title.english || info.title.native
+              }`
+            : "Getting Info..."}
+        </title>
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta
+          name="twitter:title"
+          content={`Moopa - ${info.title.romaji || info.title.english}`}
+        />
+        <meta
+          name="twitter:description"
+          content={`${info.description?.slice(0, 180)}...`}
+        />
+        <meta
+          name="twitter:image"
+          content={`${domainUrl}/api/og?title=${
+            info.title.romaji || info.title.english
+          }&image=${info.bannerImage || info.coverImage}`}
+        />
+        <meta
+          name="title"
+          data-title-romaji={info?.title?.romaji}
+          data-title-english={info?.title?.english}
+          data-title-native={info?.title?.native}
+        />
+      </Head>
+      <Modal open={open} onClose={() => handleClose()}>
+        <div>
+          {!session && (
+            <div className="flex-center flex-col gap-5 px-10 py-5 bg-secondary rounded-md">
+              <div className="text-md font-extrabold font-karla">
+                Edit your list
+              </div>
+              <button
+                className="flex items-center bg-[#363642] rounded-md text-white p-1"
+                onClick={() => signIn("AniListProvider")}
+              >
+                <h1 className="px-1 font-bold font-karla">
+                  Login with AniList
+                </h1>
+                <div className="scale-[60%] pb-[1px]">
+                  <AniList />
+                </div>
+              </button>
+            </div>
+          )}
+          {session && info && (
+            <ListEditor
+              animeId={info?.id}
+              session={session}
+              stats={statuses?.value}
+              prg={progress}
+              max={info?.episodes}
+              info={info}
+              close={handleClose}
+            />
+          )}
+        </div>
+      </Modal>
+      <MobileNav sessions={session} hideProfile={true} />
+      <main className="w-screen min-h-screen overflow-hidden relative flex flex-col items-center gap-5">
+        {/* <div className="absolute bg-gradient-to-t from-primary from-85% to-100% to-transparent w-screen h-full z-10" /> */}
+        <div className="w-screen absolute">
+          <div className="bg-gradient-to-t from-primary from-10% to-transparent absolute h-[280px] w-screen z-10 inset-0" />
+          {info?.bannerImage && (
+            <Image
+              src={info?.bannerImage}
+              alt="banner anime"
+              height={1000}
+              width={1000}
+              blurDataURL={info?.bannerImage}
+              className="object-cover bg-image blur-[2px] w-screen absolute top-0 left-0 h-[250px] brightness-[55%] z-0"
+            />
+          )}
+        </div>
+        <div className="w-full lg:max-w-screen-lg xl:max-w-screen-2xl z-30 flex flex-col gap-5 pb-10">
+          <DetailTop
+            info={info}
+            session={session}
+            handleOpen={handleOpen}
+            loading={loading}
+            statuses={statuses}
+            watchUrl={watch}
+            progress={progress}
+            color={color}
+          />
+
+          {!loading ? (
+            chapter?.chapters?.length > 0 ? (
+              <ChapterSelector
+                chaptersData={chapter.chapters}
+                mangaId={chapter.id}
+                data={info}
+                setWatch={setWatch}
+              />
+            ) : (
+              <div className="h-[20vh] lg:w-full flex-center flex-col gap-5">
+                <p className="text-center font-karla font-bold lg:text-lg">
+                  Oops!<br></br> It looks like this manga is not available.
+                </p>
+              </div>
+            )
+          ) : (
+            <div className="flex justify-center">
+              <div className="lds-ellipsis">
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+              </div>
+            </div>
+          )}
+
+          {info?.characters?.edges?.length > 0 && (
+            <div className="w-full">
+              <Characters info={info?.characters?.edges} />
+            </div>
+          )}
+
+          {info && rec && rec?.length !== 0 && (
+            <div className="w-full">
+              <Content
+                ids="recommendAnime"
+                section="Recommendations"
+                type="manga"
+                data={rec}
+              />
+            </div>
+          )}
+        </div>
+      </main>
+      <Footer />
+    </>
+  );
+}
+
+export async function getServerSideProps(context) {
+  const session = await getServerSession(context.req, context.res, authOptions);
+  const accessToken = session?.user?.token || null;
+
+  const { chapter } = context.query;
+  const [id1, id2] = context.query.id;
+
+  let cached;
+  let aniId, mangadexId;
+  let info, data, color, chapterNotFound;
+
+  if (String(id1).length > 6) {
+    aniId = id2;
+    mangadexId = id1;
+  } else {
+    aniId = id1;
+    mangadexId = id2;
+  }
+
+  if (chapter) {
+    // create random id string
+    chapterNotFound = Math.random().toString(36).substring(7);
+  }
+
+  if (aniId === "na" && mangadexId) {
+    const datas = await getAnifyInfo(mangadexId);
+
+    aniId =
+      datas.mappings.filter((i) => i.providerId === "anilist")[0]?.id || null;
+
+    if (!aniId) {
+      info = datas;
+      data = datas;
+      color = {
+        backgroundColor: `${"#ffff"}`,
+        color: "#000",
+      };
+      // return {
+      //   redirect: {
+      //     destination: "/404",
+      //     permanent: false,
+      //   },
+      // };
+    }
+  } else if (aniId && !mangadexId) {
+    // console.log({ aniId });
+    const response = await fetch("https://graphql.anilist.co/", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        ...(accessToken && { Authorization: `Bearer ${accessToken}` }),
+      },
+      body: JSON.stringify({
+        query: `query ($id: Int, $type: MediaType) {
+          Media (id: $id, type: $type) {
+            id
+            title {
+              romaji
+              english
+              native
+            }
+          }
+        }`,
+        variables: {
+          id: parseInt(aniId),
+          type: "MANGA",
+        },
+      }),
+    });
+    const aniListData = await response.json();
+    const info = aniListData?.data?.Media;
+
+    const mangaId = await getMangaId(
+      info?.title?.romaji,
+      info?.title?.english,
+      info?.title?.native
+    );
+    mangadexId = mangaId?.id;
+
+    if (!mangadexId) {
+      return {
+        redirect: {
+          destination: "/404",
+          permanent: false,
+        },
+      };
+    }
+
+    return {
+      redirect: {
+        destination: `/en/manga/${aniId}/${mangadexId}${
+          chapter ? "?chapter=404" : ""
+        }`,
+        permanent: true,
+      },
+    };
+  } else if (!aniId && mangadexId) {
+    const data = await getAnifyInfo(mangadexId);
+
+    aniId =
+      data.mappings.filter((i) => i.providerId === "anilist")[0]?.id || null;
+
+    if (!aniId) {
+      info = data;
+      // return {
+      //   redirect: {
+      //     destination: "/404",
+      //     permanent: false,
+      //   },
+      // };
+    }
+
+    return {
+      redirect: {
+        destination: `/en/manga/${aniId ? aniId : "na"}${`/${mangadexId}`}${
+          chapter ? "?chapter=404" : ""
+        }`,
+        permanent: true,
+      },
+    };
+  } else {
+    const getCached = await redis.get(`mangaPage:${mangadexId}`);
+
+    if (getCached) {
+      cached = JSON.parse(getCached);
+    }
+
+    // let chapters;
+
+    if (cached) {
+      data = cached.data;
+      info = cached.info;
+      color = cached.color;
+    } else {
+      data = await getAnifyInfo(mangadexId);
+
+      const aniListId =
+        data.mappings.filter((i) => i.providerId === "anilist")[0]?.id || null;
+
+      const response = await fetch("https://graphql.anilist.co/", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...(accessToken && { Authorization: `Bearer ${accessToken}` }),
+        },
+        body: JSON.stringify({
+          query: mediaInfoQuery,
+          variables: {
+            id: parseInt(aniListId),
+            type: "MANGA",
+          },
+        }),
+      });
+      const aniListData = await response.json();
+      if (aniListData?.data?.Media) info = aniListData?.data?.Media;
+
+      const textColor = setTxtColor(info?.color);
+
+      color = {
+        backgroundColor: `${info?.color || "#ffff"}`,
+        color: textColor,
+      };
+
+      await redis.set(
+        `mangaPage:${mangadexId}`,
+        JSON.stringify({ data, info, color }),
+        "ex",
+        60 * 60 * 24
+      );
+    }
+  }
+
+  return {
+    props: {
+      info: info || null,
+      anifyData: data || null,
+      chapterNotFound: chapterNotFound || null,
+      color: color || null,
+    },
+  };
+}
+
+function getBrightness(hexColor) {
+  if (!hexColor) {
+    return 200;
+  }
+  const rgb = hexColor
+    .match(/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i)
+    .slice(1)
+    .map((x) => parseInt(x, 16));
+  return (299 * rgb[0] + 587 * rgb[1] + 114 * rgb[2]) / 1000;
+}
+
+function setTxtColor(hexColor) {
+  const brightness = getBrightness(hexColor);
+  return brightness < 150 ? "#fff" : "#000";
+}
diff --git a/pages/en/manga/[id].js b/pages/en/manga/[id].js
deleted file mode 100644
index 6f25532..0000000
--- a/pages/en/manga/[id].js
+++ /dev/null
@@ -1,146 +0,0 @@
-import ChapterSelector from "@/components/manga/chapters";
-import HamburgerMenu from "@/components/manga/mobile/hamburgerMenu";
-import TopSection from "@/components/manga/info/topSection";
-import Footer from "@/components/shared/footer";
-import Head from "next/head";
-import { useEffect, useState } from "react";
-import { setCookie } from "nookies";
-import { getServerSession } from "next-auth";
-import { authOptions } from "../../api/auth/[...nextauth]";
-import getAnifyInfo from "@/lib/anify/info";
-import { NewNavbar } from "@/components/shared/NavBar";
-
-export default function Manga({ info, userManga }) {
-  const [domainUrl, setDomainUrl] = useState("");
-  const [firstEp, setFirstEp] = useState();
-  const chaptersData = info.chapters.data;
-
-  useEffect(() => {
-    setDomainUrl(window.location.origin);
-  }, []);
-
-  return (
-    <>
-      <Head>
-        <title>
-          {info
-            ? `Manga - ${
-                info.title.romaji || info.title.english || info.title.native
-              }`
-            : "Getting Info..."}
-        </title>
-        <meta name="twitter:card" content="summary_large_image" />
-        <meta
-          name="twitter:title"
-          content={`Moopa - ${info.title.romaji || info.title.english}`}
-        />
-        <meta
-          name="twitter:description"
-          content={`${info.description?.slice(0, 180)}...`}
-        />
-        <meta
-          name="twitter:image"
-          content={`${domainUrl}/api/og?title=${
-            info.title.romaji || info.title.english
-          }&image=${info.bannerImage || info.coverImage}`}
-        />
-        <meta
-          name="title"
-          data-title-romaji={info?.title?.romaji}
-          data-title-english={info?.title?.english}
-          data-title-native={info?.title?.native}
-        />
-      </Head>
-      <div className="min-h-screen w-screen flex flex-col items-center relative">
-        <HamburgerMenu />
-        <NewNavbar info={info} manga={true} />
-        <div className="flex flex-col w-screen items-center gap-5 md:gap-10 py-10 pt-nav">
-          <div className="flex-center w-full relative z-30">
-            <TopSection info={info} firstEp={firstEp} setCookie={setCookie} />
-            <>
-              <div className="absolute hidden md:block z-20 bottom-0 h-1/2 w-full bg-secondary" />
-              <div className="absolute hidden md:block z-20 top-0 h-1/2 w-full bg-transparent" />
-            </>
-          </div>
-          <div className="w-[90%] xl:w-[70%] min-h-[35vh] z-40">
-            {chaptersData.length > 0 ? (
-              <ChapterSelector
-                chaptersData={chaptersData}
-                data={info}
-                setFirstEp={setFirstEp}
-                setCookie={setCookie}
-                userManga={userManga}
-              />
-            ) : (
-              <p>No Chapter Available :(</p>
-            )}
-          </div>
-        </div>
-        <Footer />
-      </div>
-    </>
-  );
-}
-
-export async function getServerSideProps(context) {
-  const session = await getServerSession(context.req, context.res, authOptions);
-  const accessToken = session?.user?.token || null;
-
-  const { id } = context.query;
-  const key = process.env.API_KEY;
-  const data = await getAnifyInfo(id, key);
-
-  let userManga = null;
-
-  if (session) {
-    const response = await fetch("https://graphql.anilist.co/", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-        ...(accessToken && { Authorization: `Bearer ${accessToken}` }),
-      },
-      body: JSON.stringify({
-        query: `
-        query ($id: Int) {
-              Media (id: $id) {
-                mediaListEntry {
-                  status
-                  progress
-                  progressVolumes
-                  status
-                }
-                id
-                idMal
-                title {
-                  romaji
-                  english
-                  native
-                }
-              }
-            }
-        `,
-        variables: {
-          id: parseInt(id),
-        },
-      }),
-    });
-    const data = await response.json();
-    const user = data?.data?.Media?.mediaListEntry;
-    if (user) {
-      userManga = user;
-    }
-  }
-
-  if (!data?.chapters) {
-    return {
-      notFound: true,
-    };
-  }
-
-  return {
-    props: {
-      info: data,
-      userManga,
-    },
-  };
-}
diff --git a/pages/en/manga/read/[...params].js b/pages/en/manga/read/[...params].js
index a7769e2..1076601 100644
--- a/pages/en/manga/read/[...params].js
+++ b/pages/en/manga/read/[...params].js
@@ -10,13 +10,27 @@ import { authOptions } from "../../../api/auth/[...nextauth]";
 import BottomBar from "@/components/manga/mobile/bottomBar";
 import TopBar from "@/components/manga/mobile/topBar";
 import Head from "next/head";
-import nookies from "nookies";
 import ShortCutModal from "@/components/manga/modals/shortcutModal";
 import ChapterModal from "@/components/manga/modals/chapterModal";
-import getAnifyPage from "@/lib/anify/page";
+// import getConsumetPages from "@/lib/consumet/manga/getPage";
+import { mediaInfoQuery } from "@/lib/graphql/query";
+// import { redis } from "@/lib/redis";
+// import getConsumetChapters from "@/lib/consumet/manga/getChapters";
+import { toast } from "sonner";
+import axios from "axios";
+import { redis } from "@/lib/redis";
+import getAnifyInfo from "@/lib/anify/info";
 
-export default function Read({ data, currentId, sessions }) {
-  const [info, setInfo] = useState();
+export default function Read({
+  data,
+  info,
+  chaptersData,
+  currentId,
+  sessions,
+  provider,
+  mangaDexId,
+  number,
+}) {
   const [chapter, setChapter] = useState([]);
   const [layout, setLayout] = useState(1);
 
@@ -30,8 +44,8 @@ export default function Read({ data, currentId, sessions }) {
   const [paddingX, setPaddingX] = useState(208);
   const [scaleImg, setScaleImg] = useState(1);
 
-  const [nextChapterId, setNextChapterId] = useState(null);
-  const [prevChapterId, setPrevChapterId] = useState(null);
+  const [nextChapter, setNextChapter] = useState(null);
+  const [prevChapter, setPrevChapter] = useState(null);
 
   const [currentChapter, setCurrentChapter] = useState(null);
   const [currentPage, setCurrentPage] = useState(0);
@@ -40,17 +54,22 @@ export default function Read({ data, currentId, sessions }) {
 
   const router = useRouter();
 
+  // console.log({ info });
+
   useEffect(() => {
-    hasRun.current = false;
-  }, [currentId]);
+    toast.message("This page is still under development", {
+      description: "If you found any bugs, please report it to us!",
+      position: "top-center",
+      duration: 10000,
+    });
+  }, []);
 
   useEffect(() => {
-    const get = JSON.parse(localStorage.getItem("manga"));
-    const chapters = get.manga;
+    hasRun.current = false;
+    const chapters = chaptersData.find((x) => x.providerId === provider);
     const currentChapter = chapters.chapters?.find((x) => x.id === currentId);
 
     setCurrentChapter(currentChapter);
-    setInfo(get.data);
     setChapter(chapters);
 
     if (Array.isArray(chapters?.chapters)) {
@@ -60,25 +79,36 @@ export default function Read({ data, currentId, sessions }) {
       if (currentIndex !== -1) {
         const nextChapter = chapters.chapters[currentIndex - 1];
         const prevChapter = chapters.chapters[currentIndex + 1];
-        setNextChapterId(nextChapter ? nextChapter.id : null);
-        setPrevChapterId(prevChapter ? prevChapter.id : null);
+        setNextChapter(nextChapter ? nextChapter : null);
+        setPrevChapter(prevChapter ? prevChapter : null);
       }
     }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentId]);
 
   useEffect(() => {
     const handleKeyDown = (event) => {
-      if (event.key === "ArrowRight" && event.ctrlKey && nextChapterId) {
+      event.preventDefault();
+      if (event.key === "ArrowRight" && event.ctrlKey && nextChapter?.id) {
         router.push(
-          `/en/manga/read/${chapter.providerId}?id=${
-            info.id
-          }&chapterId=${encodeURIComponent(nextChapterId)}`
+          `/en/manga/read/${
+            chapter.providerId
+          }?id=${mangaDexId}&chapterId=${encodeURIComponent(nextChapter?.id)}${
+            info?.id?.length > 6 ? "" : `&anilist=${info?.id}`
+          }&num=${nextChapter?.number}`
         );
-      } else if (event.key === "ArrowLeft" && event.ctrlKey && prevChapterId) {
+      } else if (
+        event.key === "ArrowLeft" &&
+        event.ctrlKey &&
+        prevChapter?.id
+      ) {
         router.push(
-          `/en/manga/read/${chapter.providerId}?id=${
-            info.id
-          }&chapterId=${encodeURIComponent(prevChapterId)}`
+          `/en/manga/read/${
+            chapter.providerId
+          }?id=${mangaDexId}&chapterId=${encodeURIComponent(prevChapter?.id)}${
+            info?.id?.length > 6 ? "" : `&anilist=${info?.id}`
+          }&num=${prevChapter?.number}`
         );
       }
       if (event.code === "Slash" && event.ctrlKey) {
@@ -99,7 +129,9 @@ export default function Read({ data, currentId, sessions }) {
     return () => {
       window.removeEventListener("keydown", handleKeyDown);
     };
-  }, [nextChapterId, prevChapterId, visible, isKeyOpen, paddingX]);
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [nextChapter?.id, prevChapter?.id, visible, isKeyOpen, paddingX]);
 
   return (
     <>
@@ -134,13 +166,15 @@ export default function Read({ data, currentId, sessions }) {
             <TopBar info={info} />
             <BottomBar
               id={info?.id}
-              prevChapter={prevChapterId}
-              nextChapter={nextChapterId}
+              prevChapter={prevChapter}
+              nextChapter={nextChapter}
               currentPage={currentPage}
               chapter={chapter}
-              page={data}
+              data={data}
               setSeekPage={setSeekPage}
               setIsOpen={setIsChapOpen}
+              number={number}
+              mangadexId={mangaDexId}
             />
           </>
         )}
@@ -149,13 +183,17 @@ export default function Read({ data, currentId, sessions }) {
             data={chapter}
             page={data}
             info={info}
+            number={number}
+            mediaId={mangaDexId}
             currentId={currentId}
             setSeekPage={setSeekPage}
+            providerId={provider}
           />
         )}
         {layout === 1 && (
           <FirstPanel
             aniId={info?.id}
+            providerId={provider}
             data={data}
             hasRun={hasRun}
             currentId={currentId}
@@ -164,19 +202,22 @@ export default function Read({ data, currentId, sessions }) {
             visible={visible}
             setVisible={setVisible}
             chapter={chapter}
-            nextChapter={nextChapterId}
-            prevChapter={prevChapterId}
+            nextChapter={nextChapter}
+            prevChapter={prevChapter}
             paddingX={paddingX}
             session={sessions}
             mobileVisible={mobileVisible}
             setMobileVisible={setMobileVisible}
             setCurrentPage={setCurrentPage}
+            mangadexId={mangaDexId}
+            number={number}
           />
         )}
         {layout === 2 && (
           <SecondPanel
             aniId={info?.id}
             data={data}
+            chapterData={chapter}
             hasRun={hasRun}
             currentChapter={currentChapter}
             currentId={currentId}
@@ -185,12 +226,14 @@ export default function Read({ data, currentId, sessions }) {
             visible={visible}
             setVisible={setVisible}
             session={sessions}
+            providerId={provider}
           />
         )}
         {layout === 3 && (
           <ThirdPanel
             aniId={info?.id}
             data={data}
+            chapterData={chapter}
             hasRun={hasRun}
             currentId={currentId}
             currentChapter={currentChapter}
@@ -202,6 +245,7 @@ export default function Read({ data, currentId, sessions }) {
             scaleImg={scaleImg}
             setMobileVisible={setMobileVisible}
             mobileVisible={mobileVisible}
+            providerId={provider}
           />
         )}
         {visible && (
@@ -224,42 +268,130 @@ export default function Read({ data, currentId, sessions }) {
         )}
       </div>
     </>
+    // <p></p>
   );
 }
 
-export async function getServerSideProps(context) {
-  const cookies = nookies.get(context);
+async function fetchAnifyPages(id, number, provider, readId, key) {
+  try {
+    let cached;
 
+    cached = await redis.get(`pages:${readId}`);
+
+    if (cached) {
+      return JSON.parse(cached);
+    }
+
+    const url = `https://api.anify.tv/pages?id=${id}&chapterNumber=${number}&providerId=${provider}&readId=${encodeURIComponent(
+      readId
+    )}`;
+
+    const { data } = await axios.get(url);
+
+    if (!data) {
+      return null;
+    }
+
+    await redis.set(
+      `pages:${readId}`,
+      JSON.stringify(data),
+      "EX",
+      60 * 60 * 24 * 7
+    );
+
+    return data;
+  } catch (error) {
+    return { error: "Error fetching data" };
+  }
+}
+
+export async function getServerSideProps(context) {
   const key = process.env.API_KEY;
 
   const query = context.query;
   const providerId = query.params[0];
   const chapterId = query.chapterId;
   const mediaId = query.id;
+  const number = query.num;
+  const anilistId = query.anilist;
+
+  const session = await getServerSession(context.req, context.res, authOptions);
+  const accessToken = session?.user?.token || null;
+
+  // const data = await getConsumetPages(mediaId, providerId, chapterId, key);
+  // const chapters = await getConsumetChapters(mediaId, redis);
+
+  const dataManga = await fetchAnifyPages(
+    mediaId,
+    number,
+    providerId,
+    chapterId,
+    mediaId,
+    key
+  );
+
+  let info;
 
-  if (!cookies.manga || cookies.manga !== mediaId) {
+  if (anilistId) {
+    const response = await fetch("https://graphql.anilist.co/", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        ...(accessToken && { Authorization: `Bearer ${accessToken}` }),
+      },
+      body: JSON.stringify({
+        query: mediaInfoQuery,
+        variables: {
+          id: parseInt(anilistId),
+          type: "MANGA",
+        },
+      }),
+    });
+    const json = await response.json();
+    info = json?.data?.Media;
+  } else {
+    const datas = await getAnifyInfo(mediaId);
+    if (datas) {
+      info = datas;
+    }
+  }
+
+  const chapters = await (
+    await fetch("https://api.anify.tv/chapters/" + mediaId + "?apikey=" + key)
+  ).json();
+
+  if ((dataManga && dataManga?.error) || dataManga?.length === 0) {
     return {
       redirect: {
-        destination: `/en/manga/${mediaId}`,
+        destination: `/en/manga/${anilistId}?chapter=404`,
       },
     };
   }
 
-  const session = await getServerSession(context.req, context.res, authOptions);
-
-  const data = await getAnifyPage(mediaId, providerId, chapterId, key);
+  /*
+  const { data } = await axios.get(
+    `https://beta.moopa.live/api/v2/info/${romaji}${
+      english ? `/${english}` : ""
+    }${native ? `/${native}` : ""}?id=${anilistId}`
+  );
 
   if (data.error) {
     return {
       notFound: true,
     };
   }
+  */
 
   return {
     props: {
-      data: data,
+      data: dataManga,
+      mangaDexId: mediaId,
+      info: info,
+      number: number,
+      chaptersData: chapters,
       currentId: chapterId,
       sessions: session,
+      provider: providerId,
     },
   };
 }
author	Factiven <[email protected]>	2023-10-22 19:43:17 +0700
committer	GitHub <[email protected]>	2023-10-22 19:43:17 +0700
commit	f801f8f422954b884a6541321dba0669ee9d6173 (patch)
tree	e0d5e106b99e9b4e0a4c4bf7bb0464617db85b8d /pages/en/manga
parent	Bump @babel/traverse from 7.22.8 to 7.23.2 (#90) (diff)
download	moopa-4.2.0.tar.xz moopa-4.2.0.zip