Mortein 63 detail page navigation (#19)

db.json

@@ -5,22 +5,48 @@
             "username": "gardener",
             "devices": [
                 {
-                    "id": "1",
+                    "id": "0",
                     "name": "Orange Tree",
                     "data": {
-                        "sunlight": 25,
-                        "moisture": 80,
+                        "timestamp": "2024-09-29 06:40:40",
+                        "moisture": 80.0,
+                        "sunlight": 25.5,
+                        "temperature": 50.32,
                         "vibration": false
                     }
                 },
                 {
-                    "id": "2",
+                    "id": "1",
                     "name": "Tomato Plant",
                     "data": {
-                        "sunlight": 78,
-                        "moisture": 32,
+                        "timestamp": "2024-09-30 12:32:40",
+                        "moisture": 32.89,
+                        "sunlight": 78.56,
+                        "temperature": 40.02,
+                        "vibration": true
+                    }
+                },
+                {
+                    "id": "2",
+                    "name": "Potato Plant",
+                    "data": {
+                        "timestamp": "2024-09-30 12:32:40",
+                        "moisture": 32.98,
+                        "sunlight": 78.5,
+                        "temperature": 40.32,
                         "vibration": true
                     }
+                },
+                {
+                    "id": "3",
+                    "name": "Lemon Tree",
+                    "data": {
+                        "timestamp": "2024-09-30 12:32:40",
+                        "moisture": 32.43,
+                        "sunlight": 50.5,
+                        "temperature": 40.23,
+                        "vibration": false
+                    }
                 }
             ]
         }

src/App.css

