Editor List v0.5

2 files changed, 12 insertions, 28 deletions

diff --git a/components/listEditor.js b/components/listEditor.js
index ed54987..41a3172 100644
--- a/components/listEditor.js
+++ b/components/listEditor.js
@@ -9,7 +9,7 @@ const ListEditor = ({ animeId, session, stats, prg, max }) => {
 
   const handleSubmit = async (e) => {
     e.preventDefault();
-    console.log("Submitting", status, progress);
+    console.log("Submitting", status?.name, progress);
     try {
       const response = await fetch("https://graphql.anilist.co/", {
         method: "POST",
@@ -81,11 +81,10 @@ const ListEditor = ({ animeId, session, stats, prg, max }) => {
             <select
               name="status"
               id="status"
-              value={status}
+              value={status?.value}
               onChange={(e) => setStatus(e.target.value)}
               className="rounded-sm px-2 py-1 bg-[#363642] w-[50%] sm:w-[150px] text-sm sm:text-base"
             >
-              <option value="">Select a status</option>
               <option value="CURRENT">Watching</option>
               <option value="COMPLETED">Completed</option>
               <option value="PAUSED">Paused</option>
diff --git a/pages/anime/[...id].js b/pages/anime/[...id].js
index 5e66133..ef54b1b 100644
--- a/pages/anime/[...id].js
+++ b/pages/anime/[...id].js
@@ -166,7 +166,6 @@ export default function Info() {
   const [time, setTime] = useState(0);
   const { id } = useRouter().query;
 
-  const [aniStatus, setAniStatus] = useState(statuses);
   const [aniProgress, setAniProgress] = useState(0);
   const [epiStatus, setEpiStatus] = useState("ok");
 
@@ -288,23 +287,17 @@ export default function Info() {
               setProgress(gut?.progress);
               setAniProgress(parseInt(gut?.progress));
               if (gut.status === "CURRENT") {
-                setStatuses("Watching");
-                setAniStatus("Watching");
+                setStatuses({ name: "Watching", value: "CURRENT" });
               } else if (gut.status === "PLANNING") {
-                setStatuses("Plan to watch");
-                setAniStatus("Plan to watch");
+                setStatuses({ name: "Plan to watch", value: "PLANNING" });
               } else if (gut.status === "COMPLETED") {
-                setStatuses("Completed");
-                setAniStatus("Completed");
+                setStatuses({ name: "Completed", value: "COMPLETED" });
               } else if (gut.status === "DROPPED") {
-                setStatuses("Dropped");
-                setAniStatus("Dropped");
+                setStatuses({ name: "Dropped", value: "DROPPED" });
               } else if (gut.status === "PAUSED") {
-                setStatuses("Paused");
-                setAniStatus("Paused");
+                setStatuses({ name: "Paused", value: "PAUSED" });
               } else if (gut.status === "REPEATING") {
-                setStatuses("Rewatching");
-                setAniStatus("Rewatching");
+                setStatuses({ name: "Rewatching", value: "REPEATING" });
               }
             }
           }
@@ -338,16 +331,6 @@ export default function Info() {
     document.body.style.overflow = "auto";
   }
 
-  function handleSubmit(e) {
-    e.preventDefault();
-    const formData = { status: aniStatus, progress: aniProgress };
-    console.log(formData);
-  }
-
-  function handleProgress(e) {
-    setAniProgress(e.target.value);
-  }
-
   // console.log(progress);
 
   return (
@@ -402,6 +385,7 @@ export default function Info() {
                     info?.coverImage?.extraLarge ||
                     info?.coverImage.large
                   }
+                  priority={true}
                   alt="banner anime"
                   height={1000}
                   width={1000}
@@ -453,7 +437,7 @@ export default function Info() {
                         >
                           {loading
                             ? statuses
-                              ? statuses
+                              ? statuses.name
                               : "Add to List"
                             : "Loading..."}
                         </button>
@@ -498,6 +482,7 @@ export default function Info() {
                         src={
                           info.coverImage.extraLarge || info.coverImage.large
                         }
+                        priority={true}
                         alt="poster anime"
                         height={700}
                         width={700}
@@ -510,7 +495,7 @@ export default function Info() {
                       >
                         {loading
                           ? statuses
-                            ? statuses
+                            ? statuses.name
                             : "Add to List"
                           : "Loading..."}
                       </button>