Product Pages - No functionality

packages/react-frontend/src/Components/Navbar.jsx

@@ -7,6 +7,7 @@ import ManageOrders from "../Views/ManageOrders";
 import AddOrders from "../Views/AddOrders";
 import OrderStatistics from "../Views/OrderStatistics";
 import ProfilePage from "../Views/Profile";
+import ProductPage from "../Views/ProductPage"; // Import ProductPage component
 import "../Styles/Navbar.css";
 
 function App() {
@@ -25,6 +26,7 @@ function App() {
  <Route path="/statistics" element={<OrderStatistics />} />
  <Route path="/profile" element={<ProfilePage user_id={user} />} />
  <Route path="/" element={<HomePage />} />
+ <Route path="/product/:id" element={<ProductPage />} />
  </Routes>
  <Footer />
  </Router>

packages/react-frontend/src/Components/Table.jsx

@@ -9,6 +9,7 @@ function TableHeader() {
  <th>Quantity</th>
  <th>Price</th>
  <th>Remove</th>
+ <th>Edit</th>
  </tr>
  </thead>
  );
@@ -29,6 +30,11 @@ function TableBody(props) {
  <td>
  <button onClick={() => props.removeProduct(index)}>Delete</button>
  </td>
+ <td>
+ <a href={`http://localhost:5173/product/${row._id}`}>
+ <button>Edit</button>
+ </a>
+ </td>
  </tr>
  );
  }

packages/react-frontend/src/Styles/Navbar.css

@@ -143,3 +143,46 @@
 .logo {
  height: 82px;
 }
+
+.ProductPageLogo {
+ height: 150px;
+ display: block;
+ margin: 0 auto;
+}
+
+.subtitle-container {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100px;
+ margin-top: 20px;
+}
+
+.subtitle {
+ font-size: 24px;
+ font-weight: 600;
+ color: #050107;
+}
+
+.edit-product-title {
+ font-size: 24px;
+ font-weight: bold;
+ color: #4a90e2;
+ margin-top: 20px;
+ position: absolute;
+ left: 50px; /* Adjust the left offset as needed */
+ top: 450px; /* Adjust the top offset as needed */
+}
+
+.input-container {
+ margin-left: 50px; /* Adjust the left margin as needed */
+}
+
+.input-container label {
+ display: block;
+ margin-bottom: 15px;
+}
+
+.input-container input {
+ width: 1300px; /* Adjust the width as needed */
+}

packages/react-frontend/src/Views/ProductPage.jsx

@@ -0,0 +1,80 @@
+// ProductPage.js
+import React, { useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
+import { addAuthHeader } from "../Components/helpers";
+
+function ProductPage() {
+ const { id } = useParams();
+ const [product, setProduct] = useState(null);
+
+ useEffect(() => {
+ fetchProduct(id)
+ .then((res) => {
+ if (res) {
+ setProduct(res);
+ } else {
+ setProduct(null);
+ }
+ })
+ .catch((error) => {
+ console.log(error);
+ });
+ }, [id]);
+
+ function fetchProduct(id) {
+ console.log(`Fetching product with id: ${id}`);
+ return fetch(`http://localhost:8000/products/${id}`, {
+ headers: addAuthHeader()
+ })
+ .then((res) => {
+ console.log("Response status:", res.status);
+ if (res.status === 200) {
+ return res.json();
+ } else {
+ throw new Error("Failed to fetch product");
+ }
+ })
+ .catch((error) => {
+ console.error("Error fetching product:", error);
+ });
+ }
+
+ if (!product) {
+ return (
+ <div className="container">
+ <li>
+ <img className="ProductPageLogo" src="../assets/yes.png" alt="Loading" />
+ </li>
+ Loading...
+ </div>
+ );
+ }
+
+ return (
+ <div>
+ <li>
+ <img className="ProductPageLogo" src="../assets/yes.png" alt="Loading" />
+ </li>
+ <div className="subtitle-container">
+ <h2 className="subtitle">Your Product: {product.product}</h2>
+ </div>
+ <h1 className="edit-product-title">Edit Product</h1>
+ <form>
+ <div className="input-container">
+ <label>Product Name:</label>
+ <input type="text" value={product.product} readOnly />
+ </div>
+ <div className="input-container">
+ <label>Quantity:</label>
+ <input type="number" value={product.quantity} readOnly />
+ </div>
+ <div className="input-container">
+ <label>Price:</label>
+ <input type="number" value={product.price} readOnly />
+ </div>
+ </form>
+ </div>
+ );
+}
+
+export default ProductPage;