Update v3.9.3 - Merged Beta to Main (#51)v3.9.3

* commit

* update db

* Update v3.9.1-beta-v3.1

* Update v3.9.1

* Fix watched progress not showing

* Secure headers

* Fix recently watched image

* Update v3.9.2

> Added custom lists for AniList
> Fixed episode listMode progress

* Update db route

* Fixed AniList

* Fix next button on dub anime

> video is playing sub anime instead dub

* small adjusment for premid

* fix eslint

* small updates

> added ability to remove episode from recently watched

* Update v3.9.3

1 files changed, 120 insertions, 80 deletions

diff --git a/lib/anilist/useAnilist.js b/lib/anilist/useAnilist.js
index bedb4a5..72e11ca 100644
--- a/lib/anilist/useAnilist.js
+++ b/lib/anilist/useAnilist.js
@@ -1,14 +1,18 @@
 import { useState, useEffect } from "react";
 import { toast } from "react-toastify";
 
-function useMedia(username, accessToken, status) {
+export const useAniList = (session, stats) => {
   const [media, setMedia] = useState([]);
+  const accessToken = session?.user?.token;
+  const username = session?.user?.name;
+  const status = stats || null;
 
   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 }),
     });
@@ -18,68 +22,47 @@ function useMedia(username, accessToken, status) {
   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
+      query ($username: String, $status: MediaListStatus) {
+        MediaListCollection(userName: $username, type: ANIME, status: $status) {
+          lists {
             status
-            progress
-            score
-            media {
+            name
+            entries {
               id
+              mediaId
               status
-              nextAiringEpisode {
+              progress
+              score
+              media {
+                id
+                status
+                nextAiringEpisode {
                   timeUntilAiring
                   episode
-              }
-              title {
-                english
-                romaji
-              }
-              episodes
-              coverImage {
-                large
+                }
+                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) => {
+  const markComplete = async (mediaId) => {
     if (!accessToken) return;
     const completeQuery = `
-      mutation($mediaId: Int ) {
+      mutation($mediaId: Int) {
         SaveMediaListEntry(mediaId: $mediaId, status: COMPLETED) {
           id
           mediaId
@@ -87,14 +70,13 @@ export function useAniList(session, stats) {
         }
       }
     `;
-    fetchGraphQL(completeQuery, { mediaId }).then((data) =>
-      console.log({ Complete: data })
-    );
+    const data = await fetchGraphQL(completeQuery, { mediaId });
+    console.log({ Complete: data });
   };
 
-  const markPlanning = (mediaId) => {
+  const markPlanning = async (mediaId) => {
     if (!accessToken) return;
-    const completeQuery = `
+    const planningQuery = `
       mutation($mediaId: Int ) {
         SaveMediaListEntry(mediaId: $mediaId, status: PLANNING) {
           id
@@ -103,40 +85,98 @@ export function useAniList(session, stats) {
         }
       }
     `;
-    fetchGraphQL(completeQuery, { mediaId }).then((data) =>
-      console.log({ added_to_list: data })
-    );
+    const data = await fetchGraphQL(planningQuery, { mediaId });
+    console.log({ added_to_list: 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) {
+  const getUserLists = async (id) => {
+    const getLists = `
+      query ($id: Int) {
+        Media(id: $id) {
+          mediaListEntry {
+            customLists
+          }
           id
-          mediaId
-          progress
-          status
+          type
+          title {
+            romaji
+            english
+            native
+          }
         }
       }
+    `;
+    const data = await fetchGraphQL(getLists, { id });
+    return data;
+  };
+
+  const customLists = async (lists) => {
+    const setList = `
+      mutation($lists: [String]){
+        UpdateUser(animeListOptions: { customLists: $lists }){
+          id
+        }
+      }
+    `;
+    const data = await fetchGraphQL(setList, { lists });
+    return data;
+  };
+
+  const markProgress = async (mediaId, progress, stats, volumeProgress) => {
+    if (!accessToken) return;
+    const progressWatched = `
+    mutation($mediaId: Int, $progress: Int, $status: MediaListStatus, $progressVolumes: Int, $lists: [String]) {
+      SaveMediaListEntry(mediaId: $mediaId, progress: $progress, status: $status, progressVolumes: $progressVolumes, customLists: $lists) {
+        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",
-      });
-    });
+
+    const user = await getUserLists(mediaId);
+    const media = user?.data?.Media;
+    if (media) {
+      let checkList = media?.mediaListEntry?.customLists
+        ? Object.entries(media?.mediaListEntry?.customLists).map(
+            ([key, value]) => key
+          ) || []
+        : [];
+
+      if (!checkList?.includes("Watched using Moopa")) {
+        checkList.push("Watched using Moopa");
+        await customLists(checkList);
+      }
+
+      let lists = media?.mediaListEntry?.customLists
+        ? Object.entries(media?.mediaListEntry?.customLists)
+            .filter(([key, value]) => value === true)
+            .map(([key, value]) => key) || []
+        : [];
+      if (!lists?.includes("Watched using Moopa")) {
+        lists.push("Watched using Moopa");
+      }
+      if (lists.length > 0) {
+        await fetchGraphQL(progressWatched, {
+          mediaId,
+          progress,
+          status: stats,
+          progressVolumes: volumeProgress,
+          lists,
+        });
+        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, markPlanning };
-}
+  return { media, markComplete, markProgress, markPlanning, getUserLists };
+};