From 6ef4a22e9f224b57a8edb164c6f6724ff4dfae1b Mon Sep 17 00:00:00 2001
From: Mann Patel <130435633+MannPatel0@users.noreply.github.com>
Date: Sun, 20 Apr 2025 12:50:46 -0600
Subject: [PATCH] update on category

---
 backend/controllers/category.js      |   1 -
 backend/controllers/product.js       |  32 ++++--
 frontend/src/pages/Home.jsx          |   4 +-
 frontend/src/pages/ProductDetail.jsx |  35 +++---
 frontend/src/pages/Selling.jsx       | 164 ++++++++++++++-------------
 5 files changed, 127 insertions(+), 109 deletions(-)

diff --git a/backend/controllers/category.js b/backend/controllers/category.js
index 98a6c25..31776f7 100644
--- a/backend/controllers/category.js
+++ b/backend/controllers/category.js
@@ -4,7 +4,6 @@ exports.getAllCategory = async (req, res) => {
   try {
     const [data, fields] = await db.execute(`SELECT * FROM Category`);
 
-    // Format as { ID: "", ID: "" }
     const formattedData = {};
     data.forEach((row) => {
       formattedData[row.CategoryID] = row.Name;
diff --git a/backend/controllers/product.js b/backend/controllers/product.js
index 9684513..bbe4f1f 100644
--- a/backend/controllers/product.js
+++ b/backend/controllers/product.js
@@ -1,22 +1,34 @@
 const db = require("../utils/database");
 
 exports.addProduct = async (req, res) => {
-  const { userID, name, price, stockQty, Description } = req.body;
-  console.log(userID);
+  const { userID, name, price, qty, description, category, images } = req.body;
+
   try {
-    // Use parameterized query to prevent SQL injection
     const [result] = await db.execute(
-      `INSERT INTO Favorites (UserID, ProductID) VALUES (?, ?)`,
-      [userID, productID],
+      `INSERT INTO Product (Name, Price, StockQuantity, UserID, Description, CategoryID) VALUES (?, ?, ?, ?, ?, ?)`,
+      [name, price, qty, userID, description, category],
     );
 
+    const productID = result.insertId;
+    if (images && images.length > 0) {
+      const imageInsertPromises = images.map((imagePath) =>
+        db.execute(`INSERT INTO Image_URL (URL, ProductID) VALUES (?, ?)`, [
+          imagePath,
+          productID,
+        ]),
+      );
+
+      await Promise.all(imageInsertPromises); //perallel
+    }
+
     res.json({
       success: true,
-      message: "Product added to favorites successfully",
+      message: "Product and images added successfully",
     });
   } catch (error) {
-    console.error("Error adding favorite product:", error);
-    return res.json({ error: "Could not add favorite product" });
+    console.error("Error adding product or images:", error);
+    console.log(error);
+    return res.json({ error: "Could not add product or images" });
   }
 };
 
@@ -64,7 +76,7 @@ exports.myProduct = async (req, res) => {
   const { userID } = req.body;
 
   try {
-    const [favorites] = await db.execute(
+    const [result] = await db.execute(
       `
       SELECT
       p.ProductID,
@@ -95,7 +107,7 @@ exports.myProduct = async (req, res) => {
 
     res.json({
       success: true,
-      favorites: favorites,
+      data: result,
     });
   } catch (error) {
     console.error("Error retrieving favorites:", error);
diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
index 22dc205..9782f87 100644
--- a/frontend/src/pages/Home.jsx
+++ b/frontend/src/pages/Home.jsx
@@ -201,7 +201,7 @@ const Home = () => {
             <img
               src="../public/Ucalgary.png"
               alt="University of Calgary"
-              className="w-full h-full object-cover object-bottom opacity-50"
+              className="w-full h-full object-cover object-bottom opacity-45"
             />
             {/* Dark overlay for better text readability */}
           </div>
@@ -217,7 +217,7 @@ const Home = () => {
             </p>
             <button
               onClick={handleSelling}
-              className="bg-emerald-500 hover:bg-emerald-600 text-white font-medium py-2 px-6 focus:outline-none focus:ring-2 focus:ring-emerald-400 transition-colors"
+              className="bg-emerald-600 hover:bg-emerald-700 text-white font-medium py-2 px-6 focus:outline-none focus:ring-2 focus:ring-emerald-400 transition-colors"
             >
               Post an Item
             </button>
diff --git a/frontend/src/pages/ProductDetail.jsx b/frontend/src/pages/ProductDetail.jsx
index a5f0d73..ebec8f2 100644
--- a/frontend/src/pages/ProductDetail.jsx
+++ b/frontend/src/pages/ProductDetail.jsx
@@ -1,7 +1,6 @@
 import { useState, useEffect } from "react";
 import { useParams, Link } from "react-router-dom";
 import {
-  Heart,
   ArrowLeft,
   Tag,
   User,
@@ -26,7 +25,6 @@ const ProductDetail = () => {
     reviews: null,
     submit: null,
   });
-  const [isFavorite, setIsFavorite] = useState(false);
   const [showContactOptions, setShowContactOptions] = useState(false);
   const [currentImage, setCurrentImage] = useState(0);
   const [reviews, setReviews] = useState([]);
@@ -52,7 +50,6 @@ const ProductDetail = () => {
     if (data.success) {
       setShowAlert(true);
     }
-    console.log(`Add Product -> History: ${id}`);
   };
 
   const [reviewForm, setReviewForm] = useState({
@@ -248,7 +245,7 @@ const ProductDetail = () => {
   if (loading.product) {
     return (
       <div className="flex justify-center items-center h-screen">
-        <div className="animate-spin h-32 w-32 border-t-2 border-green-500"></div>
+        <div className="animate-spin h-32 w-32 border-t-2 border-emerald-600"></div>
       </div>
     );
   }
@@ -262,7 +259,7 @@ const ProductDetail = () => {
           <p className="text-gray-600">{error.product}</p>
           <Link
             to="/"
-            className="mt-4 inline-block bg-green-500 text-white px-4 py-2 hover:bg-green-600"
+            className="mt-4 inline-block bg-emerald-600 text-white px-4 py-2 hover:bg-emerald-700"
           >
             Back to Listings
           </Link>
@@ -279,7 +276,7 @@ const ProductDetail = () => {
           <h2 className="text-2xl text-red-500 mb-4">Product Not Found</h2>
           <Link
             to="/"
-            className="mt-4 inline-block bg-green-500 text-white px-4 py-2  hover:bg-green-600"
+            className="mt-4 inline-block bg-emerald-600 text-white px-4 py-2  hover:bg-emerald-700"
           >
             Back to Listings
           </Link>
@@ -291,15 +288,15 @@ const ProductDetail = () => {
   // Render product details
   return (
     <div className="max-w-6xl mx-auto px-4 py-8">
-      <div className="mb-6">
+      {/* <div className="mb-6">
         <Link
           to="/search"
-          className="flex items-center text-green-600 hover:text-green-700"
+          className="flex items-center text-emerald-700 hover:text-emerald-700"
         >
           <ArrowLeft className="h-4 w-4 mr-1" />
           <span>Back</span>
         </Link>
-      </div>
+      </div> */}
       {showAlert && (
         <FloatingAlert
           message="Product added to favorites!"
@@ -351,7 +348,7 @@ const ProductDetail = () => {
               {product.images.map((image, index) => (
                 <div
                   key={index}
-                  className={`bg-white border ${currentImage === index ? "border-green-500 border-2" : "border-gray-200"} min-w-[100px] cursor-pointer`}
+                  className={`bg-white border ${currentImage === index ? "border-emerald-600 border-2" : "border-gray-200"} min-w-[100px] cursor-pointer`}
                   onClick={() => selectImage(index)}
                 >
                   <img
@@ -381,13 +378,13 @@ const ProductDetail = () => {
                   e.preventDefault();
                   toggleFavorite(product.ProductID);
                 }}
-                className="top-0 p-2 rounded-bl-md bg-emerald-600 hover:bg-emerald-500 transition shadow-sm"
+                className="top-0 p-2 rounded-bl-md bg-emerald-700 hover:bg-emerald-600 transition shadow-sm"
               >
                 <Bookmark className="text-white w-5 h-5" />
               </button>
             </div>
 
-            <div className="text-2xl font-bold text-green-600 mb-4">
+            <div className="text-2xl font-bold text-emerald-700 mb-4">
               $
               {typeof product.Price === "number"
                 ? product.Price.toFixed(2)
@@ -418,7 +415,7 @@ const ProductDetail = () => {
             <div className="relative">
               <button
                 onClick={() => setShowContactOptions(!showContactOptions)}
-                className="w-full bg-green-500 hover:bg-green-600 text-white font-medium py-3 px-4 mb-3"
+                className="w-full bg-emerald-700 hover:bg-emerald-700 text-white font-medium py-3 px-4 mb-3"
               >
                 Contact Seller
               </button>
@@ -430,7 +427,7 @@ const ProductDetail = () => {
                       href={`tel:${product.SellerPhone}`}
                       className="flex items-center gap-2 p-3 hover:bg-gray-50 border-b border-gray-100"
                     >
-                      <Phone className="h-5 w-5 text-green-500" />
+                      <Phone className="h-5 w-5 text-emerald-600" />
                       <span>Call Seller</span>
                     </a>
                   )}
@@ -440,7 +437,7 @@ const ProductDetail = () => {
                       href={`mailto:${product.SellerEmail}`}
                       className="flex items-center gap-2 p-3 hover:bg-gray-50"
                     >
-                      <Mail className="h-5 w-5 text-green-500" />
+                      <Mail className="h-5 w-5 text-emerald-600" />
                       <span>Email Seller</span>
                     </a>
                   )}
@@ -477,7 +474,7 @@ const ProductDetail = () => {
         <div className="bg-white border border-gray-200 p-6">
           {loading.reviews ? (
             <div className="flex justify-center py-8">
-              <div className="animate-spin h-8 w-8 border-t-2 border-green-500"></div>
+              <div className="animate-spin h-8 w-8 border-t-2 border-emerald-600"></div>
             </div>
           ) : error.reviews ? (
             <div className="text-red-500 mb-4">
@@ -524,7 +521,7 @@ const ProductDetail = () => {
         <div className="mt-4">
           <button
             onClick={() => setShowReviewForm(true)}
-            className="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4"
+            className="bg-emerald-600 hover:bg-emerald-700 text-white font-medium py-2 px-4"
           >
             Write a Review
           </button>
@@ -582,7 +579,7 @@ const ProductDetail = () => {
                     id="comment"
                     value={reviewForm.comment}
                     onChange={handleReviewInputChange}
-                    className="w-full p-3 border border-gray-300 focus:outline-none focus:border-green-500"
+                    className="w-full p-3 border border-gray-300 focus:outline-none focus:border-emerald-600"
                     rows="4"
                     required
                   ></textarea>
@@ -598,7 +595,7 @@ const ProductDetail = () => {
                   </button>
                   <button
                     type="submit"
-                    className="px-4 py-2 bg-green-500 text-white  hover:bg-green-600"
+                    className="px-4 py-2 bg-emerald-600 text-white  hover:bg-emerald-700"
                     disabled={loading.submitting}
                   >
                     {loading.submitting ? "Submitting..." : "Submit Review"}
diff --git a/frontend/src/pages/Selling.jsx b/frontend/src/pages/Selling.jsx
index e8a87d8..4fdcde1 100644
--- a/frontend/src/pages/Selling.jsx
+++ b/frontend/src/pages/Selling.jsx
@@ -1,12 +1,14 @@
 import { useState, useEffect } from "react";
+import { useLocation, Link } from "react-router-dom";
+
 import ProductForm from "../components/ProductForm";
+import { X } from "lucide-react";
 
 const Selling = () => {
-  // State to store user's products
   const [products, setProducts] = useState([]);
-  // State to control when editing form is shown
   const [showForm, setShowForm] = useState(false);
-  // State to store the product being edited (or empty for new product)
+  const storedUser = JSON.parse(sessionStorage.getItem("user"));
+
   const [editingProduct, setEditingProduct] = useState({
     name: "",
     price: "",
@@ -17,33 +19,36 @@ const Selling = () => {
 
   // Simulate fetching products from API/database on component mount
   useEffect(() => {
-    // This would be replaced with a real API call
     const fetchProducts = async () => {
-      // Mock data
-      const mockProducts = [
-        {
-          id: "1",
-          name: "Vintage Camera",
-          price: "299.99",
-          description: "A beautiful vintage film camera in excellent condition",
-          categories: ["Electronics", "Art & Collectibles"],
-          images: ["/public/Pictures/Dell1.jpg"],
-        },
-        {
-          id: "2",
-          name: "Leather Jacket",
-          price: "149.50",
-          description: "Genuine leather jacket, worn only a few times",
-          categories: ["Clothing"],
-          images: [],
-        },
-      ];
+      try {
+        // Replace with your actual API endpoint
+        const response = await fetch(
+          "http://localhost:3030/api/product/myProduct",
+          {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              userID: storedUser.ID, // Assuming you have userId defined elsewhere in your component
+            }),
+          },
+        );
 
-      setProducts(mockProducts);
+        if (!response.ok) {
+          throw new Error("Network response was not ok");
+        }
+
+        const datajson = await response.json();
+        setProducts(datajson.data);
+      } catch (error) {
+        console.error("Error fetching products:", error);
+        // You might want to set an error state here
+      }
     };
 
     fetchProducts();
-  }, []);
+  }, []); // Add userId to dependency array if it might change
 
   // Handle creating or updating a product
   const handleSaveProduct = () => {
@@ -138,66 +143,71 @@ const Selling = () => {
           ) : (
             <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
               {products.map((product) => (
-                <div
-                  key={product.id}
-                  className="border-2 border-gray-200 overflow-hidden hover:shadow-md transition-shadow"
+                <Link
+                  key={product.ProductID}
+                  to={`/product/${product.ProductID}`}
                 >
-                  <div className="h-48 bg-gray-200 flex items-center justify-center">
-                    {product.images && product.images.length > 0 ? (
-                      <img
-                        src={product.images[0] || ""}
-                        alt={product.name}
-                        className="w-full h-full object-cover"
-                      />
-                    ) : (
-                      <div className="text-gray-400">No image</div>
-                    )}
-                  </div>
-
-                  <div className="p-4">
-                    <div className="flex justify-between items-start">
-                      <h3 className="text-lg font-semibold text-gray-800">
-                        {product.name}
-                      </h3>
+                  <div
+                    key={product.ProductID}
+                    className="border-2 border-gray-200 overflow-hidden hover:shadow-md transition-shadow"
+                  >
+                    <div className="h-48 bg-gray-200 flex items-center justify-center">
+                      {product.image_url && product.image_url.length > 0 ? (
+                        <img
+                          src={product.image_url || ""}
+                          alt={product.Name}
+                          className="w-full h-full object-cover"
+                        />
+                      ) : (
+                        <div className="text-gray-400">No image</div>
+                      )}
                     </div>
 
-                    <p className="text-emerald-600 font-bold mt-1">
-                      ${product.price}
-                    </p>
-
-                    {product.categories && product.categories.length > 0 && (
-                      <div className="mt-2 flex flex-wrap gap-1">
-                        {product.categories.map((category) => (
-                          <span
-                            key={category}
-                            className="text-xs bg-gray-100 text-gray-600 px-2 py-1 "
-                          >
-                            {category}
-                          </span>
-                        ))}
+                    <div className="p-4">
+                      <div className="flex justify-between items-start">
+                        <h3 className="text-lg font-semibold text-gray-800">
+                          {product.Name}
+                        </h3>
                       </div>
-                    )}
 
-                    <p className="text-gray-500 text-sm mt-2 line-clamp-2">
-                      {product.description}
-                    </p>
+                      <p className="text-emerald-600 font-bold mt-1">
+                        ${product.Price}
+                      </p>
 
-                    <div className="mt-4 flex justify-end gap-2">
-                      <button
-                        onClick={() => handleDeleteProduct(product.id)}
-                        className="text-red-600 hover:text-red-800"
-                      >
-                        Delete
-                      </button>
-                      <button
-                        onClick={() => handleEditProduct(product)}
-                        className="text-emerald-600 hover:text-emerald-800 font-medium"
-                      >
-                        Edit
-                      </button>
+                      {product.categories && product.categories.length > 0 && (
+                        <div className="mt-2 flex flex-wrap gap-1">
+                          {product.CategoryID.map((category) => (
+                            <span
+                              key={category}
+                              className="text-xs bg-gray-100 text-gray-600 px-2 py-1 "
+                            >
+                              {category}
+                            </span>
+                          ))}
+                        </div>
+                      )}
+
+                      <p className="text-gray-500 text-sm mt-2 line-clamp-2">
+                        {product.Description}
+                      </p>
+
+                      <div className="mt-4 flex justify-end gap-2">
+                        <button
+                          onClick={() => handleDeleteProduct(product.id)}
+                          className="text-red-600 hover:text-red-800"
+                        >
+                          Delete
+                        </button>
+                        <button
+                          onClick={() => handleEditProduct(product.id)}
+                          className="text-emerald-600 hover:text-emerald-800 font-medium"
+                        >
+                          Edit
+                        </button>
+                      </div>
                     </div>
                   </div>
-                </div>
+                </Link>
               ))}
             </div>
           )}