aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorFactiven <[email protected]>2023-04-29 10:41:23 +0700
committerFactiven <[email protected]>2023-04-29 10:41:23 +0700
commitf5086c7c394a9910a31ec80df143f5655cfde501 (patch)
tree8e99ef6852825ca8a421cc5b52c7c067f5098baa
parentEditor List v0.5 (diff)
downloadmoopa-f5086c7c394a9910a31ec80df143f5655cfde501.tar.xz
moopa-f5086c7c394a9910a31ec80df143f5655cfde501.zip
Bug Fixes
> Fixed loop refresh when failed fetching episode data
Diffstat
-rw-r--r--pages/anime/[...id].js56
-rw-r--r--pages/profile/[user].js140
-rw-r--r--styles/globals.css27
3 files changed, 138 insertions, 85 deletions
diff --git a/pages/anime/[...id].js b/pages/anime/[...id].js
index ef54b1b..63849bc 100644
--- a/pages/anime/[...id].js
+++ b/pages/anime/[...id].js
@@ -140,15 +140,6 @@ const infoQuery = `query ($id: Int) {
}
}`;
-const stats = [
- "Watching",
- "Plan to Watch",
- "Completed",
- "Dropped",
- "Paused",
- "Rewatching",
-];
-
export default function Info() {
const { data: session, status } = useSession();
const [data, setData] = useState(null);
@@ -166,8 +157,8 @@ export default function Info() {
const [time, setTime] = useState(0);
const { id } = useRouter().query;
- const [aniProgress, setAniProgress] = useState(0);
const [epiStatus, setEpiStatus] = useState("ok");
+ const [error, setError] = useState(null);
const rec = info?.recommendations?.nodes.map(
(data) => data.mediaRecommendation
@@ -185,6 +176,7 @@ export default function Info() {
progress: null,
stall: false,
EpiStatus: "ok",
+ error: null,
};
// Reset all state variables to their default values
@@ -227,12 +219,20 @@ export default function Info() {
]);
const data = await res.json();
const infos = await info.json();
+
+ if (res.status === 500) {
+ setEpisode(null);
+ setEpiStatus("error");
+ setError(data.message);
+ } else if (res.status === 404) {
+ window.location.href("/404");
+ }
setInfo(infos.data.Media);
// setLog(data);
const textColor = setTxtColor(infos.data.Media.coverImage?.color);
- if (!data || data.episodes.length === 0) {
+ if (!data || data?.episodes?.length === 0) {
const res = await fetch(
`https://api.consumet.org/meta/anilist/info/${id[0]}?provider=9anime`
);
@@ -240,6 +240,7 @@ export default function Info() {
if (res.status === 500) {
setEpisode(null);
setEpiStatus("error");
+ setError(datas.message);
} else {
setEpisode(datas.episodes);
}
@@ -285,7 +286,6 @@ export default function Info() {
if (gut) {
setProgress(gut?.progress);
- setAniProgress(parseInt(gut?.progress));
if (gut.status === "CURRENT") {
setStatuses({ name: "Watching", value: "CURRENT" });
} else if (gut.status === "PLANNING") {
@@ -331,8 +331,6 @@ export default function Info() {
document.body.style.overflow = "auto";
}
- // console.log(progress);
-
return (
<>
<Head>
@@ -726,9 +724,19 @@ export default function Info() {
<p>No Episodes Available</p>
)
) : (
- <p className="flex-center">
- Something went wrong, can't retrieve any episodes :/
- </p>
+ // <p className="flex-center">
+ // Something went wrong, can't retrieve any episodes :/
+ // </p>
+ <div className="flex flex-col">
+ <h1>{epiStatus} while retrieving data</h1>
+ <pre
+ className={`rounded-md overflow-hidden ${getLanguageClassName(
+ "bash"
+ )}`}
+ >
+ <code>{error}</code>
+ </pre>
+ </div>
)}
</div>
)
@@ -799,3 +807,17 @@ function setTxtColor(hexColor) {
const brightness = getBrightness(hexColor);
return brightness < 150 ? "#fff" : "#000";
}
+
+const getLanguageClassName = (language) => {
+ switch (language) {
+ case "javascript":
+ return "language-javascript";
+ case "html":
+ return "language-html";
+ case "bash":
+ return "language-bash";
+ // add more languages here as needed
+ default:
+ return "";
+ }
+};
diff --git a/pages/profile/[user].js b/pages/profile/[user].js
index a27d5b9..e28e1cb 100644
--- a/pages/profile/[user].js
+++ b/pages/profile/[user].js
@@ -185,75 +185,79 @@ export default function MyList({ media, sessions, user, time }) {
<div className="lg:w-[75%] grid gap-10 my-12 lg:pt-16">
{media.length !== 0 ? (
- filterMedia(listFilter).map((item, index) => (
- <div key={index} className="flex flex-col gap-5 mx-3">
- <h1 className="font-karla font-bold text-xl">{item.name}</h1>
- <table className="bg-secondary rounded-lg">
- <thead>
- <tr>
- <th className="font-bold text-xs py-3 text-start pl-10 lg:w-[75%] w-[65%]">
- Title
- </th>
- <th className="font-bold text-xs py-3">Score</th>
- <th className="font-bold text-xs py-3">Progress</th>
- </tr>
- </thead>
- <tbody className="">
- {item.entries.map((item, index) => (
- <tr
- key={index + 1}
- className="hover:bg-orange-400 duration-150 ease-in-out group relative"
- >
- <td className="font-medium py-2 pl-2 rounded-l-lg">
- <div className="flex items-center gap-2">
- {item.media.status === "RELEASING" ? (
- <span className="dot group-hover:invisible bg-green-500 shrink-0" />
- ) : item.media.status === "NOT_YET_RELEASED" ? (
- <span className="dot group-hover:invisible bg-red-500 shrink-0" />
- ) : (
- <span className="dot group-hover:invisible shrink-0" />
- )}
- <Image
- src={item.media.coverImage.large}
- alt="Cover Image"
- width={500}
- height={500}
- className="object-cover rounded-md w-10 h-10 shrink-0"
- />
- <div className="absolute -top-10 -left-40 invisible lg:group-hover:visible">
- <Image
- src={item.media.coverImage.large}
- alt={item.media.id}
- width={1000}
- height={1000}
- className="object-cover h-[186px] w-[140px] shrink-0 rounded-md"
- />
- </div>
- <Link
- href={`/anime/${item.media.id}`}
- className="font-semibold font-karla pl-2 text-sm line-clamp-1"
- title={item.media.title.romaji}
- >
- {item.media.title.romaji}
- </Link>
- </div>
- </td>
- <td className="text-center text-xs text-txt">
- {item.score === 0 ? null : item.score}
- </td>
- <td className="text-center text-xs text-txt rounded-r-lg">
- {item.progress === item.media.episodes
- ? item.progress
- : item.media.episodes === null
- ? item.progress
- : `${item.progress}/${item.media.episodes}`}
- </td>
+ filterMedia(listFilter).map((item, index) => {
+ return (
+ <div key={index} className="flex flex-col gap-5 mx-3">
+ <h1 className="font-karla font-bold text-xl">{item.name}</h1>
+ <table className="bg-secondary rounded-lg">
+ <thead>
+ <tr>
+ <th className="font-bold text-xs py-3 text-start pl-10 lg:w-[75%] w-[65%]">
+ Title
+ </th>
+ <th className="font-bold text-xs py-3">Score</th>
+ <th className="font-bold text-xs py-3">Progress</th>
</tr>
- ))}
- </tbody>
- </table>
- </div>
- ))
+ </thead>
+ <tbody className="">
+ {item.entries.map((item) => {
+ return (
+ <tr
+ key={item.mediaId}
+ className="hover:bg-orange-400 duration-150 ease-in-out group relative"
+ >
+ <td className="font-medium py-2 pl-2 rounded-l-lg">
+ <div className="flex items-center gap-2">
+ {item.media.status === "RELEASING" ? (
+ <span className="dot group-hover:invisible bg-green-500 shrink-0" />
+ ) : item.media.status === "NOT_YET_RELEASED" ? (
+ <span className="dot group-hover:invisible bg-red-500 shrink-0" />
+ ) : (
+ <span className="dot group-hover:invisible shrink-0" />
+ )}
+ <Image
+ src={item.media.coverImage.large}
+ alt="Cover Image"
+ width={500}
+ height={500}
+ className="object-cover rounded-md w-10 h-10 shrink-0"
+ />
+ <div className="absolute -top-10 -left-40 invisible lg:group-hover:visible">
+ <Image
+ src={item.media.coverImage.large}
+ alt={item.media.id}
+ width={1000}
+ height={1000}
+ className="object-cover h-[186px] w-[140px] shrink-0 rounded-md"
+ />
+ </div>
+ <Link
+ href={`/anime/${item.media.id}`}
+ className="font-semibold font-karla pl-2 text-sm line-clamp-1"
+ title={item.media.title.romaji}
+ >
+ {item.media.title.romaji}
+ </Link>
+ </div>
+ </td>
+ <td className="text-center text-xs text-txt">
+ {item.score === 0 ? null : item.score}
+ </td>
+ <td className="text-center text-xs text-txt rounded-r-lg">
+ {item.progress === item.media.episodes
+ ? item.progress
+ : item.media.episodes === null
+ ? item.progress
+ : `${item.progress}/${item.media.episodes}`}
+ </td>
+ </tr>
+ );
+ })}
+ </tbody>
+ </table>
+ </div>
+ );
+ })
) : (
<div className="w-screen lg:w-full flex-center flex-col gap-5">
{user.name === sessions?.user.name ? (
diff --git a/styles/globals.css b/styles/globals.css
index ff7a1bb..810d8b0 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -203,3 +203,30 @@ button {
transform: translate(24px, 0);
}
}
+
+/* Add this CSS to your global styles or a component-specific CSS file */
+pre {
+ color: #f8f8f2;
+ font-family: "Fira Code", monospace;
+ font-size: 14px;
+ line-height: 1.5;
+ padding: 1rem;
+ margin: 1rem 0;
+ @apply bg-[#191c24];
+}
+
+pre code {
+ display: block;
+}
+
+.language-javascript {
+ color: #f8f8f2;
+}
+
+.language-html {
+ color: #e6db74;
+}
+
+.language-bash {
+ color: #89b482;
+}
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 03:53:26 +0000