added search functionality

3 files changed, 77 insertions, 6 deletions

diff --git a/src/app/kdrama/components/cacher.js b/src/app/kdrama/components/cacher.js
index 3ef05be..b04c932 100644
--- a/src/app/kdrama/components/cacher.js
+++ b/src/app/kdrama/components/cacher.js
@@ -1,8 +1,15 @@
-// This file pre fetches all the videolinks and next js automatically caches them!
+// This function pre-fetches all the video links for a drama in the background
 
-export default async function VideoLinkCacher(data, dramaId) {
-	data.forEach(async (element) => {
-		const link = `https://consumet-api-di2e.onrender.com/movies/dramacool/watch?episodeId=${element.id}&mediaId=${dramaId}`;
-		await fetch(link, { cache: "force-cache" });
-	});
+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/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;
+}