@@ -1,6 +1,5 @@
-#root {
-    width: 100vw;
-    height: 100vh;
+:root {
+    box-sizing: border-box;
 }
 
 @font-face {
@@ -22,4 +21,5 @@ body {
     font-family: "Pilser", sans-serif;
     margin: 0;
     padding: 0;
+    background-color: #fcffe0;
 }

src/App.jsx

@@ -1,20 +1,5 @@
-// import React from 'react';
-// import HomePage from './page/HomePage';
-// import './App.css';
-
-// function App() {
-//     return (
-//         <div className="App">
-//             <HomePage />
-//         </div>
-//     );
-// }
-
-// export default App;
-
 import { useEffect, useState } from "react";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
-import Navbar from "./components/Navbar";
 import HomePage from "./pages/HomePage";
 import Detail from "./pages/Detail";
 import "./App.css";
@@ -62,7 +47,7 @@ function App() {
         <Router>
             {/* <Navbar left="Back" title="Detail" /> */}
             <Routes>
-                <Route path="/" element={<HomePage />} />
+                <Route path="/" element={<HomePage userData={userData} />} />
                 <Route path="/login" element={<Login />} />
                 <Route path="/search" element={<SearchPage />} />
                 <Route path="/search-detail/:id" element={<SearchDetail />} />
@@ -71,10 +56,7 @@ function App() {
                     element={
                         userData &&
                         userData.devices.length > 0 && (
-                            <Detail
-                                plantData={userData.devices[0]}
-                                toggleVibration={toggleVibration}
-                            />
+                            <Detail userData={userData} toggleVibration={toggleVibration} />
                         )
                     }
                 />

src/components/Header.jsx

@@ -14,11 +14,11 @@
 // };
 
 // export default Header;
-import React from "react";
+import PropTypes from "prop-types";
 import { useNavigate } from "react-router-dom"; // Import useNavigate for navigation
 import "../components/Header.css";
 
-const Header = () => {
+const Header = (props) => {
     const navigate = useNavigate(); // Initialize the navigation hook
 
     const handleSearchClick = () => {
@@ -29,17 +29,38 @@ const Header = () => {
         navigate("/login"); // Navigate to the login page when the icon is clicked
     };
 
+    const handleBackClick = () => {
+        navigate(-1);
+    };
+
+    const clickLeftFunction = props.left == "Back" ? handleBackClick : handleMenuClick;
+    const guideButton = (
+        <h2 className="search-icon" onClick={handleSearchClick} style={{ cursor: "pointer" }}>
+            &#128269;
+        </h2>
+    );
+
     return (
         <header className="header">
-            <div className="menu-icon" onClick={handleMenuClick}>
-                &#9776;
-            </div>
-            <h1 className="title">My Plant</h1>
-            <div className="search-icon" onClick={handleSearchClick}>
-                &#128269;
-            </div>
+            {props.left == "Back" ? (
+                <h2 className="back-icon" onClick={clickLeftFunction} style={{ cursor: "pointer" }}>
+                    &lt;
+                </h2>
+            ) : (
+                <h2 className="menu-icon" onClick={clickLeftFunction} style={{ cursor: "pointer" }}>
+                    &#9776;
+                </h2>
+            )}
+            <h1 className="title">{props.title}</h1>
+            {props.showGuide ? guideButton : <div></div>}
         </header>
     );
 };
 
+Header.propTypes = {
+    left: PropTypes.string,
+    title: PropTypes.string,
+    showGuide: PropTypes.bool,
+};
+
 export default Header;

src/components/Navbar.css

@@ -0,0 +1,21 @@
+.navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #bacd92;
+    padding: 1vh;
+    font-family: "PilserBold", sans-serif;
+}
+
+.menu-icon,
+.search-icon,
+.back-icon {
+    font-size: 4vh;
+    margin: 0;
+}
+
+.navbar-title {
+    font-size: 3vh;
+    font-weight: bold;
+    color: #7d9778;
+}

src/components/Navbar.jsx

@@ -1,19 +1,51 @@
 import PropTypes from "prop-types";
+import { useNavigate } from "react-router-dom"; // Import useNavigate for navigation
+import "../components/Navbar.css";
 // Navigation header - used for both detail and plants pages
 // (with different props values)
 function Navbar(props) {
+    const navigate = useNavigate(); // Initialize the navigation hook
+
+    const handleSearchClick = () => {
+        navigate("/search"); // Navigate to the search page when the icon is clicked
+    };
+
+    const handleMenuClick = () => {
+        navigate("/login"); // Navigate to the login page when the icon is clicked
+    };
+
+    const handleBackClick = () => {
+        navigate(-1);
+    };
+
+    const clickLeftFunction = props.left == "Back" ? handleBackClick : handleMenuClick;
+    const guideButton = (
+        <h2 className="menu-icon" onClick={handleSearchClick} style={{ cursor: "pointer" }}>
+            &#128269;
+        </h2>
+    );
+
     return (
         <nav className="navbar">
-            <h2>{props.left}</h2>
-            <h1>{props.title}</h1>
-            <h2>Guide</h2>
+            {props.left == "Back" ? (
+                <h2 className="back-icon" onClick={clickLeftFunction} style={{ cursor: "pointer" }}>
+                    &lt;
+                </h2>
+            ) : (
+                <h2 className="menu-icon" onClick={clickLeftFunction} style={{ cursor: "pointer" }}>
+                    &#9776;
+                </h2>
+            )}
+            <h1 className="navbar-title">{props.title}</h1>
+            {props.showGuide ? guideButton : <div></div>}
         </nav>
     );
 }
 
 Navbar.propTypes = {
     left: PropTypes.string,
-    title: PropTypes.number,
+    title: PropTypes.string,
+    showGuide: PropTypes.bool,
 };
 
 export default Navbar;

src/components/Plant.css

@@ -3,7 +3,6 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin: 2vh; /* Adjusted margin for better spacing */
 }
 
 .plant-image {
@@ -15,15 +14,16 @@
 
 .plant-name {
     align-items: center;
-    margin-top: 2vh; /* Adjusted margin for better spacing */
     font-size: 1.5rem;
+    margin-bottom: 1vh;
     color: #75a47f;
 }
 
 .please {
     display: flex;
     flex-direction: column;
     align-items: center;
+    text-decoration-line: none;
 }
 
 /* PlantGrid CSS */
@@ -37,7 +37,13 @@
 /* Responsive adjustments */
 @media screen and (max-width: 768px) {
     .plant-grid {
-        grid-template-columns: repeat(3, 1fr); /* 2 columns on medium screens */
+        grid-template-columns: repeat(3, 1fr); /* 3 columns on large screens */
+    }
+}
+
+@media screen and (max-width: 640px) {
+    .plant-grid {
+        grid-template-columns: repeat(2, 1fr); /* 2 columns on medium screens */
     }
 }
 

src/components/Plant.jsx

@@ -12,10 +12,14 @@
 
 // export default PlantItem;
 
+import PropTypes from "prop-types";
 import { Link } from "react-router-dom";
 import "./Plant.css";
 
-function PlantItem({ id, imageSrc, name }) {
+function PlantItem(props) {
+    const id = props.id;
+    const imageSrc = props.imageSrc;
+    const name = props.name;
     return (
         <div className="plant-item">
             <Link className="please" to={`/detail/${id}`}>
@@ -27,4 +31,10 @@ function PlantItem({ id, imageSrc, name }) {
     );
 }
 
+PlantItem.propTypes = {
+    id: PropTypes.string,
+    imageSrc: PropTypes.string,
+    name: PropTypes.string,
+};
+
 export default PlantItem;

src/components/PlantGrid.jsx

@@ -1,25 +1,33 @@
+import PropTypes from "prop-types";
 import PlantItem from "../components/Plant";
 import "../components/PlantGrid";
+import image1 from "../assets/img/1.1.gif";
+import image2 from "../assets/img/5.gif";
+import image3 from "../assets/img/4.gif";
 
-const PlantGrid = () => {
-    const plants = [
-        { id: 1, imageSrc: "./src/assets/img/1.1.gif", name: "Plant 1" },
-        { id: 2, imageSrc: "./src/assets/img/5.gif", name: "Plant 2" },
-        { id: 3, imageSrc: "./src/assets/img/4.gif", name: "Plant 3" },
-        { id: 4, imageSrc: "/src/assets/img/1.1.gif", name: "Plant 4" },
-        { id: 5, imageSrc: "/src/assets/img/5.gif", name: "Plant 5" },
-        { id: 6, imageSrc: "/src/assets/img/4.gif", name: "Plant 6" },
-    ];
+const PlantGrid = (props) => {
+    const plants = props.userData.devices;
+    const plantImages = [image1, image2, image3];
+    let currentImage = 0;
 
     return (
         <div className="plant-grid">
             {plants.map((plant) => (
-                <PlantItem key={plant.id} imageSrc={plant.imageSrc} name={plant.name} />
+                <PlantItem
+                    key={plant.id}
+                    id={plant.id}
+                    imageSrc={plantImages[currentImage++ % 3]}
+                    name={plant.name}
+                />
             ))}
         </div>
     );
 };
 
+PlantGrid.propTypes = {
+    userData: PropTypes.object,
+};
+
 export default PlantGrid;
 
 // import React from 'react';

src/pages/Detail.css

@@ -9,16 +9,6 @@
     background-size: cover;
     display: inline-block;
 } */
-.navbar {
-    height: 4vh;
-    /* font-size: 3vh; */
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background-color: #bacd92;
-    padding: 1vh;
-    font-family: "PilserBold", sans-serif;
-}
 
 .detail {
     background-color: #fdfff2;