From 545d8a3473823f0a86cad3c177dbbb4ebb794a75 Mon Sep 17 00:00:00 2001 From: Factiven Date: Mon, 17 Apr 2023 13:33:37 +0700 Subject: Snapshot Moopa v3.2 --- pages/about.js | 3 - pages/anime/[...id].js | 166 +++++++++++------- pages/anime/watch/[...info].js | 76 +++++++-- pages/api/get-media.js | 78 +++++++++ pages/api/get-user.js | 4 +- pages/api/getUser.js | 20 --- pages/index.js | 371 ++++++++++++++++++++++------------------- pages/profile/[user].js | 366 ++++++++++++++++++++++++++++++++++++++++ pages/search.js | 110 +++--------- pages/test.js | 236 -------------------------- pages/testing.js | 76 +++++++-- 11 files changed, 903 insertions(+), 603 deletions(-) create mode 100644 pages/api/get-media.js delete mode 100644 pages/api/getUser.js create mode 100644 pages/profile/[user].js delete mode 100644 pages/test.js (limited to 'pages') diff --git a/pages/about.js b/pages/about.js index 24f04f3..7255401 100644 --- a/pages/about.js +++ b/pages/about.js @@ -1,10 +1,7 @@ import Head from "next/head"; import Layout from "../components/layout"; -import UnderConstruction from "../components/underConst"; export default function About() { - const clientId = process.env.ANILIST_CLIENT_ID; - return ( <> diff --git a/pages/anime/[...id].js b/pages/anime/[...id].js index 81e5706..01ed629 100644 --- a/pages/anime/[...id].js +++ b/pages/anime/[...id].js @@ -1,3 +1,5 @@ +const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000"; + import React, { useEffect, useState } from "react"; import { META } from "@consumet/extensions"; @@ -8,28 +10,26 @@ import Head from "next/head"; import { closestMatch } from "closest-match"; import Content from "../../components/hero/content"; -import { useSession } from "next-auth/react"; +import { getServerSession } from "next-auth/next"; +import { authOptions } from "../api/auth/[...nextauth]"; export default function Himitsu({ info, - slicedDesc, color, episodeList, episode1, - judul, subIndo, epIndo, + sessions, + progress, + status, + lastPlayed, }) { - const [isLoading, setIsloading] = useState(false); const [showText, setShowtext] = useState(false); const [load, setLoad] = useState(true); const [Lang, setLang] = useState(true); const [showAll, setShowAll] = useState(false); - const { data: session } = useSession(); - - const [lastPlayed, setLastPlayed] = useState(null); - const [user, setUser] = useState(null); const episode = episodeList; const epi1 = episode1; @@ -44,21 +44,6 @@ export default function Himitsu({ } useEffect(() => { - async function userData() { - setLoad(false); - if (!session) return; - setLoad(true); - const res = await fetch(`/api/get-user?userName=${session?.user.name}`); - const data = await res.json(); - setLastPlayed( - data?.recentWatch.filter( - (item) => item.title.romaji === info.title.romaji - )[0]?.episode - ); - setUser(data); - setLoad(false); - } - function getBrightness(color) { const rgb = color.match(/\d+/g); return (299 * rgb[0] + 587 * rgb[1] + 114 * rgb[2]) / 1000; @@ -80,12 +65,8 @@ export default function Himitsu({ setTextColor(element); }); - userData(); - }, [color, session]); - - if (!info) { - return; - } + setLoad(false); + }, [color, sessions, info.id]); let episodeIndo = null; if (epIndo < 17) { @@ -95,11 +76,11 @@ export default function Himitsu({ } async function handleUpdate(data) { - if (!session) return; + if (!sessions) return; const res = await fetch("/api/update-user", { method: "POST", body: JSON.stringify({ - name: session?.user.name, + name: sessions?.user.name, newData: { recentWatch: data, }, @@ -111,6 +92,8 @@ export default function Himitsu({ console.log(res.status); } + // console.log(lastPlayed); + return ( <> @@ -127,12 +110,10 @@ export default function Himitsu({ - {isLoading ? ( -

Loading cuy sabar...

- ) : info ? ( + {info ? (
@@ -141,6 +122,7 @@ export default function Himitsu({ {info.image && ( <>
-

- {judul} +

+ {info.title.romaji || info.title.english}

@@ -278,7 +260,7 @@ export default function Himitsu({

-
+ />
-
+

Episodes

+ {status && ( + <> +
+ {status} + + status + +
+ + )}
-
+
{load ? (

Loading...

) : episode && Lang ? ( @@ -421,9 +414,8 @@ export default function Himitsu({ const item = lastPlayed?.find( (item) => item.id === episode.id ); - console.log(item); return ( -
+
handleUpdate({ @@ -444,14 +436,18 @@ export default function Himitsu({ item ? `${item.time}` : "" }`} className={`text-start text-xl ${ - item ? "text-[#414141]" : "text-white" + episode.number <= progress + ? "text-[#5f5f5f]" + : "text-white" }`} >

Episode {episode.number}

{episode.title && (

"{episode.title}" @@ -531,11 +527,13 @@ export default function Himitsu({ ); } -export const getServerSideProps = async (context) => { +export async function getServerSideProps(context) { context.res.setHeader( "Cache-Control", "public, s-maxage=10, stale-while-revalidate=59" ); + const session = await getServerSession(context.req, context.res, authOptions); + const { id } = context.query; if (!id) { return { @@ -552,6 +550,12 @@ export const getServerSideProps = async (context) => { provider.fetchEpisodesListById(id[0]), ]); + if (!info) { + return { + notFound: true, + }; + } + let episodeList = episodes; if (episodes.length === 0) { const res = await fetch( @@ -608,16 +612,58 @@ export const getServerSideProps = async (context) => { epis = dataInf.episode; } - const desc = info.description.slice(0, 150) + "..."; + let progress = null; + let status = null; + let lastPlayed = null; + + if (session) { + const res = await fetch(`${baseUrl}/api/get-media`, { + method: "POST", + body: JSON.stringify({ + username: session?.user.name, + }), + headers: { + "Content-Type": "application/json", + }, + }); + + const resp = await fetch( + `${baseUrl}/api/get-user?userName=${session?.user.name}` + ); + const data = await resp.json(); + + lastPlayed = data?.recentWatch.filter( + (item) => item.title.romaji === info.title.romaji + )[0]?.episode; + + const prog = await res.json(); + + const gat = prog.lists.map((item) => item.entries); + const git = gat.map((item) => + item.find((item) => item.media.id === parseInt(info.id)) + ); + const gut = git?.find((item) => item?.media.id === parseInt(info.id)); + + if (gut) { + progress = gut?.progress; + if (gut.status === "CURRENT") { + status = "Watching"; + } else if (gut.status === "PLANNING") { + status = "Planned to watch"; + } else if (gut.status === "COMPLETED") { + status = "Completed"; + } else if (gut.status === "DROPPED") { + status = "Dropped"; + } else if (gut.status === "PAUSED") { + status = "Paused"; + } + } + } + const color = { backgroundColor: `${info.color}` }; const epi1 = episodes.filter((epi) => epi.number === 1); const title = info.title?.userPreferred || "No Title"; - const MAX = 20; - - const oriJ = info.title?.english || info.title.romaji || info.title.native; - const judul = oriJ.length > MAX ? `${oriJ.substring(0, MAX)}...` : oriJ; - return { props: { info: { @@ -627,13 +673,15 @@ export const getServerSideProps = async (context) => { userPreferred: title, }, }, - slicedDesc: desc, color, episodeList, episode1: epi1, - judul, subIndo: slug, epIndo: epis, + sessions: session, + progress: progress || null, + status: status, + lastPlayed: lastPlayed || null, }, }; -}; +} diff --git a/pages/anime/watch/[...info].js b/pages/anime/watch/[...info].js index 552102c..756e0c1 100644 --- a/pages/anime/watch/[...info].js +++ b/pages/anime/watch/[...info].js @@ -1,3 +1,5 @@ +const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000"; + import Layout from "../../../components/layout"; // import { data } from "../../../lib/testData"; // import { aniData } from "../../../lib/infoData"; @@ -11,26 +13,30 @@ import Modal from "../../../components/modal"; import { useNotification } from "../../../lib/useNotify"; -import { useSession, signIn, signOut } from "next-auth/react"; +import { signIn, signOut } from "next-auth/react"; +import { getServerSession } from "next-auth/next"; +import { authOptions } from "../../api/auth/[...nextauth]"; + import AniList from "../../../components/media/aniList"; -import { AnimatePresence, motion as m } from "framer-motion"; -import Navbar from "../../../components/navbar"; import { Navigasi } from "../.."; -export default function Info({ info }) { - const { data: session, status } = useSession(); +export default function Info({ info, sessions, statusWatch }) { const title = info.aniData.title.romaji || info.aniData.title.english; const data = info.aniData; const fallback = info.epiFallback; const { Notification: NotificationComponent, show } = useNotification(); - // console.log(session); - - const playingEpisode = data.episodes + let playingEpisode = data.episodes .filter((item) => item.id == info.id) .map((item) => item.number); + if (playingEpisode == 0) { + playingEpisode = fallback + .filter((item) => item.id == info.id) + .map((item) => item.number); + } + const [open, setOpen] = useState(false); const [aniStatus, setAniStatus] = useState(""); const [aniProgress, setAniProgress] = useState(parseInt(playingEpisode)); @@ -56,12 +62,6 @@ export default function Info({ info }) { .filter((item) => item.id == info.id) .map((item) => item.title); - if (status === "loading") { - return

Loading...

; - } - - console.log(); - return ( <> @@ -78,7 +78,7 @@ export default function Info({ info }) {

Save this Anime to Your List

- {!session && ( + {!sessions && (
)} - {session && ( + {sessions && ( <>
@@ -378,6 +379,8 @@ export default function Info({ info }) { } export async function getServerSideProps(context) { + const session = await getServerSession(context.req, context.res, authOptions); + const { info } = context.query; if (!info) { return { @@ -418,6 +421,43 @@ export async function getServerSideProps(context) { } } + const playingEpisode = aniData.episodes + .filter((item) => item.id == id) + .map((item) => item.number); + + const resp = await fetch(`${baseUrl}/api/get-media`, { + method: "POST", + body: JSON.stringify({ + username: session?.user.name, + }), + headers: { + "Content-Type": "application/json", + }, + }); + + const prog = await resp.json(); + + const gat = prog?.lists.map((item) => item.entries); + const git = gat?.map((item) => + item.find((item) => item.media.id === parseInt(aniId)) + ); + const gut = git?.find((item) => item?.media.id === parseInt(aniId)); + + let statusWatch = "CURRENT"; + + if (gut?.status === "COMPLETED") { + statusWatch = "REPEATING"; + } else if ( + gut?.status === "REPEATING" && + gut?.media?.episodes === parseInt(playingEpisode) + ) { + statusWatch = "COMPLETED"; + } else if (gut?.status === "REPEATING") { + statusWatch = "REPEATING"; + } else if (aniData.totalEpisodes === parseInt(playingEpisode)) { + statusWatch = "COMPLETED"; + } + return { props: { info: { @@ -427,6 +467,8 @@ export async function getServerSideProps(context) { aniData, epiFallback, }, + sessions: session, + statusWatch: statusWatch, }, }; } diff --git a/pages/api/get-media.js b/pages/api/get-media.js new file mode 100644 index 0000000..7c45d03 --- /dev/null +++ b/pages/api/get-media.js @@ -0,0 +1,78 @@ +// pages/api/anime-media-list.js + +export default async function handler(req, res) { + const { username, status } = req.body; + + try { + const response = await fetch("https://graphql.anilist.co/", { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + query: ` + query ($username: String, $status: MediaListStatus) { + MediaListCollection(userName: $username, type: ANIME, status: $status, sort: SCORE_DESC) { + user { + id + name + about (asHtml: true) + createdAt + avatar { + large + } + statistics { + anime { + count + episodesWatched + meanScore + minutesWatched + } + } + bannerImage + mediaListOptions { + animeList { + sectionOrder + } + } + } + lists { + status + name + entries { + id + mediaId + status + progress + score + media { + id + status + title { + english + romaji + } + episodes + coverImage { + large + } + } + } + } + } + } + `, + variables: { + username, + status, + }, + }), + }); + + const data = await response.json(); + res.status(200).json(data.data.MediaListCollection); + } catch (error) { + console.error(error); + res.status(500).json({ message: "Internal server error" }); + } +} diff --git a/pages/api/get-user.js b/pages/api/get-user.js index 7df10a6..36bc974 100644 --- a/pages/api/get-user.js +++ b/pages/api/get-user.js @@ -7,7 +7,9 @@ export async function getUser(userName) { const collection = db.collection("users"); const user = await collection.findOne({ name: userName }); - user._id = String(user._id); + if (user && user._id) { + user._id = String(user._id); + } return user; } diff --git a/pages/api/getUser.js b/pages/api/getUser.js deleted file mode 100644 index 7df10a6..0000000 --- a/pages/api/getUser.js +++ /dev/null @@ -1,20 +0,0 @@ -import clientPromise from "../../lib/mongodb"; - -export async function getUser(userName) { - const client = await clientPromise; - const db = client.db("authbase"); - - const collection = db.collection("users"); - const user = await collection.findOne({ name: userName }); - - user._id = String(user._id); - - return user; -} - -export default async function handler(req, res) { - const { userName } = req.query; - const user = await getUser(userName); - - res.status(200).json(user); -} diff --git a/pages/index.js b/pages/index.js index a9aca07..f0b6ce4 100644 --- a/pages/index.js +++ b/pages/index.js @@ -10,11 +10,13 @@ import { useRouter } from "next/router"; import { motion } from "framer-motion"; -import { useSession, signIn } from "next-auth/react"; +import { useSession, signIn, signOut } from "next-auth/react"; import { useAniList } from "../lib/useAnilist"; +import { getServerSession } from "next-auth/next"; +import { authOptions } from "./api/auth/[...nextauth]"; export function Navigasi() { - const { data: session, status } = useSession(); + const { data: sessions, status } = useSession(); const router = useRouter(); @@ -54,7 +56,7 @@ export function Navigasi() {
  • Loading...
    • ) : ( <> - {!session && ( + {!sessions && (
    • )} - {session && ( + {sessions && (
  • - {/*
    imagine
    */} - My List + {/*
    imagine
    */} + + My List +
    • )} @@ -93,15 +97,14 @@ export function Navigasi() { ); } -export default function Home({ detail, populars }) { - const { data: session, status } = useSession(); - const { media } = useAniList(session); +export default function Home({ detail, populars, sessions }) { + const { media } = useAniList(sessions, { stats: "CURRENT" }); const [isVisible, setIsVisible] = useState(false); - const [recently, setRecently] = useState(null); const [plan, setPlan] = useState(null); const [user, setUser] = useState(null); const [array, setArray] = useState([]); + const [fade, setFade] = useState(false); const popular = populars?.data; const data = detail.data[0]; @@ -109,42 +112,48 @@ export default function Home({ detail, populars }) { const handleShowClick = () => { setIsVisible(true); + setFade(true); }; const handleHideClick = () => { setIsVisible(false); + setFade(false); }; - // const reversed = user?.recentWatch.reverse(); - // console.log(plan); - useEffect(() => { async function userData() { - if (!session) return; - const res = await fetch(`/api/get-user?userName=${session?.user.name}`); + if (!sessions) return; + const res = await fetch(`/api/get-user?userName=${sessions?.user.name}`); const data = await res.json(); const getMedia = - media.filter((item) => item.status === "PAUSED")[0] || null; + media.filter((item) => item.status === "CURRENT")[0] || null; const plan = getMedia?.entries .map(({ media }) => media) .filter((media) => media); - setPlan(plan); - setArray(data?.recentWatch.reverse()); - setUser(data); - } - function fetchData() { - const recent = JSON.parse(localStorage.getItem("recentWatch")); - if (recent) { - setRecently(recent); + const get = media.flatMap((item) => item.entries); + const newArray = []; + + get.forEach((item) => { + if (!newArray.some((element) => element.id === item.id)) { + newArray.push(item); + } + }); + + const getlog = newArray + .map(({ media }) => media) + .filter((media) => media); + + if (plan) { + setPlan(plan.reverse()); } + + setArray(data?.recentWatch?.reverse()); + setUser(data); } userData(); - fetchData(); - }, [session]); - - // console.log(user?.recentWatch.reverse()); + }, [sessions, media]); return ( <> @@ -172,7 +181,7 @@ export default function Home({ detail, populars }) { {!isVisible && ( )} +
    - {/* Mobile Menu */} -
    - {isVisible && ( -
    - )} - {session && ( - user avatar - )} - - )} - {isVisible && ( -
    -
    - + + -
    + + search + + + {sessions ? ( + - -
    - + )}
    - )} -
    + +
    + )}
    @@ -389,10 +402,19 @@ export default function Home({ detail, populars }) {
    - {session && ( -
    -
    - {greeting}, {session?.user.name} + {sessions && ( +
    +
    + {greeting},

    {sessions?.user.name}

    +
    )} @@ -405,7 +427,7 @@ export default function Home({ detail, populars }) { transition={{ duration: 0.5, staggerChildren: 0.2 }} // Add staggerChildren prop > {/* SECTION 1 */} - {session && user?.recentWatch && ( + {sessions && user?.recentWatch && ( )} - {session && plan && ( + {sessions && plan && ( @@ -478,7 +500,9 @@ export default function Home({ detail, populars }) { ); } -export async function getServerSideProps({ req, res }) { +export async function getServerSideProps(context) { + const session = await getServerSession(context.req, context.res, authOptions); + const trendingDetail = await aniListData({ sort: "TRENDING_DESC", page: 1, @@ -494,6 +518,7 @@ export async function getServerSideProps({ req, res }) { genre: genreDetail.props, detail: trendingDetail.props, populars: popularDetail.props, + sessions: session, }, }; } @@ -508,7 +533,7 @@ function getGreeting() { greeting = "Good afternoon"; } else if (time >= 18 && time < 22) { greeting = "Good evening"; - } else if (time >= 22 && time < 5) { + } else if (time >= 22 || time < 5) { greeting = "Good night"; } diff --git a/pages/profile/[user].js b/pages/profile/[user].js new file mode 100644 index 0000000..b40c41a --- /dev/null +++ b/pages/profile/[user].js @@ -0,0 +1,366 @@ +const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000"; + +import { getServerSession } from "next-auth"; +import { authOptions } from "../api/auth/[...nextauth]"; +import Navbar from "../../components/navbar"; +import Image from "next/image"; +import Link from "next/link"; +import Head from "next/head"; +import { useState } from "react"; + +export default function MyList({ media, sessions, user, time }) { + const [listFilter, setListFilter] = useState("all"); + const [visible, setVisible] = useState(false); + + const filterMedia = (status) => { + if (status === "all") { + return media; + } + return media.filter((m) => m.name === status); + }; + // console.log(media); + return ( + <> + + My Lists + + +
    +
    +
    + user avatar + {user.bannerImage ? ( + image + ) : ( +
    + )} +

    {user.name}

    +
    +
    +
    + Created At : + +
    + {sessions && user.name === sessions?.user.name ? ( + + + + + Edit Profile + + ) : null} +
    +
    +
    + {user.about ? ( +
    + ) : ( + "No description created." + )} +
    +
    + +
    +
    +

    + {user.statistics.anime.episodesWatched} +

    +

    Total Episodes

    +
    +
    +

    + {user.statistics.anime.count} +

    +

    Total Anime

    +
    + {time?.days ? ( +
    +

    {time.days}

    +

    Days Watched

    +
    + ) : ( +
    +

    {time.hours}

    +

    hours

    +
    + )} +
    + {media.length !== 0 && ( +
    +
    +
    +

    Lists Filter

    + + + +
    +
    setVisible(!visible)} + > + + + +
    +
    +
      +
    • setListFilter("all")} + className={`p-2 cursor-pointer hover:text-action ${ + listFilter === "all" && "bg-secondary text-action" + }`} + > +

      + Show All +

      +
      • + {media.map((item) => ( +
    • setListFilter(item.name)} + className={`cursor-pointer hover:text-action flex gap-2 p-2 duration-200 ${ + item.name === listFilter && "bg-secondary text-action" + }`} + > +

      {item.name}

      +
      + ({item.entries.length}) +
      +
      • + ))} +
    +
    + )} +
    + +
    + {media.length !== 0 ? ( + filterMedia(listFilter).map((item, index) => ( +
    +

    {item.name}

    + + + + + + + + + + {item.entries.map((item, index) => ( + + + + + + ))} + +
    + Title + ScoreProgress
    +
    + {item.media.status === "RELEASING" ? ( + + ) : item.media.status === "NOT_YET_RELEASED" ? ( + + ) : ( + + )} + Cover Image +
    + {item.media.id} +
    + + {item.media.title.romaji} + +
    +     		+ {item.score === 0 ? null : item.score} + + {item.progress === item.media.episodes + ? item.progress + : item.media.episodes === null + ? item.progress + : `${item.progress}/${item.media.episodes}`} +
    +
    + )) + ) : ( +
    + {user.name === sessions?.user.name ? ( +

    + Oops!

    Looks like you haven't watch anything yet. +

    + ) : ( +

    + Oops!

    It looks like this user haven't watch anything + yet. +

    + )} + + + + + Start Watching + +
    + )} +
    +
    + + ); +} + +export async function getServerSideProps(context) { + const session = await getServerSession(context.req, context.res, authOptions); + const query = context.query; + + const res = await fetch(`${baseUrl}/api/get-media`, { + method: "POST", + body: JSON.stringify({ + username: query.user, + }), + headers: { + "Content-Type": "application/json", + }, + }); + + const get = await res.json(); + const sectionOrder = get?.user.mediaListOptions.animeList.sectionOrder; + + if (!sectionOrder) { + return { + notFound: true, + }; + } + + const prog = get.lists; + + function getIndex(status) { + const index = sectionOrder.indexOf(status); + return index === -1 ? sectionOrder.length : index; + } + + prog.sort((a, b) => getIndex(a.name) - getIndex(b.name)); + + const user = get.user; + + const time = convertMinutesToDays(user.statistics.anime.minutesWatched); + + return { + props: { + media: prog, + sessions: session, + user: user, + time: time, + }, + }; +} + +function UnixTimeConverter({ unixTime }) { + const date = new Date(unixTime * 1000); // multiply by 1000 to convert to milliseconds + const formattedDate = date.toISOString().slice(0, 10); // format date to YYYY-MM-DD + + return

    {formattedDate}

    ; +} + +function convertMinutesToDays(minutes) { + const hours = minutes / 60; + const days = hours / 24; + + if (days >= 1) { + return days % 1 === 0 + ? { days: `${parseInt(days)}` } + : { days: `${days.toFixed(1)}` }; + } else { + return hours % 1 === 0 + ? { hours: `${parseInt(hours)}` } + : { hours: `${hours.toFixed(1)}` }; + } +} diff --git a/pages/search.js b/pages/search.js index e398e9e..99b12d7 100644 --- a/pages/search.js +++ b/pages/search.js @@ -62,16 +62,11 @@ const sorts = [ export default function Card() { const router = useRouter(); - // const { genres } = router.query; - // console.log(genres); const { aniAdvanceSearch } = useAniList(); const [data, setData] = useState(); const [loading, setLoading] = useState(true); - // const [selectedGenre, setSelectedGenre] = useState(null); - // const [selectedType, setSelectedType] = useState(type[0]); - // const [selectedSort, setSelectedSort] = useState(null); const { hasil } = router.query; @@ -85,7 +80,6 @@ export default function Card() { const [isVisible, setIsVisible] = useState(false); - // const [query, setQuery] = useState(hasil || null); const inputRef = useRef(null); async function advance() { @@ -107,32 +101,15 @@ export default function Card() { advance(); }, [search, type, seasonYear, season, genres, perPage, sort]); - // useEffect(() => { - // async function fetchData() { - // setLoading(true); - // try { - // const res = await fetch( - // `https://api.moopa.my.id/meta/anilist/advanced-search?${ - // query ? `query=${query}&` : "" - // }${selectedGenre ? `genres=["${selectedGenre}"]&` : ""}${ - // selectedType ? `type=${selectedType}&` : "" - // }${selectedSort ? `sort=["${selectedSort}"]` : ""}` - // ); - // const data = await res.json(); - // setData(data); - // setLoading(false); - // } catch (e) { - // console.error(e); - // } - // } - // fetchData(); - // }, [query, selectedGenre, selectedType, selectedSort]); - const handleKeyDown = async (event) => { if (event.key === "Enter") { event.preventDefault(); const inputValue = event.target.value; - setQuery(inputValue); + if (inputValue === "") { + setQuery(null); + } else { + setQuery(inputValue); + } } }; @@ -193,7 +170,7 @@ export default function Card() { className="w-[297px] h-[46px] bg-secondary rounded-[10px] flex items-center text-center" onChange={(e) => setSelectedSort(e.target.value)} > - + {sorts.map((option) => ( - {sort.map((option) => ( + + {sorts.map((option) => ( @@ -317,55 +294,16 @@ export default function Card() { {loading ? ( <> -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    -
    - - -
    + {[1, 2, 4, 5, 6, 7, 8].map((item) => ( +
    + + +
    + ))}     ) : data && data.media.length === 0 ? ( @@ -390,7 +328,6 @@ export default function Card() { className="" >
    -

    +

    + {anime.status === "RELEASING" ? ( + + ) : anime.status === "NOT_YET_RELEASED" ? ( + + ) : null} {anime.title.userPreferred}

    diff --git a/pages/test.js b/pages/test.js deleted file mode 100644 index 0db3a17..0000000 --- a/pages/test.js +++ /dev/null @@ -1,236 +0,0 @@ -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, markComplete } = 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

    Loading...

    ; - // if (error) return

    Error :(

    ; - - // const { mediaList } = data.Page; - // console.log(mediaList); - // }; - - // const [open, setOpen] = useState(false); - - async function markAsComplete(id) { - const response = await markComplete(id); - console.log(response); - } - - 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
    Loading...
    ; - } - - const astatus = "COMPLETED"; - - // const { data } = aniAdvanceSearch({ - // search: "naruto", - // }); - - // console.log(advanceSearch); - - return ( - //
    - // - //
    - <> - {/* - setOpen(false)}> -
    -
    - iamge -
    -
    Episode 6
    -
    test
    -
    -     */} - {!session && ( - - )} - {session && ( -
    - - -
    - )} - {media?.length > 0 && ( -
    - {media.map((item, index) => { - return ( -
    -

    {item.name}

    -
    - {item.entries.map((items, index) => { - return ( -
    -
    -
    - image deez nuts -
    -
    -

    - {items.media.title.romaji} -

    -

    - Episodes {items.progress} - {items.media.episodes} -

    - {item.name === "Watching" && ( - - )} -
    -
    -
    - ); - })} -
    -
    - ); - })} - {/*

    Paused

    -
    - {media[1].entries.map((item, index) => { - return ( -
    -
    -
    - image deez nuts -
    -
    -

    - {item.media.title.romaji} -

    -

    - Episodes {item.progress} - {item.media.episodes} -

    -
    -
    -
    - ); - })} -
    -

    Dropped

    -
    - {media[2].entries.map((item, index) => { - return ( -
    -
    -
    - image deez nuts -
    -
    -

    - {item.media.title.romaji} -

    -

    - Episodes {item.progress} - {item.media.episodes} -

    -
    -
    -
    - ); - })} -
    */} -
    - )} - Home - - ); -} diff --git a/pages/testing.js b/pages/testing.js index 7540093..e951635 100644 --- a/pages/testing.js +++ b/pages/testing.js @@ -1,18 +1,34 @@ import { signIn, signOut, useSession } from "next-auth/react"; +import { getServerSession } from "next-auth/next"; +import { authOptions } from "./api/auth/[...nextauth]"; +const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || "http://localhost:3000"; -export default function Testing() { +export default function Testing({ sesi, data, progress, statusWatch }) { const { data: session, status } = useSession(); + // console.log(progress); async function handleUpdate() { - const lastPlayed = { - id: "apahisya", - time: 812989929, - }; - const res = await fetch("/api/watched-episode", { + // const data = ; + const res = await fetch("/api/update-user", { method: "POST", body: JSON.stringify({ - username: session?.user.name, - id: 150672, - newData: lastPlayed, + name: session?.user.name, + newData: { + recentWatch: { + id: parseInt(9280220), + title: { + romaji: "something title here", + }, + description: + "lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod.", + coverImage: { + extraLarge: "this should be an image url", + }, + episode: { + id: "first-id-yeah", + time: 12344, + }, + }, + }, }), headers: { "Content-Type": "application/json", @@ -23,7 +39,7 @@ export default function Testing() { console.log(res.status); } - console.log(session); + console.log(statusWatch); return (
    @@ -34,3 +50,43 @@ export default function Testing() {
    ); } + +export async function getServerSideProps(context) { + const session = await getServerSession(context.req, context.res, authOptions); + + const res = await fetch(`${baseUrl}/api/get-media`, { + method: "POST", + body: JSON.stringify({ + username: session?.user.name, + }), + headers: { + "Content-Type": "application/json", + }, + }); + + const prog = await res.json(); + + const gat = prog.lists.map((item) => item.entries); + const git = gat.map((item) => item.find((item) => item.media.id === 130003)); + const gut = git.find((item) => item?.media.id === 130003); + + let progress = null; + let statusWatch = "CURRENT"; + + if (gut?.status === "COMPLETED") { + statusWatch = "REPEATING"; + } + + if (gut) { + progress = gut?.progress; + } + + return { + props: { + sesi: session, + data: gut || null, + progress: progress, + statusWatch: statusWatch, + }, + }; +} -- cgit v1.2.3