tried to leverage caching of next js: trending and recent animes info are now cached along with all the animes when you search for one

6 files changed, 32 insertions, 9 deletions

diff --git a/src/app/anime/recent/page.jsx b/src/app/anime/recent/page.jsx
index b197899..645df11 100644
--- a/src/app/anime/recent/page.jsx
+++ b/src/app/anime/recent/page.jsx
@@ -1,9 +1,11 @@
 import Image from "next/image";
 import Link from "next/link";
 import styles from "./recent.module.css";
+import { preFetchAnimeInfo } from "../videoLinkfetcher";
 
 export default async function Releases() {
 	const data = await fetchRecentEpisodes();
+	preFetchAnimeInfo(data);
 
 	return (
 		<div className={styles.RecentContainer}>
@@ -21,7 +23,7 @@ export default async function Releases() {
 						>
 							<div className={styles.RecentEntries}>
 								<Image
-									src={item.image}
+									src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=${item.image}`}
 									className={styles.RecentImage}
 									width={150}
 									height={230}
diff --git a/src/app/anime/search/components/fetchInfo.js b/src/app/anime/search/components/fetchInfo.js
index 07b203d..a458607 100644
--- a/src/app/anime/search/components/fetchInfo.js
+++ b/src/app/anime/search/components/fetchInfo.js
@@ -6,7 +6,7 @@ export default async function Results(id) {
 
 async function testFunction(title) {
 	const res = await fetch(
-		"https://consumet-api-di2e.onrender.com/anime/gogoanime/" + title,
+		"https://consumet-jade.vercel.app/anime/gogoanime/" + title,
 		{ cache: "force-cache" }
 	);
 	const data = await res.json();
diff --git a/src/app/anime/search/components/fetchedInfo.js b/src/app/anime/search/components/fetchedInfo.js
index 9a1d187..aa3ffb1 100644
--- a/src/app/anime/search/components/fetchedInfo.js
+++ b/src/app/anime/search/components/fetchedInfo.js
@@ -1,8 +1,10 @@
 import styles from "../search.module.css";
 import Link from "next/link";
 import Image from "next/image";
+import { preFetchAnimeInfo } from "../../videoLinkfetcher";
 
 export default async function fetchedInfo(data) {
+	preFetchAnimeInfo(data);
 	return (
 		<div className={styles.animeEntry}>
 			{data ? (
@@ -16,10 +18,10 @@ export default async function fetchedInfo(data) {
 							<div className={styles.anime}>
 								<p>{item.title}</p>
 								<Image
-									src={item.image}
+									src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=${item.image}`}
 									className={styles.animeImage}
 									width={120}
-									height={160}
+									height={180}
 									alt="Drama Poster"
 								/>
 							</div>
diff --git a/src/app/anime/search/search.module.css b/src/app/anime/search/search.module.css
index 28fae6e..74bd7f2 100644
--- a/src/app/anime/search/search.module.css
+++ b/src/app/anime/search/search.module.css
@@ -37,7 +37,7 @@
 }
 
 .animeEntry:hover .anime {
-	opacity: 0.5;
+	opacity: 0.4;
 }
 
 .animeEntry:hover .anime:hover {
@@ -63,13 +63,13 @@
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	padding: 10px;
+	padding: 5px;
 	border-style: dotted;
 	border-color: #636363;
 	margin: 10px 10px 0px 0px;
 	border-radius: 10px;
 	border-width: 4px;
-	transition: opacity 400ms ease-in;
+	transition: opacity 200ms ease-in;
 	background-color: #353535a6;
 
 }
@@ -90,4 +90,8 @@
 	.searchContainer {
 		width: 70%;
 	}
+
+	.anime p {
+		width: 50dvw;
+	}
 }
\ No newline at end of file
diff --git a/src/app/anime/top-airing/page.jsx b/src/app/anime/top-airing/page.jsx
index e385629..2c4fb88 100644
--- a/src/app/anime/top-airing/page.jsx
+++ b/src/app/anime/top-airing/page.jsx
@@ -1,10 +1,11 @@
 import styles from "./trending.module.css";
 import Image from "next/image";
 import Link from "next/link";
+import { preFetchAnimeInfo } from "../videoLinkfetcher";
 
 export default async function Trending() {
 	const data = await test();
-
+	preFetchAnimeInfo(data);
 	return (
 		<div className={styles.TrendingContainer}>
 			<div className={styles.TrendingText}>
@@ -21,7 +22,7 @@ export default async function Trending() {
 						>
 							<div className={styles.trendingEntries}>
 								<Image
-									src={item.image}
+									src={`https://sup-proxy.zephex0-f6c.workers.dev/api-content?url=${item.image}`}
 									className={styles.trendingImage}
 									width={150}
 									height={230}
diff --git a/src/app/anime/videoLinkfetcher.js b/src/app/anime/videoLinkfetcher.js
index 3963bd3..a2f4f80 100644
--- a/src/app/anime/videoLinkfetcher.js
+++ b/src/app/anime/videoLinkfetcher.js
@@ -30,3 +30,17 @@ export async function preFetchAnimeLinks(data, n = 40) {
 		console.error("Error occurred while pre-fetching video links:", error);
 	}
 }
+
+export async function preFetchAnimeInfo(data) {
+	try {
+		const fetchPromises = data.results.map(async (element) => {
+			const link = `https://anime-sensei-api.vercel.app/anime/gogoanime/info/${element.id}`;
+			await fetch(link, { next: { revalidate: 86400 } });
+		});
+
+		await Promise.all(fetchPromises);
+		console.log("Anime info pre-fetched successfully!");
+	} catch (error) {
+		console.error("Error occurred while pre-fetching anime info: ", error);
+	}
+}