UI update, organize files and many more

.gitignore

@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

package.json

@@ -9,6 +9,7 @@
     "nth-check": "^2.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.0.1",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },

src/App.css

@@ -1,71 +1,14 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');
+
 *,
 *:before,
 *:after {
-	box-sizing: border-box;
-}
-
-html,
-body {
+	padding: 0;
 	margin: 0;
-	height: 100%;
-	line-height: 1.5;
-	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
-		Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-}
-
-#app {
-	position: relative;
-	min-height: 100%;
-	color: #212121;
-	background-color: #eeeeee;
-}
-
-#app:before,
-#app:after {
-	content: ' ';
-	display: table;
-}
-
-.toolbar {
-	position: absolute;
-	top: 0;
-	z-index: 3;
-	width: 100%;
-	background-color: inherit;
-	height: 48px;
-	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-}
-
-button {
-	height: 40px;
-	border: 0;
-	padding: 0 8px;
-	font-size: 16px;
-	font-weight: 800;
-	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-	border-radius: 3px;
-	margin: 4px 0;
-	color: white;
-	background: mediumpurple;
-}
-
-input,
-select {
-	height: 40px;
-	padding: 0 8px;
-	margin: 4px 0;
-	vertical-align: bottom;
-}
-
-.paper {
-	position: absolute;
-	top: 48px;
-	width: 100%;
-	height: calc(100vh - 48px);
-	overflow: scroll;
+	box-sizing: border-box;
+	font-family: 'Poppins', sans-serif;
 }
 
