From f287e8225892266acf162ba94ee31ce623e06890 Mon Sep 17 00:00:00 2001 From: Factiven Date: Fri, 28 Apr 2023 13:36:29 +0700 Subject: Editor List v0.2 --- components/listEditor.js | 15 ++++++++++----- components/useAlert.js | 6 ++++-- pages/anime/[...id].js | 2 +- 3 files changed, 15 insertions(+), 8 deletions(-) diff --git a/components/listEditor.js b/components/listEditor.js index f9e8ab8..d90e481 100644 --- a/components/listEditor.js +++ b/components/listEditor.js @@ -9,6 +9,7 @@ const ListEditor = ({ animeId, session, stats, prg, max }) => { const handleSubmit = async (e) => { e.preventDefault(); + console.log("Submitting", status, progress); try { const response = await fetch("https://graphql.anilist.co/", { method: "POST", @@ -29,12 +30,16 @@ const ListEditor = ({ animeId, session, stats, prg, max }) => { `, variables: { mediaId: animeId, - progress: progress ? parseInt(progress) : null, + progress: progress, status: status || null, }, }), }); const { data } = await response.json(); + if (data.SaveMediaListEntry === null) { + showAlert("Something went wrong", "error"); + return; + } console.log("Saved media list entry", data); // success(); showAlert("Media list entry saved", "success"); @@ -45,7 +50,7 @@ const ListEditor = ({ animeId, session, stats, prg, max }) => { }; return ( -
+
{message && ( { id="status" value={status} onChange={(e) => setStatus(e.target.value)} - className="rounded-md px-2 py-1" + className="rounded-md px-2 py-1 bg-[#363642]" > @@ -92,13 +97,13 @@ const ListEditor = ({ animeId, session, stats, prg, max }) => { value={progress} max={max} onChange={(e) => setProgress(e.target.value)} - className="rounded-md px-2 py-1" + className="rounded-md px-2 py-1 bg-[#363642]" min="0" />
diff --git a/components/useAlert.js b/components/useAlert.js index 7426096..fa82c42 100644 --- a/components/useAlert.js +++ b/components/useAlert.js @@ -10,8 +10,10 @@ const useAlert = () => { setTimeout(() => { setMessage(""); setType(""); - window.location.reload(); - }, 5000); + if (type === "success") { + window.location.reload(); + } + }, 3000); }; return { message, type, showAlert }; diff --git a/pages/anime/[...id].js b/pages/anime/[...id].js index f26c70d..99973d4 100644 --- a/pages/anime/[...id].js +++ b/pages/anime/[...id].js @@ -368,7 +368,7 @@ export default function Info() {
)} - {session && info && progress && ( + {session && loading && ( Date: Fri, 28 Apr 2023 16:50:49 +0700 Subject: Editor List v0.3 --- pages/anime/[...id].js | 122 +++++++++++++++++++++++++++---------------------- 1 file changed, 68 insertions(+), 54 deletions(-) diff --git a/pages/anime/[...id].js b/pages/anime/[...id].js index 99973d4..9ad58a2 100644 --- a/pages/anime/[...id].js +++ b/pages/anime/[...id].js @@ -168,11 +168,14 @@ export default function Info() { const [aniStatus, setAniStatus] = useState(statuses); const [aniProgress, setAniProgress] = useState(0); + const [epiStatus, setEpiStatus] = useState("ok"); const rec = info?.recommendations?.nodes.map( (data) => data.mediaRecommendation ); + // const [log, setLog] = useState(null); + useEffect(() => { const defaultState = { data: null, @@ -181,6 +184,8 @@ export default function Info() { loading: true, statuses: null, progress: null, + stall: false, + EpiStatus: "ok", }; // Reset all state variables to their default values @@ -224,6 +229,7 @@ export default function Info() { const data = await res.json(); const infos = await info.json(); setInfo(infos.data.Media); + // setLog(data); const textColor = setTxtColor(infos.data.Media.coverImage?.color); @@ -232,12 +238,17 @@ export default function Info() { `https://api.consumet.org/meta/anilist/info/${id[0]}?provider=9anime` ); const datas = await res.json(); + if (res.status === 500) { + setEpisode(null); + setEpiStatus("error"); + } else { + setEpisode(datas.episodes); + } setColor({ backgroundColor: `${data?.color || "#ffff"}`, color: textColor, }); setStall(true); - setEpisode(datas.episodes); } else { setEpisode(data.episodes); } @@ -280,8 +291,8 @@ export default function Info() { setStatuses("Watching"); setAniStatus("Watching"); } else if (gut.status === "PLANNING") { - setStatuses("Planned to watch"); - setAniStatus("Planned to watch"); + setStatuses("Plan to watch"); + setAniStatus("Plan to watch"); } else if (gut.status === "COMPLETED") { setStatuses("Completed"); setAniStatus("Completed"); @@ -435,12 +446,13 @@ export default function Info() { {info && (
-
handleOpen()} > {statuses ? statuses : "Add to List"} -
+
@@ -477,7 +489,7 @@ export default function Info() {
{info ? ( <> -
+
poster anime + ) : ( @@ -554,7 +573,6 @@ export default function Info() { ) : ( )} - {/*

{data.description}

*/}
@@ -670,58 +688,54 @@ export default function Info() {
)} - {statuses && ( - <> -
- {statuses} - - status - -
- - )}
{loading ? ( data && (
- {episode?.length !== 0 ? ( - episode?.map((epi, index) => { - return ( -
- { + return ( +
-

Episode {epi.number}

- {epi.title && ( -

- "{epi.title}" -

+ +

Episode {epi.number}

+ {epi.title && ( +

+ "{epi.title}" +

+ )} + + {index !== episode?.length - 1 && ( + )} - - {index !== episode?.length - 1 && ( - - )} -
- ); - }) +
+ ); + }) + ) : ( +

No Episodes Available

+ ) ) : ( -

No Episodes Available

+

+ Something went wrong, can't retrieve any episodes :/ +

)}
) -- cgit v1.2.3 From b546c63c38c608cfbbf68ddd1aa4d1327489d91c Mon Sep 17 00:00:00 2001 From: Factiven Date: Fri, 28 Apr 2023 17:31:15 +0700 Subject: Editor List v0.4 --- components/listEditor.js | 85 +++++++++++++++++++++++++++--------------------- pages/anime/[...id].js | 12 +++++-- 2 files changed, 58 insertions(+), 39 deletions(-) diff --git a/components/listEditor.js b/components/listEditor.js index d90e481..ed54987 100644 --- a/components/listEditor.js +++ b/components/listEditor.js @@ -50,7 +50,7 @@ const ListEditor = ({ animeId, session, stats, prg, max }) => { }; return ( -
+
{message && ( { exit={{ opacity: 0, y: 10 }} className={`${ type === "success" ? "bg-green-500" : "bg-red-500" - } text-white px-4 py-1 mb-4 rounded-md`} + } text-white px-4 py-1 mb-4 rounded-md text-sm sm:text-base`} > {message} )} +
+ List Editor +
-
- - -
-
- - setProgress(e.target.value)} - className="rounded-md px-2 py-1 bg-[#363642]" - min="0" - /> +
+
+ + +
+
+ + setProgress(e.target.value)} + className="rounded-sm px-2 py-1 bg-[#363642] w-[50%] sm:w-[150px] text-sm sm:text-base" + min="0" + /> +
diff --git a/pages/anime/[...id].js b/pages/anime/[...id].js index 9ad58a2..5e66133 100644 --- a/pages/anime/[...id].js +++ b/pages/anime/[...id].js @@ -451,7 +451,11 @@ export default function Info() { className="bg-action px-10 rounded-sm font-karla font-bold" onClick={() => handleOpen()} > - {statuses ? statuses : "Add to List"} + {loading + ? statuses + ? statuses + : "Add to List" + : "Loading..."}
@@ -504,7 +508,11 @@ export default function Info() { className="bg-action flex-center z-20 h-[20px] w-[180px] absolute bottom-0 rounded-sm font-karla font-bold" onClick={() => handleOpen()} > - {statuses ? statuses : "Add to List"} + {loading + ? statuses + ? statuses + : "Add to List" + : "Loading..."} ) : ( -- cgit v1.2.3 From ad5721b03983e2db4c69738b82d2a871ebbb1065 Mon Sep 17 00:00:00 2001 From: Factiven Date: Fri, 28 Apr 2023 17:51:36 +0700 Subject: Editor List v0.5 --- components/listEditor.js | 5 ++--- pages/anime/[...id].js | 35 ++++++++++------------------------- 2 files changed, 12 insertions(+), 28 deletions(-) diff --git a/components/listEditor.js b/components/listEditor.js index ed54987..41a3172 100644 --- a/components/listEditor.js +++ b/components/listEditor.js @@ -9,7 +9,7 @@ const ListEditor = ({ animeId, session, stats, prg, max }) => { const handleSubmit = async (e) => { e.preventDefault(); - console.log("Submitting", status, progress); + console.log("Submitting", status?.name, progress); try { const response = await fetch("https://graphql.anilist.co/", { method: "POST", @@ -81,11 +81,10 @@ const ListEditor = ({ animeId, session, stats, prg, max }) => { setStatus(e.target.value)} - className="rounded-sm px-2 py-1 bg-[#363642] w-[50%] sm:w-[150px] text-sm sm:text-base" - > - - - - - - -
-
- - setProgress(e.target.value)} - className="rounded-sm px-2 py-1 bg-[#363642] w-[50%] sm:w-[150px] text-sm sm:text-base" - min="0" +
+ {image && ( +
+ image + image
-
- - +
+
+ + +
+
+ + setProgress(e.target.value)} + className="rounded-sm px-2 py-1 bg-[#363642] w-[50%] sm:w-[150px] text-sm sm:text-base" + min="0" + /> +
+
+ + +
); }; diff --git a/components/modal.js b/components/modal.js index 0a9d349..f237d77 100644 --- a/components/modal.js +++ b/components/modal.js @@ -3,13 +3,13 @@ export default function Modal({ open, onClose, children }) {
e.stopPropagation()} className={`shadow rounded-xl p-6 transition-all ${ - open ? "scale-125 opacity-100" : "scale-100 opacity-0" + open ? "scale-100 opacity-100" : "scale-75 opacity-0" }`} > {children} diff --git a/pages/anime/[...id].js b/pages/anime/[...id].js index 63849bc..3b1cf91 100644 --- a/pages/anime/[...id].js +++ b/pages/anime/[...id].js @@ -278,11 +278,9 @@ export default function Info() { const gat = prog.lists.map((item) => item.entries); const git = gat.map((item) => - item.find((item) => item.media.id === parseInt(data?.id)) - ); - const gut = git?.find( - (item) => item?.media.id === parseInt(data?.id) + item.find((item) => item.mediaId === parseInt(id[0])) ); + const gut = git?.find((item) => item?.mediaId === parseInt(id[0])); if (gut) { setProgress(gut?.progress); @@ -367,6 +365,7 @@ export default function Info() { stats={statuses} prg={progress} max={info?.episodes} + image={info} /> )}
-- cgit v1.2.3 From a22aa58746cc852331d48e1d9d3c00f5e09564a1 Mon Sep 17 00:00:00 2001 From: Factiven Date: Sat, 29 Apr 2023 17:42:24 +0700 Subject: Editor List v0.7 --- components/listEditor.js | 166 ++++++++++++++++++++++++----------------------- components/modal.js | 2 +- pages/anime/[...id].js | 4 +- 3 files changed, 88 insertions(+), 84 deletions(-) diff --git a/components/listEditor.js b/components/listEditor.js index 64ca632..50a62c5 100644 --- a/components/listEditor.js +++ b/components/listEditor.js @@ -1,6 +1,6 @@ import { useState } from "react"; import useAlert from "./useAlert"; -import { motion as m } from "framer-motion"; +import { AnimatePresence, motion as m } from "framer-motion"; import Image from "next/image"; const ListEditor = ({ animeId, session, stats, prg, max, image = null }) => { @@ -51,93 +51,97 @@ const ListEditor = ({ animeId, session, stats, prg, max, image = null }) => { }; return ( -
- {message && ( - - {message} - - )} +
List Editor
-
- {image && ( -
- image - image -
+ + {message && ( + + {message} + )} -
-
-
- - -
-
- - setProgress(e.target.value)} - className="rounded-sm px-2 py-1 bg-[#363642] w-[50%] sm:w-[150px] text-sm sm:text-base" - min="0" + +
+
+ {image && ( +
+ image + image
-
- - +
+
+ + +
+
+ + setProgress(e.target.value)} + className="rounded-sm px-2 py-1 bg-[#363642] w-[50%] sm:w-[150px] text-sm sm:text-base" + min="0" + /> +
+
+ + +
); diff --git a/components/modal.js b/components/modal.js index f237d77..78b76d7 100644 --- a/components/modal.js +++ b/components/modal.js @@ -8,7 +8,7 @@ export default function Modal({ open, onClose, children }) { >
e.stopPropagation()} - className={`shadow rounded-xl p-6 transition-all ${ + className={`shadow rounded-xl transition-all ${ open ? "scale-100 opacity-100" : "scale-75 opacity-0" }`} > diff --git a/pages/anime/[...id].js b/pages/anime/[...id].js index 3b1cf91..712197e 100644 --- a/pages/anime/[...id].js +++ b/pages/anime/[...id].js @@ -339,14 +339,14 @@ export default function Info() { handleClose()}> -
+
{!session && (

Edit your list

+ ); diff --git a/pages/anime/[...id].js b/pages/anime/[...id].js index 712197e..26c42cb 100644 --- a/pages/anime/[...id].js +++ b/pages/anime/[...id].js @@ -165,6 +165,7 @@ export default function Info() { ); // const [log, setLog] = useState(null); + // console.log(rec); useEffect(() => { const defaultState = { @@ -181,6 +182,7 @@ export default function Info() { // Reset all state variables to their default values Object.keys(defaultState).forEach((key) => { + document.body.style.overflow = "auto"; const value = defaultState[key]; if (Array.isArray(value)) { value.length @@ -341,7 +343,7 @@ export default function Info() { handleClose()}>
{!session && ( -
+

Edit your list

@@ -358,7 +360,7 @@ export default function Info() {
)} - {session && loading && ( + {session && loading && info && ( {info ? (
-
- {info?.episodes} Episodes -
-
- {info?.startDate?.year} -
-
- {info?.averageScore}% -
-
- {info?.type} -
-
- {info?.status} -
+ {info?.episodes && ( +
+ {info?.episodes} Episodes +
+ )} + {info?.startDate?.year && ( +
+ {info?.startDate?.year} +
+ )} + {info?.averageScore && ( +
+ {info?.averageScore}% +
+ )} + {info?.type && ( +
+ {info?.type} +
+ )} + {info?.status && ( +
+ {info?.status} +
+ )}
- {rec && ( + {info && rec?.length !== 0 && (
{ const defaultState = { @@ -137,6 +136,11 @@ export default function Info({ sessions, id, aniId, provider }) { setPlayingEpisode(playingEpisode); + const playing = aniData.episodes.filter((item) => item.id == id); + // .map((item) => item.); + + setPoster(playing); + const title = aniData.episodes .filter((item) => item.id == id) .find((item) => item.title !== null); @@ -255,12 +259,8 @@ export default function Info({ sessions, id, aniId, provider }) { fetchData(); }, [id, aniId, provider, sessions]); - // console.log(fallback); - const { Notification: NotificationComponent } = useNotification(); - // console.log(); - const [open, setOpen] = useState(false); const [aniStatus, setAniStatus] = useState(""); const [aniProgress, setAniProgress] = useState(parseInt(playingEpisode)); @@ -282,97 +282,12 @@ export default function Info({ sessions, id, aniId, provider }) { console.log(formData); }; - // console.log(playingTitle.title); - return ( <> {playingTitle} - {/* */} - - {/* setOpen(false)}> -
-
-

- Save this Anime to Your List -

- {!sessions && ( - - )} - {sessions && ( - <> -
-
- - -
-
- - -
-
- -
-
- - )} -
-
- */}
@@ -391,6 +306,7 @@ export default function Info({ sessions, id, aniId, provider }) { op={skip.op} ed={skip.ed} title={playingTitle} + poster={poster[0]?.image} />
) : ( diff --git a/pages/categories/[id].js b/pages/categories/[id].js new file mode 100644 index 0000000..1395a33 --- /dev/null +++ b/pages/categories/[id].js @@ -0,0 +1,125 @@ +import Head from "next/head"; +import Footer from "../../components/footer"; +import { useRouter } from "next/router"; +import { useEffect, useState } from "react"; +import { useAniList } from "../../lib/useAnilist"; +import Image from "next/image"; + +export default function Categories() { + const router = useRouter(); + const { id } = router.query; + const tags = id?.replace(/-/g, " "); + const { aniAdvanceSearch } = useAniList(); + + const [data, setData] = useState(); + + const [season, setSeason] = useState(""); + const [loading, setLoading] = useState(false); + + useEffect(() => { + setLoading(true); + if (tags === "This Season") { + seasonNow(); + setLoading(false); + } else if (tags === "Popular Anime") { + PopularAnime(); + setLoading(false); + } else if (tags === "Popular Manga") { + PopularManga(); + setLoading(false); + } else { + setData(null); + setLoading(false); + } + }, [id]); + + async function seasonNow() { + const data = await aniAdvanceSearch({ + perPage: 25, + seasonYear: 2023, + season: getCurrentSeason(), + // type: "MANGA", + }); + setData(data); + } + + async function PopularAnime() { + const data = await aniAdvanceSearch({ + perPage: 25, + sort: ["POPULARITY_DESC"], + }); + setData(data); + } + + async function PopularManga() { + const data = await aniAdvanceSearch({ + perPage: 25, + sort: ["POPULARITY_DESC"], + type: "MANGA", + }); + setData(data); + } + + console.log(data); + return ( + <> + + Categories - {tags} + +
+
+ {loading ? ( +

Loading...

+ ) : ( + data && + data?.media.map((m) => { + return ( +
+ image +
+ ); + }) + )} +
+
+