feature added: tracker for mangas

3 files changed, 173 insertions, 0 deletions

diff --git a/src/app/manga/history/continueWatching/cw.module.css b/src/app/manga/history/continueWatching/cw.module.css
new file mode 100644
index 0000000..3641e84
--- /dev/null
+++ b/src/app/manga/history/continueWatching/cw.module.css
@@ -0,0 +1,75 @@
+.main {
+	width: 99%;
+	margin: 80px auto;
+}
+
+.mainText {
+	color: var(--light-green);
+	font-family: "Poppins", serif;
+	font-size: 24px;
+}
+
+.animeContainer {
+	font-family: "Poppins", serif;
+	font-size: 18px;
+	margin: 0px;
+}
+
+.animeEntry {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 5px;
+	margin-bottom: 0.5rem;
+	border-radius: 1rem;
+	background-color: #1f1f1f;
+}
+
+.animeEntry img {
+	width: auto;
+	height: auto;
+	max-height: 40dvh;
+	border-radius: 0.8rem;
+}
+
+.titleContainer {
+	color: white;
+	margin-left: 0.2rem;
+}
+
+.titleContainer h3 {
+	margin: 0px;
+}
+
+.EpisodeCount {
+	color: var(--soft-purple);
+	margin: 0px;
+}
+
+.date {
+	color: var(--neon-yellow);
+	margin: 0px;
+}
+
+.redirects {
+	margin: 5px 0 0 0;
+}
+
+.redirects button {
+	outline: none;
+	border: none;
+	margin-right: 0.4rem;
+	border-radius: 0.2rem;
+	padding: 0.2rem;
+	font-family: "Atkinson Hyperlegible", serif;
+	background-color: #303030;
+	color: white;
+	cursor: pointer;
+}
+
+@media screen and (max-width: 768px) {
+	.animeContainer {
+		font-size: 14px;
+
+	}
+}
\ No newline at end of file
diff --git a/src/app/manga/history/continueWatching/page.jsx b/src/app/manga/history/continueWatching/page.jsx
new file mode 100644
index 0000000..0d0a02e
--- /dev/null
+++ b/src/app/manga/history/continueWatching/page.jsx
@@ -0,0 +1,70 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import Image from "next/image";
+import styles from "./cw.module.css";
+import Link from "next/link";
+
+const ContinueWatching = () => {
+	const [localItems, setLocalItems] = useState(null);
+
+	useEffect(() => {
+		const newData = get_local();
+		setLocalItems(newData);
+	}, []); // Empty dependency array means this effect runs only once after the initial render
+
+	function get_local() {
+		try {
+			const data = localStorage.getItem("mangaData");
+			return JSON.parse(data);
+		} catch (error) {
+			console.log("error", error);
+			return false;
+		}
+	}
+
+	return (
+		<main className={styles.main}>
+			<p className={styles.mainText}>Continue Watching</p>
+			{localItems && (
+				<div className={styles.animeContainer}>
+					{localItems.watchHis &&
+						localItems.watchHis.map((item, index) => (
+							<div key={index} className={styles.animeEntry}>
+								<div className={styles.titleContainer}>
+									<h3>{item.title}</h3>
+									<p className={styles.EpisodeCount}>
+										Currently reading: Volume {item.volume}{" "}
+										Chapter {item.chapter}
+									</p>
+									<div className={styles.redirects}>
+										<Link
+											href={`/manga/info/${item.mangaId}`}
+										>
+											<button>Info Page</button>
+										</Link>
+										<Link
+											href={`/manga/info/read/${item.id}`}
+										>
+											<button>
+												Read current chapter
+											</button>
+										</Link>
+									</div>
+								</div>
+								<Image
+									src={item.image}
+									width={140}
+									height={210}
+									alt="Continue anime poster"
+									priority
+								/>
+							</div>
+						))}
+				</div>
+			)}
+		</main>
+	);
+};
+
+export default ContinueWatching;
diff --git a/src/app/manga/history/storeData.js b/src/app/manga/history/storeData.js
new file mode 100644
index 0000000..1fd7607
--- /dev/null
+++ b/src/app/manga/history/storeData.js
@@ -0,0 +1,28 @@
+"use client";
+
+export function storeLocal(watchData) {
+	const jsonData = localStorage.getItem("mangaData");
+	const dataObject = jsonData ? JSON.parse(jsonData) : {};
+
+	if (!dataObject.watchHis) {
+		dataObject.watchHis = [];
+	}
+
+	let found = false;
+	dataObject.watchHis.forEach((element) => {
+		if (element.title === watchData.title) {
+			let chapter = watchData.chapter;
+			let volume = watchData.volume;
+			element.chapter = chapter;
+			element.volume = volume;
+			found = true;
+		}
+	});
+
+	if (!found) {
+		dataObject.watchHis.push(watchData);
+	}
+
+	let updatedData = JSON.stringify(dataObject);
+	localStorage.setItem("mangaData", updatedData);
+}