From b365d89a11adf40d37b78292f121b890e960d0e8 Mon Sep 17 00:00:00 2001
From: Factiven <dabinaya.fathan@gmail.com>
Date: Thu, 13 Apr 2023 16:03:57 +0700
Subject: update 2nd

---
 pages/anime/[...id].js         |  38 +++++++-----
 pages/anime/watch/[...info].js | 131 +++++++++++++++++++++++++++++++++++++----
 2 files changed, 143 insertions(+), 26 deletions(-)

(limited to 'pages/anime')

diff --git a/pages/anime/[...id].js b/pages/anime/[...id].js
index d42a394..c2e69e1 100644
--- a/pages/anime/[...id].js
+++ b/pages/anime/[...id].js
@@ -75,7 +75,9 @@ export default function Himitsu({
     if (!Array.isArray(existingData)) {
       existingData = [];
     }
-    const index = existingData.findIndex((item) => item.title === props.title);
+    const index = existingData.findIndex(
+      (item) => item.title.romaji === props.title.romaji
+    );
     if (index !== -1) {
       existingData.splice(index, 1);
     }
@@ -176,13 +178,17 @@ export default function Himitsu({
                             href={`/anime/watch/${epi1[0].id}/${info.id}`}
                             onClick={() =>
                               handleStore({
-                                title:
-                                  info.title?.english ||
-                                  info.title.romaji ||
-                                  info.title.native,
+                                title: {
+                                  romaji:
+                                    info.title.romaji ||
+                                    info.title.english ||
+                                    info.title.native,
+                                },
                                 description: info.description,
-                                image: info.image,
-                                id: info.id,
+                                coverImage: {
+                                  extraLarge: info.image,
+                                },
+                                id: parseInt(info.id),
                               })
                             }
                           >
@@ -358,7 +364,7 @@ export default function Himitsu({
                                     className="object-cover h-full w-full shrink-0 rounded-l-md"
                                   />
                                 </div>
-                                <div className="min-w-[80%] h-full grid px-3 items-center">
+                                <div className="h-full grid px-3 items-center">
                                   <div className="text-action font-outfit font-bold">
                                     {relation.relationType}
                                   </div>
@@ -415,13 +421,17 @@ export default function Himitsu({
                             <Link
                               onClick={() =>
                                 handleStore({
-                                  title:
-                                    info.title?.english ||
-                                    info.title.romaji ||
-                                    info.title.native,
+                                  title: {
+                                    romaji:
+                                      info.title.romaji ||
+                                      info.title.english ||
+                                      info.title.native,
+                                  },
                                   description: info.description,
-                                  image: info.image,
-                                  id: info.id,
+                                  coverImage: {
+                                    extraLarge: info.image,
+                                  },
+                                  id: parseInt(info.id),
                                 })
                               }
                               href={`/anime/watch/${episode.id}/${info.id}/${
diff --git a/pages/anime/watch/[...info].js b/pages/anime/watch/[...info].js
index 73e04f5..ed1a50b 100644
--- a/pages/anime/watch/[...info].js
+++ b/pages/anime/watch/[...info].js
@@ -9,17 +9,59 @@ import Head from "next/head";
 import { useEffect, useState } from "react";
 import Modal from "../../../components/modal";
 
+import { useNotification } from "../../../lib/useNotify";
+
+import { useSession, signIn, signOut } from "next-auth/react";
+import AniList from "../../../components/media/aniList";
+
+import { AnimatePresence, motion as m } from "framer-motion";
+import Navbar from "../../../components/navbar";
+import { Navigasi } from "../..";
+
 export default function Info({ info }) {
+  const { data: session, status } = useSession();
   const title = info.aniData.title.romaji || info.aniData.title.english;
   const data = info.aniData;
   const fallback = info.epiFallback;
+  const { Notification: NotificationComponent, show } = useNotification();
+
+  // console.log(session);
+
+  const playingEpisode = data.episodes
+    .filter((item) => item.id == info.id)
+    .map((item) => item.number);
 
   const [open, setOpen] = useState(false);
+  const [aniStatus, setAniStatus] = useState("");
+  const [aniProgress, setAniProgress] = useState(parseInt(playingEpisode));
+
+  const handleStatus = (e) => {
+    setAniStatus(e.target.value);
+  };
+
+  const handleProgress = (e) => {
+    const value = parseFloat(e.target.value);
+    if (!isNaN(value) && value >= 0 && value <= data.totalEpisodes) {
+      setAniProgress(value);
+    }
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const formData = { status: aniStatus, progress: aniProgress };
+    console.log(formData);
+  };
 
   const playingTitle = data.episodes
     .filter((item) => item.id == info.id)
     .map((item) => item.title);
 
+  if (status === "loading") {
+    return <p>Loading...</p>;
+  }
+
+  console.log(parseInt(playingEpisode));
+
   return (
     <>
       <Head>
@@ -27,29 +69,91 @@ export default function Info({ info }) {
           {fallback ? data.title.romaji || data.title.english : playingTitle}
         </title>
       </Head>
+
+      <NotificationComponent />
+
       <Modal open={open} onClose={() => setOpen(false)}>
-        <div className="bg-[#202020] rounded-lg w-[268px] text-center">
+        <div className="bg-[#202020] rounded-lg text-center">
           <div className="p-5 grid gap-2 justify-center place-items-center">
             <h1 className="text-md font-extrabold font-karla">
               Save this Anime to Your List
             </h1>
-            <h1 className="text-sm font-karla font-extralight w-[205px]">
-              Are you sure you want to save this anime to your list?
-            </h1>
-            <div className="flex gap-12 items-center pt-3 justify-between">
-              <button className="p-2 font-karla font-extrabold text-sm bg-[#93FF3E] w-[84px] rounded-[10px] text-black shadow">
-                YES
-              </button>
+            {!session && (
               <button
-                onClick={() => setOpen(false)}
-                className="p-2 font-karla font-extrabold text-sm bg-white w-[84px] rounded-[10px] text-black shadow-lg"
+                className="flex items-center bg-[#3a3a3a] mt-4 rounded-md text-white p-1"
+                onClick={() => signIn("AniListProvider")}
               >
-                NO
+                <h1 className="px-1 font-bold font-karla">
+                  Login with AniList
+                </h1>
+                <div className="scale-[60%] pb-[1px]">
+                  <AniList />
+                </div>
               </button>
-            </div>
+            )}
+            {session && (
+              <>
+                <form
+                  onSubmit={handleSubmit}
+                  className="grid grid-cols-2 gap-5 max-w-sm mx-auto mt-5 items-center"
+                >
+                  <div className="mb-4">
+                    <label
+                      htmlFor="option"
+                      className="block font-bold mb-2 text-sm"
+                    >
+                      Select an option
+                    </label>
+                    <select
+                      id="option"
+                      value={aniStatus}
+                      onChange={handleStatus}
+                      className="form-select block w-full px-2 py-1 rounded-lg shadow-sm focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
+                    >
+                      {aniStatus === "" && (
+                        <option value="" hidden>
+                          Select an option
+                        </option>
+                      )}
+                      <option value="option1">Option 1</option>
+                      <option value="option2">Option 2</option>
+                      <option value="option3">Option 3</option>
+                    </select>
+                  </div>
+                  <div className="mb-4">
+                    <label
+                      htmlFor="number"
+                      className="block text-sm font-bold mb-2"
+                    >
+                      Episode Progress
+                    </label>
+                    <input
+                      id="number"
+                      type="number"
+                      step="1"
+                      min="0"
+                      max={data.totalEpisodes}
+                      className="form-input block w-full px-2 py-1 rounded-lg shadow-sm focus:outline-none focus:shadow-outline-blue focus:border-blue-300"
+                      value={aniProgress}
+                      onChange={handleProgress}
+                    />
+                  </div>
+                  <div className="col-start-2 row-start-2 w-full justify-items-end text-center">
+                    <button
+                      type="submit"
+                      className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+                      onClick={() => setOpen(false)}
+                    >
+                      Submit
+                    </button>
+                  </div>
+                </form>
+              </>
+            )}
           </div>
         </div>
       </Modal>
+      <Navigasi />
       <div className="min-h-screen flex flex-col lg:gap-0 gap-5 lg:flex-row lg:py-10 lg:px-10 justify-start w-screen">
         <div className="w-screen lg:w-[67%]">
           <div className="h-auto aspect-video z-20">
@@ -59,6 +163,9 @@ export default function Info({ info }) {
               seek={info.seek}
               titles={title}
               id={info.id}
+              progress={parseInt(playingEpisode)}
+              session={session}
+              aniId={parseInt(data.id)}
             />
           </div>
           <div>
-- 
cgit v1.2.3