1 files changed, 126 insertions, 0 deletions
diff --git a/lib/anilist/useAnilist.js b/lib/anilist/useAnilist.js
new file mode 100644
index 0000000..4ec55a9
--- /dev/null
+++ b/lib/anilist/useAnilist.js
@@ -0,0 +1,126 @@
+import { useState, useEffect } from "react";
+import { toast } from "react-toastify";
+
+function useMedia(username, accessToken, status) {
+  const [media, setMedia] = useState([]);
+
+  const fetchGraphQL = async (query, variables) => {
+    const response = await fetch("https://graphql.anilist.co/", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ query, variables }),
+    });
+    return response.json();
+  };
+
+  useEffect(() => {
+    if (!username || !accessToken) return;
+    const queryMedia = `
+    query ($username: String, $status: MediaListStatus) {
+      MediaListCollection(userName: $username, type: ANIME, status: $status) {
+        lists {
+          status
+          name
+          entries {
+            id
+            mediaId
+            status
+            progress
+            score
+            media {
+              id
+              status
+              nextAiringEpisode {
+                  timeUntilAiring
+                  episode
+              }
+              title {
+                english
+                romaji
+              }
+              episodes
+              coverImage {
+                large
+              }
+            }
+          }
+        }
+      }
+    }
+  `;
+    fetchGraphQL(queryMedia, { username, status: status?.stats }).then((data) =>
+      setMedia(data.data.MediaListCollection.lists)
+    );
+  }, [username, accessToken, status?.stats]);
+
+  return media;
+}
+
+export function useAniList(session, stats) {
+  const accessToken = session?.user?.token;
+  const username = session?.user?.name;
+  const status = stats || null;
+  const media = useMedia(username, accessToken, status);
+
+  const fetchGraphQL = async (query, variables) => {
+    const response = await fetch("https://graphql.anilist.co/", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: accessToken ? `Bearer ${accessToken}` : undefined,
+      },
+      body: JSON.stringify({ query, variables }),
+    });
+    return response.json();
+  };
+
+  const markComplete = (mediaId) => {
+    if (!accessToken) return;
+    const completeQuery = `
+      mutation($mediaId: Int ) {
+        SaveMediaListEntry(mediaId: $mediaId, status: COMPLETED) {
+          id
+          mediaId
+          status
+        }
+      }
+    `;
+    fetchGraphQL(completeQuery, { mediaId }).then((data) =>
+      console.log({ Complete: data })
+    );
+  };
+
+  const markProgress = (mediaId, progress, stats, volumeProgress) => {
+    if (!accessToken) return;
+    const progressWatched = `
+      mutation($mediaId: Int, $progress: Int, $status: MediaListStatus, $progressVolumes: Int) {
+        SaveMediaListEntry(mediaId: $mediaId, progress: $progress, status: $status, progressVolumes: $progressVolumes) {
+          id
+          mediaId
+          progress
+          status
+        }
+      }
+  `;
+    fetchGraphQL(progressWatched, {
+      mediaId,
+      progress,
+      status: stats,
+      progressVolumes: volumeProgress,
+    }).then(() => {
+      console.log(`Progress Updated: ${progress}`);
+      toast.success(`Progress Updated: ${progress}`, {
+        position: "bottom-right",
+        autoClose: 5000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        draggable: true,
+        theme: "dark",
+      });
+    });
+  };
+
+  return { media, markComplete, markProgress };
+}