From f287e8225892266acf162ba94ee31ce623e06890 Mon Sep 17 00:00:00 2001
From: Factiven <dabinaya.fathan@gmail.com>
Date: Fri, 28 Apr 2023 13:36:29 +0700
Subject: Editor List v0.2

---
 components/listEditor.js | 15 ++++++++++-----
 components/useAlert.js   |  6 ++++--
 pages/anime/[...id].js   |  2 +-
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/components/listEditor.js b/components/listEditor.js
index f9e8ab8..d90e481 100644
--- a/components/listEditor.js
+++ b/components/listEditor.js
@@ -9,6 +9,7 @@ const ListEditor = ({ animeId, session, stats, prg, max }) => {
 
   const handleSubmit = async (e) => {
     e.preventDefault();
+    console.log("Submitting", status, progress);
     try {
       const response = await fetch("https://graphql.anilist.co/", {
         method: "POST",
@@ -29,12 +30,16 @@ const ListEditor = ({ animeId, session, stats, prg, max }) => {
           `,
           variables: {
             mediaId: animeId,
-            progress: progress ? parseInt(progress) : null,
+            progress: progress,
             status: status || null,
           },
         }),
       });
       const { data } = await response.json();
+      if (data.SaveMediaListEntry === null) {
+        showAlert("Something went wrong", "error");
+        return;
+      }
       console.log("Saved media list entry", data);
       //   success();
       showAlert("Media list entry saved", "success");
@@ -45,7 +50,7 @@ const ListEditor = ({ animeId, session, stats, prg, max }) => {
   };
 
   return (
-    <div className="relative">
+    <div className="relative bg-secondary">
       {message && (
         <m.div
           initial={{ opacity: 0, y: 10 }}
@@ -71,7 +76,7 @@ const ListEditor = ({ animeId, session, stats, prg, max }) => {
             id="status"
             value={status}
             onChange={(e) => setStatus(e.target.value)}
-            className="rounded-md px-2 py-1"
+            className="rounded-md px-2 py-1 bg-[#363642]"
           >
             <option value="">Select a status</option>
             <option value="CURRENT">Watching</option>
@@ -92,13 +97,13 @@ const ListEditor = ({ animeId, session, stats, prg, max }) => {
             value={progress}
             max={max}
             onChange={(e) => setProgress(e.target.value)}
-            className="rounded-md px-2 py-1"
+            className="rounded-md px-2 py-1 bg-[#363642]"
             min="0"
           />
         </div>
         <button
           type="submit"
-          className="bg-[#3a3a3a] text-white rounded-md mt-2 py-1 px-4"
+          className="bg-[#363642] text-white rounded-md mt-2 py-1 px-4"
         >
           Save
         </button>
diff --git a/components/useAlert.js b/components/useAlert.js
index 7426096..fa82c42 100644
--- a/components/useAlert.js
+++ b/components/useAlert.js
@@ -10,8 +10,10 @@ const useAlert = () => {
     setTimeout(() => {
       setMessage("");
       setType("");
-      window.location.reload();
-    }, 5000);
+      if (type === "success") {
+        window.location.reload();
+      }
+    }, 3000);
   };
 
   return { message, type, showAlert };
diff --git a/pages/anime/[...id].js b/pages/anime/[...id].js
index f26c70d..99973d4 100644
--- a/pages/anime/[...id].js
+++ b/pages/anime/[...id].js
@@ -368,7 +368,7 @@ export default function Info() {
               </button>
             </div>
           )}
-          {session && info && progress && (
+          {session && loading && (
             <ListEditor
               animeId={info?.id}
               session={session}
-- 
cgit v1.2.3