Update v3.6.4

- Added Manga page with a working tracker for AniList user
- Added schedule component to home page
- Added disqus comment section so you can fight on each other (not recommended)
- Added /id and /en route for english and indonesian subs (id route still work in progress)

4 files changed, 328 insertions, 0 deletions

diff --git a/lib/anilist/AniList.js b/lib/anilist/AniList.js
new file mode 100644
index 0000000..f602dad
--- /dev/null
+++ b/lib/anilist/AniList.js
@@ -0,0 +1,54 @@
+export async function aniListData({ sort, page = 1 }) {
+  const resAnilist = await fetch(`https://graphql.anilist.co`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      query: `
+            query (
+      $id: Int
+      $page: Int
+      $perPage: Int
+      $search: String
+      $sort: [MediaSort]
+    ) {
+      Page(page: $page, perPage: $perPage) {
+        pageInfo {
+          total
+          currentPage
+          lastPage
+          hasNextPage
+          perPage
+        }
+        media(id: $id, search: $search, sort: $sort type: ANIME) {
+          id
+          idMal
+          title {
+            romaji
+            english
+          }
+          coverImage {
+            extraLarge
+          }
+          description
+        }
+      }
+    }
+  `,
+      variables: {
+        page: page,
+        perPage: 15,
+        sort,
+      },
+    }),
+  });
+  const anilistData = await resAnilist.json();
+  const data = anilistData.data.Page.media;
+  // console.log(resAnilist);
+  return {
+    props: {
+      data,
+    },
+  };
+}
diff --git a/lib/anilist/aniAdvanceSearch.js b/lib/anilist/aniAdvanceSearch.js
new file mode 100644
index 0000000..bb22ead
--- /dev/null
+++ b/lib/anilist/aniAdvanceSearch.js
@@ -0,0 +1,68 @@
+const advance = `
+  query ($search: String, $type: MediaType, $status: MediaStatus, $season: MediaSeason, $seasonYear: Int, $genres: [String], $tags: [String], $sort: [MediaSort], $page: Int, $perPage: Int) {
+    Page (page: $page, perPage: $perPage) {
+      pageInfo {
+        total
+        currentPage
+        lastPage
+        hasNextPage
+      }
+      media (search: $search, type: $type, status: $status, season: $season, seasonYear: $seasonYear, genre_in: $genres, tag_in: $tags, sort: $sort, isAdult: false) {
+        id
+        title {
+            userPreferred
+        }
+        type
+        episodes
+        status
+        format
+        season
+        seasonYear
+        coverImage {
+          extraLarge
+          color
+        }
+        averageScore
+        isAdult
+      }
+    }
+  }
+`;
+
+export async function aniAdvanceSearch(options = {}) {
+  const {
+    search = null,
+    type = "ANIME",
+    seasonYear = NaN,
+    season = undefined,
+    genres = null,
+    page = 1,
+    perPage = null,
+    sort = "POPULARITY_DESC",
+  } = options;
+  // console.log(page);
+  const response = await fetch("https://graphql.anilist.co/", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      query: advance,
+      variables: {
+        search: search,
+        type: type,
+        seasonYear: seasonYear,
+        season: season,
+        genres: genres,
+        perPage: perPage,
+        sort: sort,
+        page: page,
+      },
+    }),
+  });
+
+  const datas = await response.json();
+  // console.log(datas);
+  const data = datas.data.Page;
+  return data;
+}
diff --git a/lib/anilist/getUpcomingAnime.js b/lib/anilist/getUpcomingAnime.js
new file mode 100644
index 0000000..fc848fd
--- /dev/null
+++ b/lib/anilist/getUpcomingAnime.js
@@ -0,0 +1,80 @@
+const getUpcomingAnime = async () => {
+  // Determine the current season and year
+  const currentDate = new Date();
+  const currentMonth = currentDate.getMonth();
+  let currentSeason, currentYear;
+
+  if (currentMonth < 3) {
+    currentSeason = "WINTER";
+    currentYear = currentDate.getFullYear();
+  } else if (currentMonth < 6) {
+    currentSeason = "SPRING";
+    currentYear = currentDate.getFullYear();
+  } else if (currentMonth < 9) {
+    currentSeason = "SUMMER";
+    currentYear = currentDate.getFullYear();
+  } else {
+    currentSeason = "FALL";
+    currentYear = currentDate.getFullYear();
+  }
+
+  const query = `
+    query ($season: MediaSeason, $seasonYear: Int) {
+      Page(page: 1, perPage: 20) {
+        media(season: $season, seasonYear: $seasonYear, sort: POPULARITY_DESC, type: ANIME) {
+          id
+          coverImage{
+            large
+          }
+          bannerImage
+          title {
+            english
+            romaji
+            native
+          }
+          nextAiringEpisode {
+            episode
+            airingAt
+            timeUntilAiring
+          }
+        }
+      }
+    }
+  `;
+
+  const variables = {
+    season: currentSeason,
+    seasonYear: currentYear,
+  };
+
+  let response = await fetch("https://graphql.anilist.co", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+    },
+    body: JSON.stringify({
+      query,
+      variables: variables ? variables : undefined,
+    }),
+  });
+
+  let json = await response.json();
+
+  let currentSeasonAnime = json.data.Page.media;
+  let nextAiringAnime = currentSeasonAnime.filter(
+    (anime) =>
+      anime.nextAiringEpisode !== null && anime.nextAiringEpisode.episode === 1
+  );
+
+  if (nextAiringAnime.length >= 1) {
+    nextAiringAnime.sort(
+      (a, b) => a.nextAiringEpisode.airingAt - b.nextAiringEpisode.airingAt
+    );
+    return nextAiringAnime; // return all upcoming anime, not just the first two
+  }
+
+  return null;
+};
+
+export default getUpcomingAnime;
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 };
+}