feature added: tracker for mangas

15 files changed, 149 insertions, 87 deletions

diff --git a/src/app/globals.css b/src/app/globals.css
index 77c028c..7b5d384 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,5 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Open+Sans:ital@0;1&family=Quicksand&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&family=Lexend+Deca&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
 :root {
 	--neon-green: #45FFCA;
@@ -12,11 +11,11 @@
 
 
 body {
-	margin: 0px;
-	padding: 0px;
+	margin: 0;
+	padding: 0;
 	background-color: #1a1a1a;
 }
 
 body::-webkit-scrollbar {
-	width: 0px;
+	width: 0;
 }
\ No newline at end of file
diff --git a/src/app/kdrama/components/popular.jsx b/src/app/kdrama/components/popular.jsx
index 639ed9f..4f9a1d2 100644
--- a/src/app/kdrama/components/popular.jsx
+++ b/src/app/kdrama/components/popular.jsx
@@ -37,7 +37,7 @@ export default async function PopularDramas() {
 
 async function getPopular() {
 	const res = await fetch("https://dramacool-scraper.vercel.app/popular", {
-		next: { revalidate: 86400 },
+		next: { revalidate: 33200 },
 	});
 	const data = await res.json();
 	return data;
diff --git a/src/app/manga/[title]/[id]/[read]/currentReading.jsx b/src/app/manga/[title]/[id]/[read]/currentReading.jsx
index 2db6d77..0050d61 100644
--- a/src/app/manga/[title]/[id]/[read]/currentReading.jsx
+++ b/src/app/manga/[title]/[id]/[read]/currentReading.jsx
@@ -1,27 +1,34 @@
 "use client";
-import { useState, useEffect } from "react";
+
 import styles from "./read.module.css";
+import { useEffect } from "react";
 
-export default function CurrentReading() {
-	const [chapter, setChapter] = useState(null);
-	const [volume, setVolume] = useState(null);
+function get_current_info(title) {
+	let req = {};
 
 	useEffect(() => {
-		setChapter(localStorage.getItem("chapter") || "");
-		setVolume(localStorage.getItem("volume") || "");
-	});
+		const data = JSON.parse(localStorage.getItem("mangaData"));
+		data.watchHis.forEach((element) => {
+			if (element.title === title) {
+				req.chapter = element.chapter;
+				req.volume = element.volume;
+			}
+		});
+	}, []);
 
-	return CR(chapter, volume);
+	return req || false;
 }
 
-function CR(chapter, volume) {
+export default function Current({ name: title }) {
+	let data = get_current_info(title);
+	if (!data) {
+		return;
+	}
+
 	return (
-		<div className={styles.CurrentReadingContainer}>
-			{chapter && volume && (
-				<p>
-					Reading: Vol {volume} Chapter {chapter}
-				</p>
-			)}
-		</div>
+		<section className={styles.CurrentMain}>
+			<p className={styles.CurrentChapter}>{data.chapter}</p>
+			<p className={styles.CurrentVolume}>{data.volume}</p>
+		</section>
 	);
 }
diff --git a/src/app/manga/[title]/[id]/[read]/download.jsx b/src/app/manga/[title]/[id]/[read]/download.jsx
index b8af783..e7a20ee 100644
--- a/src/app/manga/[title]/[id]/[read]/download.jsx
+++ b/src/app/manga/[title]/[id]/[read]/download.jsx
@@ -1,5 +1,6 @@
+"use client";
+
 import styles from "./read.module.css";
-// import Link from "next/link";
 
 export default function DownloadManga({ chapterId: id }) {
 	return (
@@ -7,10 +8,13 @@ export default function DownloadManga({ chapterId: id }) {
 			<a
 				href={`https://manga-downloader-7nca.onrender.com/download?id=${id}`}
 				style={{ textDecoration: "none" }}
+				onClick={() =>
+					alert(
+						"Downloads are not instant. It might take some time to prepare your file. Thank you for your patience"
+					)
+				}
 			>
-				<button disabled title="Not available right now.">
-					Download - Beta
-				</button>
+				<button title="should work just fine">Download - Beta</button>
 			</a>
 		</div>
 	);
diff --git a/src/app/manga/[title]/[id]/[read]/page.jsx b/src/app/manga/[title]/[id]/[read]/page.jsx
index 239a4d6..dbba6e0 100644
--- a/src/app/manga/[title]/[id]/[read]/page.jsx
+++ b/src/app/manga/[title]/[id]/[read]/page.jsx
@@ -1,7 +1,6 @@
 import styles from "./read.module.css";
 import Image from "next/image";
 import DownloadManga from "./download";
-import CurrentReading from "./currentReading";
 
 export default async function Read({ params }) {
 	const chapterId = params.read;
@@ -26,7 +25,6 @@ export default async function Read({ params }) {
 
 	return (
 		<div className={styles.Main}>
-			<CurrentReading />
 			<div className={styles.ImageContainer}>
 				<DownloadManga chapterId={chapterId} />
 				<p>Total pages: {images.length}</p>
@@ -47,7 +45,6 @@ export default async function Read({ params }) {
 						</div>
 					))}
 			</div>
-			<CurrentReading />
 		</div>
 	);
 }
diff --git a/src/app/manga/[title]/[id]/[read]/read.module.css b/src/app/manga/[title]/[id]/[read]/read.module.css
index 1d57d1c..420fff8 100644
--- a/src/app/manga/[title]/[id]/[read]/read.module.css
+++ b/src/app/manga/[title]/[id]/[read]/read.module.css
@@ -22,7 +22,7 @@
 .ImageContainer p {
 	text-align: center;
 	color: white;
-	font-family: "Kanit";
+	font-family: "Atkinson Hyperlegible", serif;
 	font-size: 16px;
 	margin: 5px;
 }
@@ -30,7 +30,7 @@
 .NotFound {
 	text-align: center;
 	color: white;
-	font-family: "Atkinson Hyperlegible";
+	font-family: "Atkinson Hyperlegible", serif;
 	font-size: 20px;
 }
 
@@ -43,7 +43,7 @@
 	outline: none;
 	border-radius: 5px;
 	padding: 5px;
-	font-family: "Lato";
+	font-family: "Atkinson Hyperlegible", serif;
 	font-size: 16px;
 	background-color: var(--light-green);
 	cursor: pointer;
@@ -53,13 +53,6 @@
 	background-color: var(--pastel-red);
 }
 
-.CurrentReadingContainer {
-	text-align: center;
-	color: white;
-	font-family: "Quicksand";
-	font-size: 18px;
-}
-
 @media screen and (max-width: 768px) {
 	.ImageContainer img {
 		width: 95%;
diff --git a/src/app/manga/[title]/[id]/buttons.jsx b/src/app/manga/[title]/[id]/buttons.jsx
index 19da1d3..4c11705 100644
--- a/src/app/manga/[title]/[id]/buttons.jsx
+++ b/src/app/manga/[title]/[id]/buttons.jsx
@@ -2,8 +2,21 @@
 
 import styles from "./info.module.css";
 import Link from "next/link";
+import { storeLocal } from "../../history/storeData";
 
 export default function Buttons({ content: data }) {
+	function store_to_local(title, chapter, volume, image, id, id2) {
+		let data = {
+			title: title,
+			chapter: chapter,
+			volume: volume,
+			image: image,
+			id: id,
+			mangaId: id2,
+		};
+		storeLocal(data);
+	}
+
 	return (
 		<div className={styles.ChapterContainer}>
 			{data.chapters &&
@@ -15,9 +28,16 @@ export default function Buttons({ content: data }) {
 								href={{
 									pathname: `/manga/info/read/${item.id}`,
 								}}
-								onClick={() =>
-									test(item.chapterNumber, item.volumeNumber)
-								}
+								onClick={() => {
+									store_to_local(
+										data.title.english || data.title.romaji,
+										parseInt(item.chapterNumber),
+										parseInt(item.volumeNumber),
+										data.image,
+										item.id,
+										data.id
+									);
+								}}
 							>
 								<button key={index}>
 									<div>
@@ -32,8 +52,3 @@ export default function Buttons({ content: data }) {
 		</div>
 	);
 }
-
-function test(chapter, volume) {
-	localStorage.setItem("chapter", chapter);
-	localStorage.setItem("volume", volume);
-}
diff --git a/src/app/manga/[title]/[id]/info.module.css b/src/app/manga/[title]/[id]/info.module.css
index 1b749db..b1b76f4 100644
--- a/src/app/manga/[title]/[id]/info.module.css
+++ b/src/app/manga/[title]/[id]/info.module.css
@@ -19,7 +19,7 @@
 }
 
 .TitleContainer p {
-	font-family: "Quicksand";
+	font-family: "Lexend Deca", serif;
 	font-size: 40px;
 	font-weight: 1000;
 }
@@ -31,13 +31,13 @@
 
 .MangaDescription {
 	color: white;
-	font-family: "Atkinson Hyperlegible";
+	font-family: "Atkinson Hyperlegible", serif;
 	max-width: 98%;
 	margin: -10px auto;
 }
 
 .Description h2 {
-	font-family: "Poppins";
+	font-family: "Lexend Deca", serif;
 	color: gray;
 }
 
@@ -47,12 +47,14 @@
 
 .MangaReleaseYear {
 	margin-top: 10px;
+	font-family: "Poppins", serif;
 }
 
 .GenreContainer {
 	margin-top: 5px;
 	display: flex;
 	align-items: center;
+	font-family: "Poppins", serif;
 }
 
 .GenreText {
@@ -80,6 +82,7 @@
 .MangaRatings {
 	display: flex;
 	margin-top: 10px;
+	font-family: "Poppins", serif;
 	/* justify-content: center; */
 }
 
@@ -96,7 +99,7 @@
 
 .CharactersContainer h2 {
 	color: gray;
-	font-family: "Poppins", serif;
+	font-family: "Lexend Deca", serif;
 }
 
 .Character {
@@ -128,6 +131,7 @@
 	text-align: center;
 	width: 110px;
 	color: white;
+	font-family: "Atkinson Hyperlegible", serif;
 }
 
 .CharacterEntry img {
@@ -146,7 +150,7 @@
 
 .ChapterTitle {
 	color: white;
-	font-family: "Kanit";
+	font-family: "Lexend Deca", serif;
 	font-size: 32px;
 }
 
@@ -183,7 +187,7 @@
 }
 
 .ChapterContainer button p {
-	font-family: "Quicksand";
+	font-family: "Atkinson Hyperlegible", serif;
 	margin: 2px;
 }
 
diff --git a/src/app/manga/[title]/[id]/page.jsx b/src/app/manga/[title]/[id]/page.jsx
index bbf1647..d743f4d 100644
--- a/src/app/manga/[title]/[id]/page.jsx
+++ b/src/app/manga/[title]/[id]/page.jsx
@@ -3,10 +3,7 @@ import Image from "next/image";
 import Buttons from "./buttons";
 import { redirect } from "next/navigation";
 import { FaStar } from "react-icons/fa";
-import CurrentReading from "./[read]/currentReading";
-import PreFetchChaterLinks from "../../cacher";
-
-// This page displays the information regarding the manga or manhwa which the user selected on the previous page.
+import { PreFetchChaterLinks } from "../../cacher";
 
 export default async function MangaInfo({ params }) {
 	const id = params.id;
@@ -117,7 +114,6 @@ export default async function MangaInfo({ params }) {
 								))}
 						</div>
 					</div>
-					<CurrentReading />
 					<div className={styles.Chapters}>
 						<p className={styles.ChapterTitle}>
 							Chapters & Volumes
diff --git a/src/app/manga/[title]/page.jsx b/src/app/manga/[title]/page.jsx
index 0602ad9..589ff53 100644
--- a/src/app/manga/[title]/page.jsx
+++ b/src/app/manga/[title]/page.jsx
@@ -1,13 +1,16 @@
 import styles from "./title.module.css";
 import Image from "next/image";
 import Link from "next/link";
+import { PreFetchMangaInfo } from "../cacher";
 
-// This page displays all the available mangas or manhwas when the user searches for one/ 
+// This page displays all the available mangas or manhwas when the user searches for one/
 
 export default async function MangaInfo({ params }) {
 	const title = params.title;
 	const data = await GetSearchedAnime(title);
 
+	PreFetchMangaInfo(data);
+
 	return (
 		<div className={styles.Main}>
 			<div className={styles.MangaContainer}>
diff --git a/src/app/manga/[title]/title.module.css b/src/app/manga/[title]/title.module.css
index 8a87422..e7842d5 100644
--- a/src/app/manga/[title]/title.module.css
+++ b/src/app/manga/[title]/title.module.css
@@ -11,7 +11,7 @@
 .SearchedFor {
 	color: white;
 	text-align: center;
-	font-family: "Poppins";
+	font-family: "Lexend Deca", serif;
 	font-size: 26px;
 }
 
@@ -42,10 +42,11 @@
 .MangaInfo {
 	color: white;
 	margin-left: 20px;
+	font-family: "Atkinson Hyperlegible";
 }
 
 .MangaTitle {
-	font-family: "Lato";
+	font-family: "Lexend Deca", serif;
 	margin: 0px;
 	font-size: 22px;
 	color: var(--neon-green);
@@ -53,14 +54,18 @@
 
 .MangaStatus {
 	color: var(--soft-purple);
+	font-family: "Poppins", serif;
+
 }
 
 .MangaVolume {
 	color: #FFACAC;
+	font-family: "Poppins", serif;
 }
 
 .MangaChapters {
-	color: #FFEBB4
+	color: #FFEBB4;
+	font-family: "Poppins", serif;
 }
 
 @media screen and (max-width: 768px) {
diff --git a/src/app/manga/cacher.js b/src/app/manga/cacher.js
index 916caca..7f047ab 100644
--- a/src/app/manga/cacher.js
+++ b/src/app/manga/cacher.js
@@ -1,7 +1,7 @@
 // This function pre-fetches all the chapter pages links for a manga in the background
 "use server";
 
-export default async function PreFetchChaterLinks(data) {
+export async function PreFetchChaterLinks(data) {
 	try {
 		const fetchPromises = data.map(async (element) => {
 			const link = `https://consumet-jade.vercel.app/meta/anilist-manga/read?chapterId=${element.id}&provider=mangadex`;
@@ -17,3 +17,16 @@ export default async function PreFetchChaterLinks(data) {
 		);
 	}
 }
+
+export async function PreFetchMangaInfo(data) {
+	try {
+		const fetchPromises = data.results.map(async (element) => {
+			const link = `https://consumet-jade.vercel.app/meta/anilist-manga/${element.id}?provider=mangadex`;
+			await fetch(link, { next: { revalidate: 86400 } });
+		});
+		await Promise.all(fetchPromises);
+		console.log("Manga info pre-fetched successfully!");
+	} catch (error) {
+		console.error("error", error);
+	}
+}
diff --git a/src/app/manga/manga.module.css b/src/app/manga/manga.module.css
index d321533..8dd72d0 100644
--- a/src/app/manga/manga.module.css
+++ b/src/app/manga/manga.module.css
@@ -12,6 +12,22 @@
 	width: auto;
 }
 
+.searchMain {
+	display: flex;
+	align-items: center;
+}
+
+.searchMain button {
+	margin: 10px 5px 0px 5px;
+	padding: 4px;
+	border-radius: 0.3rem;
+	border: none;
+	outline: none;
+	font-family: "Atkinson Hyperlegible", serif;
+	background: #1f1f1f;
+	color: white;
+}
+
 .SearchBar {
 	display: flex;
 	align-items: center;
@@ -20,7 +36,8 @@
 	border-style: dotted;
 	border-color: rgb(63, 63, 63);
 	border-width: 2px;
-	width: 20dvw
+	width: 20dvw;
+	border-radius: 1rem;
 }
 
 .SearchBar input {
@@ -31,7 +48,7 @@
 	padding: 4px;
 	width: 100%;
 	color: white;
-	font-family: "Kanit";
+	font-family: "Lexend Deca", serif;
 	font-size: 16px;
 }
 
diff --git a/src/app/manga/searchBar.jsx b/src/app/manga/searchBar.jsx
index 7fb4ad1..bffb957 100644
--- a/src/app/manga/searchBar.jsx
+++ b/src/app/manga/searchBar.jsx
@@ -4,6 +4,7 @@ import { FaSearch } from "react-icons/fa";
 import styles from "./manga.module.css";
 import { useState } from "react";
 import { useRouter } from "next/navigation";
+import Link from "next/link";
 
 // This is the search bar for the mangapage. Nothing extraordinary but just an input box and a search icon. Gets the work done.
 
@@ -13,25 +14,32 @@ export default function SearchBar() {
 	const [title, setMangaTitle] = useState("");
 
 	return (
-		<div className={styles.SearchBar}>
-			<FaSearch color="white" style={{ marginLeft: 5 }} />
-			<input
-				type="text"
-				name="manga"
-				placeholder="Enter manga title"
-				autoComplete="off"
-				onChange={(e) => setMangaTitle(e.target.value)}
-				onKeyDown={(event) => {
-					if (
-						(event.key === "Enter" ||
-							event.code === 13 ||
-							event.code === "Enter") &&
-						title !== ""
-					) {
-						router.push(`/manga/${title}`);
-					}
-				}}
-			></input>
-		</div>
+		<main className={styles.searchMain}>
+			<div className={styles.SearchBar}>
+				<FaSearch color="white" style={{ marginLeft: 5 }} />
+				<input
+					type="text"
+					name="manga"
+					placeholder="Enter manga title"
+					autoComplete="off"
+					onChange={(e) => setMangaTitle(e.target.value)}
+					onKeyDown={(event) => {
+						if (
+							(event.key === "Enter" ||
+								event.code === 13 ||
+								event.code === "Enter") &&
+							title !== ""
+						) {
+							router.push(`/manga/${title}`);
+						}
+					}}
+				></input>
+			</div>
+			<div>
+				<Link href={"/manga/history/continueWatching/"}>
+					<button>History</button>
+				</Link>
+			</div>
+		</main>
 	);
 }
diff --git a/src/app/page.module.css b/src/app/page.module.css
index 8a64245..3a7031f 100644
--- a/src/app/page.module.css
+++ b/src/app/page.module.css
@@ -11,7 +11,7 @@
 	align-items: center;
 	justify-content: space-between;
 	background-color: #121212;
-	font-family: "Poppins", serif;
+	font-family: "Lexend Deca", serif;
 	z-index: 2;
 }
 
@@ -57,6 +57,7 @@
 	font-size: 14px;
 	margin: 0;
 	padding: 0.6rem;
+	font-family: "Poppins", serif;
 }
 
 .content {
@@ -84,7 +85,7 @@
 	border-radius: 5px;
 	transition: opacity 400ms ease;
 	padding: 0.4rem 2rem;
-	font-family: "Poppins", serif;
+	font-family: "Lexend Deca", serif;
 }
 
 .content:hover>.contentContainer div {