initial commit

1 files changed, 241 insertions, 0 deletions

diff --git a/pages/test.js b/pages/test.js
new file mode 100644
index 0000000..57db350
--- /dev/null
+++ b/pages/test.js
@@ -0,0 +1,241 @@
+import { signIn, signOut, useSession } from "next-auth/react";
+import { useEffect, useState } from "react";
+import { useQuery } from "@apollo/client";
+import { GET_MEDIA } from "../queries";
+import StackPlayer from "../components/test/player";
+import Modal from "../components/modal";
+
+import { AniData as data } from "../components/test/dataAni";
+import Image from "next/image";
+import { client } from "../lib/apolloClient";
+import Link from "next/link";
+import { useAniList } from "../lib/useAnilist";
+
+export default function AniTest() {
+  const { data: session, status } = useSession();
+  const { media, aniAdvanceSearch } = useAniList(session);
+  const [advanceSearch, setAdvanceSearch] = useState();
+
+  const [search, setSearch] = useState();
+  const [type, setType] = useState("ANIME");
+  const [seasonYear, setSeasonYear] = useState();
+  const [season, setSeason] = useState();
+  const [genres, setGenres] = useState();
+  const [perPage, setPerPage] = useState(25);
+  const [sort, setSort] = useState(["POPULARITY_DESC"]);
+
+  // async function handleUpdateMediaEntry(entryId, status, progress, score) {
+  //   try {
+  //     const updatedEntry = await updateMediaEntry(
+  //       entryId,
+  //       status,
+  //       progress,
+  //       score
+  //     );
+  //     console.log(updatedEntry);
+  //   } catch (error) {
+  //     console.error(error);
+  //   }
+  // }
+
+  // const userId = session?.user?.id;
+  // const MediaList = ({ userId }) => {
+  //   const { data, loading, error } = useQuery(GET_MEDIA, {
+  //     variables: { page: 1, userId, type: "ANIME", status: "COMPLETED" },
+  //   });
+
+  //   if (loading) return <p>Loading...</p>;
+  //   if (error) return <p>Error :(</p>;
+
+  //   const { mediaList } = data.Page;
+  //   console.log(mediaList);
+  // };
+
+  // const [open, setOpen] = useState(false);
+
+  async function advance() {
+    const data = await aniAdvanceSearch(
+      search,
+      type,
+      seasonYear,
+      season,
+      genres,
+      perPage,
+      sort
+    );
+    setAdvanceSearch(data);
+  }
+
+  useEffect(() => {
+    advance();
+  }, [search, type, seasonYear, season, genres, perPage, sort]);
+
+  if (status === "loading") {
+    return <div>Loading...</div>;
+  }
+
+  const astatus = "COMPLETED";
+
+  // const { data } = aniAdvanceSearch({
+  //   search: "naruto",
+  // });
+
+  console.log(advanceSearch);
+
+  return (
+    // <div className="h-[720px] w-[1280px]">
+    //   <StackPlayer />
+    // </div>
+    <>
+      {/* <button
+        className="bg-[#30c168] p-2 rounded-lg m-5 text-black font-semibold font-karla"
+        onClick={() => setOpen(true)}
+      >
+        Start Watching
+      </button>
+      <Modal open={open} onClose={() => setOpen(false)}>
+        <div className="bg-white rounded-md text-black">
+          <div className="">
+            <Image
+              src={data.episodes[0].image}
+              alt="iamge"
+              width={1000}
+              height={1000}
+              className="object-cover rounded-t-md w-[420px] h-[100px]"
+            />
+          </div>
+          <div>Episode 6</div>
+          <div>test</div>
+        </div>
+      </Modal> */}
+      {!session && (
+        <button onClick={() => signIn("AniListProvider")}>
+          Sign in with Anilist
+        </button>
+      )}
+      {session && (
+        <div>
+          <button onClick={() => signOut()}>
+            Sign out ({session.user?.name})
+          </button>
+          <img
+            src={session.user?.image.large}
+            className="w-[100px] h-[100px]"
+          />
+        </div>
+      )}
+      {advanceSearch?.media.map((item) => {
+        return <div key={item.id}>{item.title.userPreferred}</div>;
+      })}
+      {media?.length > 0 && (
+        <div className="flex-center flex-col gap-5">
+          {media.map((item, index) => {
+            return (
+              <div key={index} className="flex-center flex-col gap-5">
+                <h2 className="font-bold text-xl font-karla">{item.name}</h2>
+                <div className="grid grid-cols-4 gap-5">
+                  {item.entries.map((items, index) => {
+                    return (
+                      <div key={index}>
+                        <div className="bg-secondary flex h-[120px] w-[420px]">
+                          <div className="w-[20%] shrink-0">
+                            <Image
+                              src={items.media.coverImage.large}
+                              alt="image deez nuts"
+                              height={1000}
+                              width={1000}
+                              className="object-cover h-[120px] shrink-0"
+                            />
+                          </div>
+                          <div className="p-3">
+                            <h1 className="text-semibold font-karla text-lg line-clamp-3">
+                              {items.media.title.romaji}
+                            </h1>
+                            <h3 className="text-sm font-karla text-light">
+                              Episodes {items.progress} - {items.media.episodes}
+                            </h3>
+                            {item.name === "Watching" && (
+                              <button
+                                onClick={() =>
+                                  handleUpdateMediaEntry(
+                                    items.media.id,
+                                    "COMPLETED",
+                                    items.media.episodes,
+                                    8
+                                  )
+                                }
+                              >
+                                Mark as Complete
+                              </button>
+                            )}
+                          </div>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            );
+          })}
+          {/* <h2 className="font-bold text-xl font-karla">Paused</h2>
+          <div className="grid grid-cols-4 gap-5">
+            {media[1].entries.map((item, index) => {
+              return (
+                <div key={index} className="">
+                  <div className="bg-secondary flex h-[120px] w-[420px]">
+                    <div className="w-[20%] shrink-0">
+                      <Image
+                        src={item.media.coverImage.large}
+                        alt="image deez nuts"
+                        height={1000}
+                        width={1000}
+                        className="object-cover h-[120px]"
+                      />
+                    </div>
+                    <div className="p-3">
+                      <h1 className="text-semibold font-karla text-lg line-clamp-3">
+                        {item.media.title.romaji}
+                      </h1>
+                      <h3 className="text-sm font-karla text-light">
+                        Episodes {item.progress} - {item.media.episodes}
+                      </h3>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+          <h2 className="font-bold text-xl font-karla">Dropped</h2>
+          <div className="grid grid-cols-4 gap-5">
+            {media[2].entries.map((item, index) => {
+              return (
+                <div key={index} className="">
+                  <div className="bg-secondary flex h-[120px] w-[420px]">
+                    <div className="w-[20%] shrink-0">
+                      <Image
+                        src={item.media.coverImage.large}
+                        alt="image deez nuts"
+                        height={1000}
+                        width={1000}
+                        className="object-cover h-[120px]"
+                      />
+                    </div>
+                    <div className="p-3">
+                      <h1 className="text-semibold font-karla text-lg line-clamp-3">
+                        {item.media.title.romaji}
+                      </h1>
+                      <h3 className="text-sm font-karla text-light">
+                        Episodes {item.progress} - {item.media.episodes}
+                      </h3>
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+          </div> */}
+        </div>
+      )}
+      <Link href="/">Home</Link>
+    </>
+  );
+}