fixes: minor performance improvements

4 files changed, 79 insertions, 49 deletions

diff --git a/src/app/search/api/fetchInfo.js b/src/app/search/api/fetchInfo.js
deleted file mode 100644
index 6ac0e69..0000000
--- a/src/app/search/api/fetchInfo.js
+++ /dev/null
@@ -1,9 +0,0 @@
-"use server";
-
-export default async function testFunction(title) {
-	const res = await fetch(
-		"https://dramalama-api.vercel.app/anime/gogoanime/" + title
-	);
-	const data = await res.json();
-	return data;
-}
diff --git a/src/app/search/components/fetchInfo.js b/src/app/search/components/fetchInfo.js
new file mode 100644
index 0000000..f843dff
--- /dev/null
+++ b/src/app/search/components/fetchInfo.js
@@ -0,0 +1,14 @@
+"use server";
+
+export default async function Results(id) {
+	return await testFunction(id);
+}
+
+async function testFunction(title) {
+	const res = await fetch(
+		"https://dramalama-api.vercel.app/anime/gogoanime/" + title,
+		{ cache: "force-cache" }
+	);
+	const data = await res.json();
+	return data;
+}
diff --git a/src/app/search/components/fetchedInfo.js b/src/app/search/components/fetchedInfo.js
new file mode 100644
index 0000000..aa03437
--- /dev/null
+++ b/src/app/search/components/fetchedInfo.js
@@ -0,0 +1,44 @@
+import "../search.css";
+import Link from "next/link";
+import Image from "next/image";
+
+export default async function fetchedInfo(data) {
+	return (
+		<div className="animeEntry">
+			{data ? (
+				data.results && data.results.length > 0 ? (
+					data.results.map((item, index) => (
+						<Link
+							key={index}
+							href={`/info/${item.id}`}
+							style={{ textDecoration: "none" }}
+						>
+							<div className="anime">
+								<p>{item.title}</p>
+								<Image
+									src={item.image}
+									className="animeImage"
+									width={120}
+									height={160}
+									alt="Drama Poster"
+								/>
+							</div>
+						</Link>
+					))
+				) : (
+					<div style={{ margin: "0px auto" }}>
+						<p
+							style={{
+								color: "white",
+								fontFamily: "Kanit",
+								fontSize: 18,
+							}}
+						>
+							No results found
+						</p>
+					</div>
+				)
+			) : null}
+		</div>
+	);
+}
diff --git a/src/app/search/page.jsx b/src/app/search/page.jsx
index 00309f6..75f09bd 100644
--- a/src/app/search/page.jsx
+++ b/src/app/search/page.jsx
@@ -3,25 +3,23 @@
 import "./search.css";
 import { FaSearch } from "react-icons/fa"; // Import the search icon from react-icons library
 import { useState } from "react";
-import Image from "next/image";
-import Link from "next/link";
-import testFunction from "./api/fetchInfo";
+import Results from "./components/fetchInfo";
+import fetchedInfo from "./components/fetchedInfo";
 
 export default function Input() {
 	const [searchedAnime, setSearchedAnime] = useState(null);
 	const [loading, setLoading] = useState(null);
-	const [search1, setSearch] = useState(null);
+	const [info, setInfo] = useState(null);
 
 	const handleKeyPress = async (event) => {
 		if (
 			(event.code === "Enter" ||
 				event.key === "Enter" ||
 				event.code === 13) &&
-			searchedAnime != ""
+			searchedAnime !== ""
 		) {
 			setLoading(true);
-			let x = await testFunction(searchedAnime);
-			setSearch(x);
+			setInfo(await fetchedInfo(await Results(searchedAnime)));
 			setLoading(false);
 		} else if (
 			(event.code === "Enter" ||
@@ -39,9 +37,11 @@ export default function Input() {
 				<div className="searchContainer">
 					<FaSearch className="searchIcon" />
 					<input
-						onChange={(event) =>
-							setSearchedAnime(event.target.value)
-						}
+						onChange={(event) => {
+							if (event.target.value.trim() !== "") {
+								setSearchedAnime(event.target.value);
+							}
+						}}
 						onKeyDown={(event) => handleKeyPress(event)}
 						placeholder="Enter anime title"
 					></input>
@@ -49,38 +49,19 @@ export default function Input() {
 			</div>
 
 			{loading && (
-				<p style={{ color: "white", textAlign: "center" }}>
-					Please wait while we crunch all the data for you.
+				<p
+					style={{
+						textAlign: "center",
+						fontFamily: "Kanit",
+						fontSize: 18,
+						color: "white",
+					}}
+				>
+					Please wait while we crunch all the data for you
 				</p>
 			)}
-			<div className="animeEntry">
-				{search1 ? (
-					search1.results && search1.results.length > 0 ? (
-						search1.results.map((item, index) => (
-							<Link
-								key={index}
-								href={`/info/${item.id}`}
-								style={{ textDecoration: "none" }}
-							>
-								<div className="anime">
-									<p>{item.title}</p>
-									<Image
-										src={item.image}
-										className="animeImage"
-										width={120}
-										height={160}
-										alt="Drama Poster"
-									/>
-								</div>
-							</Link>
-						))
-					) : (
-						<div style={{ margin: "0px auto" }}>
-							<p style={{ color: "white" }}>No results found</p>
-						</div>
-					)
-				) : null}
-			</div>
+
+			{info}
 		</div>
 	);
 }