-.paper > img {
-	width: 100%;
-	margin: 0 auto;
+:root {
+	--gray: #363b3f;
 }

src/App.js

@@ -1,12 +1,8 @@
-import './App.css';
-import HomePage from './Components/Homepage/HomePage';
+import "./App.css";
+import HomePage from "./Pages/Home";
 
 function App() {
-  return (
-    <>
-    <HomePage />
-    </>
-  );
+	return <HomePage />;
 }
 
 export default App;

src/Components/Header.js

@@ -0,0 +1,134 @@
+import { useContext, useEffect, useState } from "react";
+import data from "../Data/data.json";
+import "../styles/Header.css";
+import { HiZoomIn, HiOutlineZoomOut } from "react-icons/hi";
+// import { RiFullscreenLine } from "react-icons/ri";
+// import { RxExitFullScreen } from "react-icons/rx";
+// import useFullScreen from "../hooks/useFullScreen";
+import { Context } from "../Context/ContextProvider";
+import { IoMenu } from "react-icons/io5";
+import useResize from "../hooks/useResize";
+
+function Header() {
+	const [cities, setCities] = useState([]);
+	const {
+		city,
+		setCity,
+		date,
+		setDate,
+		setEdition,
+		zoomScale,
+		setZoomScale,
+		setIsLoading,
+	} = useContext(Context);
+	// const { isFullScreen, toggleFullScreen } = useFullScreen();
+	const { isNavOpen, setIsNavOpen } = useResize();
+
+	const handleCityChange = (e) => {
+		const city = e.target.value;
+		setCity(city);
+		setIsLoading(true);
+	};
+
+	const handleDateChange = (e) => {
+		const date = new Date(e.target.value);
+		setDate(date);
+		setIsLoading(true);
+	};
+
+	const handleZoomIn = () => {
+		if (zoomScale >= 2) return;
+		setZoomScale((pre) => pre + 0.1);
+	};
+
+	const handleZoomOut = () => {
+		if (zoomScale <= 1) return;
+		setZoomScale((pre) => pre - 0.1);
+	};
+
+	const handleEditionChange = (e) => {
+		const edition = e.target.value;
+		setEdition(edition);
+		setIsLoading(true);
+	};
+
+	const handleNavToggle = () => {
+		setIsNavOpen((pre) => !pre);
+	};
+
+	useEffect(() => {
+		const cityList = [];
+		for (let key in data) {
+			cityList.push({
+				value: data[key].edition_code,
+				label: data[key].title,
+			});
+		}
+		setCities(cityList);
+	}, []);
+
+	return (
+		<div className="Header">
+			<div className="top-nav">
+				<h1 className="heading">Amar Ujala E-Paper</h1>
+				<button onClick={handleNavToggle} className="menu-btn">
+					<IoMenu size={32} color="white" />
+				</button>
+			</div>
+			<div
+				className="nav"
+				style={{
+					display: isNavOpen ? "flex" : "none",
+				}}
+			>
+				<select
+					name="city"
+					id="city"
+					onChange={handleCityChange}
+					defaultValue={city.value}
+					value={city.value}
+					required
+				>
+					{cities.map((city, i) => {
+						return (
+							<option key={i} value={city.value}>
+								{city.label}
+							</option>
+						);
+					})}
+				</select>
+				<select defaultValue="main" onChange={handleEditionChange}>
+					<option value="main">Main</option>
+					<option value="my">My City</option>
+				</select>
+				<input
+					type="date"
+					name="date"
+					id="date"
+					min={new Date("2022-01-01").toISOString().split("T")[0]}
+					max={new Date().toISOString().split("T")[0]}
+					onChange={handleDateChange}
+					value={date.toISOString().substr(0, 10)}
+				/>
+				<div className="buttons">
+					<button onClick={handleZoomIn}>
+						<HiZoomIn size={22} />
+						<span className="ml-0-5">Zoom</span>
+					</button>
+					<button onClick={handleZoomOut}>
+						<HiOutlineZoomOut size={22} />
+					</button>
+					{/* <button onClick={toggleFullScreen}>
+						{!isFullScreen ? (
+							<RiFullscreenLine size={22} />
+						) : (
+							<RxExitFullScreen size={22} />
+						)}
+					</button> */}
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default Header;

src/Components/Loading.js

@@ -0,0 +1,20 @@
+import { useEffect, useState } from "react";
+import "../styles/Loading.css";
+
+function Loading({ isError }) {
+	const [message, setMessage] = useState("Loading...");
+
+	useEffect(() => {
+		if (isError) {
+			setMessage("Page or edition not found");
+		}
+	}, [isError]);
+
+	return (
+		<div className="Loading">
+			<p>{message}</p>
+		</div>
+	);
+}
+
+export default Loading;

src/Components/NewsPaper.js

@@ -0,0 +1,73 @@
+import { useState, useContext, useEffect } from "react";
+import { Context } from "../Context/ContextProvider";
+import "../styles/NewsPaper.css";
+import Loading from "./Loading";
+import useNewsPaperImageLoader from "../hooks/useNewsPaperImageLoader";
+
+const NewsPaper = () => {
+	const { city, date, edition, zoomScale, isLoading, setIsLoading } =
+		useContext(Context);
+	const [pageNo, setPageNo] = useState(1);
+	const [error, setError] = useState(false);
+	const { pageUrls, MAX_PAGES } = useNewsPaperImageLoader();
+
+	const handlePrev = () => {
+		setPageNo((pre) => pre - 1);
+		setIsLoading(true);
+	};
+
+	const handleNext = () => {
+		setPageNo((pre) => pre + 1);
+		setIsLoading(true);
+	};
+
+	const handleImageError = () => {
+		setIsLoading(false);
+		setError(true);
+	};
+
+	const handleImageLoad = () => {
+		setIsLoading(false);
+	};
+
+	useEffect(() => {
+		setPageNo(1);
+		setIsLoading(true);
+		setError(false);
+	}, [city, edition, date, setIsLoading]);
+
+	return (
+		<>
+			<div className="NewsPaper">
+				{(isLoading || error) && <Loading isError={error} />}
+				{!error && (
+					<img
+						src={pageUrls[pageNo - 1]}
+						alt="News Paper Page"
+						onError={handleImageError}
+						onLoad={handleImageLoad}
+						style={{
+							transform: `scale(${zoomScale})`,
+							display: isLoading ? "none" : "block",
+						}}
+					/>
+				)}
+			</div>
+			{!error && (
+				<div className="nav-panel">
+					<button onClick={handlePrev} disabled={pageNo <= 1}>
+						Prev
+					</button>
+					<span>
+						Page {pageNo} of {MAX_PAGES}
+					</span>
+					<button onClick={handleNext} disabled={pageNo >= MAX_PAGES}>
+						Next
+					</button>
+				</div>
+			)}
+		</>
+	);
+};
+
+export default NewsPaper;