From eb316aa875f43a6f895c5203267ab72b5e6cf918 Mon Sep 17 00:00:00 2001
From: RayLui2 <luiray28@gmail.com>
Date: Mon, 27 May 2024 17:42:58 -0700
Subject: [PATCH] Product Pages - No functionality

---
 .../react-frontend/src/Components/Navbar.jsx  |  2 +
 .../react-frontend/src/Components/Table.jsx   |  6 ++
 packages/react-frontend/src/Styles/Navbar.css | 43 ++++++++++
 .../react-frontend/src/Views/ProductPage.jsx  | 80 +++++++++++++++++++
 4 files changed, 131 insertions(+)
 create mode 100644 packages/react-frontend/src/Views/ProductPage.jsx

diff --git a/packages/react-frontend/src/Components/Navbar.jsx b/packages/react-frontend/src/Components/Navbar.jsx
index 8066afc..62bfe6c 100644
--- a/packages/react-frontend/src/Components/Navbar.jsx
+++ b/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>
diff --git a/packages/react-frontend/src/Components/Table.jsx b/packages/react-frontend/src/Components/Table.jsx
index c738b62..cff2540 100644
--- a/packages/react-frontend/src/Components/Table.jsx
+++ b/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>
         );
       }
diff --git a/packages/react-frontend/src/Styles/Navbar.css b/packages/react-frontend/src/Styles/Navbar.css
index 50d6480..d97db2d 100644
--- a/packages/react-frontend/src/Styles/Navbar.css
+++ b/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 */
+}
diff --git a/packages/react-frontend/src/Views/ProductPage.jsx b/packages/react-frontend/src/Views/ProductPage.jsx
new file mode 100644
index 0000000..4a54d69
--- /dev/null
+++ b/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;