update 2nd

3 files changed, 118 insertions, 6 deletions

diff --git a/lib/AniList.js b/lib/AniList.js
index 2b65789..f602dad 100644
--- a/lib/AniList.js
+++ b/lib/AniList.js
@@ -3,7 +3,6 @@ export async function aniListData({ sort, page = 1 }) {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
-      Accept: "application/json",
     },
     body: JSON.stringify({
       query: `
diff --git a/lib/useAnilist.js b/lib/useAnilist.js
index b95293f..12317f8 100644
--- a/lib/useAnilist.js
+++ b/lib/useAnilist.js
@@ -4,6 +4,8 @@ export function useAniList(session) {
   const [media, setMedia] = useState([]);
   // const [aniAdvanceSearch, setAniAdvanceSearch] = useState([]);
 
+  // Queries
+
   const queryMedia = `
     query ($username: String) {
       MediaListCollection(userName: $username, type: ANIME) {
@@ -62,6 +64,29 @@ export function useAniList(session) {
       }
     `;
 
+  // Mutations
+
+  const completeQuery = `
+      mutation($mediaId: Int ) {
+        SaveMediaListEntry(mediaId: $mediaId, status: COMPLETED) {
+          id
+          mediaId
+          status
+        }
+      }
+    `;
+
+  const progressWatched = `
+      mutation($mediaId: Int, $progress: Int) {
+        SaveMediaListEntry(mediaId: $mediaId, progress: $progress) {
+          id
+          mediaId
+          progress
+          status
+        }
+      }
+  `;
+
   const username = session?.user?.name;
   const accessToken = session?.user?.token;
 
@@ -89,9 +114,55 @@ export function useAniList(session) {
     fetchData();
   }, [queryMedia, username, accessToken]);
 
-  // useEffect(() => {
-  //   async function fetchData() {}
-  // });
+  async function markComplete(mediaId) {
+    if (!accessToken) return;
+    const response = await fetch("https://graphql.anilist.co/", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${accessToken}`,
+      },
+      body: JSON.stringify({
+        query: completeQuery,
+        variables: {
+          mediaId: mediaId,
+        },
+      }),
+    });
+    if (response.ok) {
+      const data = await response.json();
+      console.log({ Complete: data });
+    } else if (response.status === 401) {
+      console.log("Unauthorized");
+    } else if (response.status === 400) {
+      console.log("validation error");
+    }
+  }
+
+  async function markProgress(mediaId, progress) {
+    if (!accessToken) return;
+    const response = await fetch("https://graphql.anilist.co/", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${accessToken}`,
+      },
+      body: JSON.stringify({
+        query: progressWatched,
+        variables: {
+          mediaId: mediaId,
+          progress: progress,
+        },
+      }),
+    });
+    if (response.ok) {
+      console.log("Progress Updated");
+    } else if (response.status === 401) {
+      console.log("Unauthorized");
+    } else if (response.status === 400) {
+      console.log("validation error");
+    }
+  }
 
   async function aniAdvanceSearch(
     search,
@@ -123,14 +194,15 @@ export function useAniList(session) {
     });
 
     const datas = await response.json();
-    console.log(search);
+    // console.log(search);
     const data = datas.data.Page;
     return data;
   }
 
   return {
     media,
-    // updateMediaEntry,
+    markComplete,
     aniAdvanceSearch,
+    markProgress,
   };
 }
diff --git a/lib/useNotify.js b/lib/useNotify.js
new file mode 100644
index 0000000..e6ba7e6
--- /dev/null
+++ b/lib/useNotify.js
@@ -0,0 +1,41 @@
+import { useState, useCallback } from "react";
+import { motion as m, AnimatePresence } from "framer-motion";
+
+export const useNotification = () => {
+  const [showNotification, setShowNotification] = useState(false);
+  const [notificationMessage, setNotificationMessage] = useState("");
+
+  const show = useCallback(
+    (message) => {
+      setNotificationMessage(message);
+      setShowNotification(true);
+      setTimeout(() => {
+        setShowNotification(false);
+      }, 5000);
+    },
+    [setNotificationMessage, setShowNotification]
+  );
+
+  const NotificationComponent = () => {
+    return (
+      <AnimatePresence>
+        {showNotification && (
+          <m.div
+            key="teasa"
+            transition={{ duration: 0.5 }}
+            initial={{ opacity: 0, y: 100 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: 100 }}
+            className="z-50 fixed bottom-10 w-screen flex justify-center text-center"
+          >
+            <div className="bg-green-600 text-white  px-2 py-2 font-bold rounded-[30px]">
+              {notificationMessage}
+            </div>
+          </m.div>
+        )}
+      </AnimatePresence>
+    );
+  };
+
+  return { Notification: NotificationComponent, show };
+};