Merge pull request #2 from real-zephex/kdrama-section-rewrite

The kdrama section underwent a complete rewrite.

6 files changed, 174 insertions, 0 deletions

diff --git a/src/app/kdrama/components/cacher.js b/src/app/kdrama/components/cacher.js
new file mode 100644
index 0000000..b04c932
--- /dev/null
+++ b/src/app/kdrama/components/cacher.js
@@ -0,0 +1,15 @@
+// This function pre-fetches all the video links for a drama in the background
+
+export default async function PreFetchVideoLinks(data, dramaId) {
+	try {
+		const fetchPromises = data.map(async (element) => {
+			const link = `https://consumet-api-di2e.onrender.com/movies/dramacool/watch?episodeId=${element.id}&mediaId=${dramaId}`;
+			await fetch(link, { cache: "force-cache" });
+		});
+
+		await Promise.all(fetchPromises);
+		console.log("Video links pre-fetched successfully!");
+	} catch (error) {
+		console.error("Error occurred while pre-fetching video links:", error);
+	}
+}
diff --git a/src/app/kdrama/components/popular.jsx b/src/app/kdrama/components/popular.jsx
new file mode 100644
index 0000000..d9126ec
--- /dev/null
+++ b/src/app/kdrama/components/popular.jsx
@@ -0,0 +1,42 @@
+import styles from "../styles/popular.module.css";
+import Image from "next/image";
+import Link from "next/link";
+
+export default async function PopularDramas() {
+	const popular = await getPopular();
+
+	return (
+		<div className={styles.Main}>
+			<p className={styles.popDramasText}>Popular Dramas</p>
+
+			<div className={styles.AnimeContainer}>
+				{popular &&
+					popular.results.map((item, index) => (
+						<Link
+							href={`/kdrama/${encodeURIComponent(item.id)}`}
+							key={index}
+							style={{ textDecoration: "none" }}
+						>
+							<div className={styles.AnimeEntry}>
+								<Image
+									src={item.image}
+									width={160}
+									height={240}
+									alt="Drama Poster"
+								/>
+								<p>{item.title}</p>
+							</div>
+						</Link>
+					))}
+			</div>
+		</div>
+	);
+}
+
+async function getPopular() {
+	const res = await fetch("https://dramacool-scraper.vercel.app/popular", {
+		next: { revalidate: 86400 },
+	});
+	const data = await res.json();
+	return data;
+}
diff --git a/src/app/kdrama/components/recent.jsx b/src/app/kdrama/components/recent.jsx
new file mode 100644
index 0000000..759e179
--- /dev/null
+++ b/src/app/kdrama/components/recent.jsx
@@ -0,0 +1,42 @@
+import styles from "../styles/popular.module.css";
+import Image from "next/image";
+import Link from "next/link";
+
+export default async function RecentDramas() {
+	const popular = await getPopular();
+
+	return (
+		<div className={styles.Main}>
+			<p className={styles.popDramasText}>Recently Released</p>
+
+			<div className={styles.AnimeContainer}>
+				{popular &&
+					popular.results.map((item, index) => (
+						<Link
+							href={`/kdrama/${encodeURIComponent(item.id)}`}
+							key={index}
+							style={{ textDecoration: "none" }}
+						>
+							<div className={styles.AnimeEntry}>
+								<Image
+									src={item.image}
+									width={160}
+									height={240}
+									alt="Drama Poster"
+								/>
+								<p>{item.title}</p>
+							</div>
+						</Link>
+					))}
+			</div>
+		</div>
+	);
+}
+
+async function getPopular() {
+	const res = await fetch("https://dramacool-scraper.vercel.app/recent", {
+		next: { revalidate: 86400 },
+	});
+	const data = await res.json();
+	return data;
+}
diff --git a/src/app/kdrama/components/search.jsx b/src/app/kdrama/components/search.jsx
new file mode 100644
index 0000000..4c9d00c
--- /dev/null
+++ b/src/app/kdrama/components/search.jsx
@@ -0,0 +1,56 @@
+"use client";
+
+import styles from "../styles/search.module.css";
+import { useState } from "react";
+import { FaSearch } from "react-icons/fa";
+import FetchSearchTitle from "./searchQuery";
+import Image from "next/image";
+import Link from "next/link";
+
+export default function DramaSearch() {
+	const [title, setTitle] = useState("");
+	const [infoTitle, setInfoTitle] = useState(null);
+
+	async function getSearchResults(title) {
+		const data = await FetchSearchTitle(title);
+		setInfoTitle(data);
+	}
+
+	return (
+		<div className={styles.SearchContainer}>
+			<div className={styles.Search}>
+				<FaSearch color="white" size={16} />
+				<input
+					placeholder="Search for drama"
+					onChange={(event) => setTitle(event.target.value)}
+					onKeyDown={async (e) => {
+						if ((e.key === "Enter" || e.code === 13) && title) {
+							await getSearchResults(e.target.value);
+						}
+					}}
+				></input>
+			</div>
+
+			<div className={styles.SearchResults}>
+				{infoTitle &&
+					infoTitle.results.map((item, index) => (
+						<Link
+							href={`/kdrama/${encodeURIComponent(item.id)}`}
+							style={{ textDecoration: "none" }}
+							key={index}
+						>
+							<div className={styles.SearchEntry}>
+								<p>{item.title}</p>
+								<Image
+									src={item.image}
+									width={110}
+									height={180}
+									alt="Drama Poster"
+								/>
+							</div>
+						</Link>
+					))}
+			</div>
+		</div>
+	);
+}
diff --git a/src/app/kdrama/components/searchQuery.js b/src/app/kdrama/components/searchQuery.js
new file mode 100644
index 0000000..64e428b
--- /dev/null
+++ b/src/app/kdrama/components/searchQuery.js
@@ -0,0 +1,8 @@
+export default async function FetchSearchTitle(title) {
+	const res = await fetch(
+		`https://consumet-api-di2e.onrender.com/movies/dramacool/${title}`,
+		{ cache: "force-cache" }
+	);
+	const data = await res.json();
+	return data;
+}
diff --git a/src/app/kdrama/components/videoLink.js b/src/app/kdrama/components/videoLink.js
new file mode 100644
index 0000000..fec016d
--- /dev/null
+++ b/src/app/kdrama/components/videoLink.js
@@ -0,0 +1,11 @@
+"use server";
+export default async function getVideoLink(epiId, mediaId) {
+	let videoLink;
+	const res = await fetch(
+		`https://consumet-api-di2e.onrender.com/movies/dramacool/watch?episodeId=${epiId}&mediaId=${mediaId}`,
+		{ cache: "force-cache" }
+	);
+	const data = await res.json();
+	videoLink = data.sources[0].url;
+	return videoLink;
+}