Homepg & ProductDet.. now updated

2025-03-25 14:47:54 -06:00
parent e7a6e1dd8b
commit f52693dfc2
4 changed files with 156 additions and 68 deletions
--- a/backend/controllers/product.js
+++ b/backend/controllers/product.js
@@ -24,9 +24,19 @@ exports.addToFavorite = async (req, res) => {
 exports.getAllProducts = async (req, res) => {
  try {
    const [data, fields] = await db.execute(`
-      SELECT p.*, i.URL
-      FROM Product p
-      LEFT JOIN Image_URL i ON p.ProductID = i.ProductID
+      SELECT
+          P.ProductID,
+          P.Name AS ProductName,
+          P.Price,
+          P.Date AS DateUploaded,
+          U.Name AS SellerName,
+          I.URL AS ProductImage,
+          C.Name AS Category
+      FROM Product P
+      LEFT JOIN
+          (SELECT ProductID, URL FROM Image_URL LIMIT 1) I ON P.ProductID = I.ProductID
+      JOIN User U ON P.UserID = U.UserID
+      JOIN Category C ON P.CategoryID = C.CategoryID;
    `);

    res.json({
@@ -43,10 +53,10 @@ exports.getAllProducts = async (req, res) => {
  }
 };

-// Get a single product by ID along with image URLs
 exports.getProductById = async (req, res) => {
  const { id } = req.params;
-  console.log(id);
+  console.log("Received Product ID:", id);
+
  try {
    const [data] = await db.execute(
      `
@@ -58,29 +68,42 @@ exports.getProductById = async (req, res) => {
      [id],
    );

+    // Log raw data for debugging
+    console.log("Raw Database Result:", data);
+
    if (data.length === 0) {
+      console.log("No product found with ID:", id);
      return res.status(404).json({
        success: false,
        message: "Product not found",
      });
    }

-    // Assuming that `data` contains product information and the image URLs
+    // Collect all image URLs
+    const images = data
+      .map((row) => row.image_url)
+      .filter((url) => url !== null);
+
+    // Create product object with all details from first row and collected images
    const product = {
-      ...data[0], // First product found in the query
-      images: data.map((image) => image.image_url), // Collect all image URLs into an array
+      ...data[0], // Base product details
+      images: images, // Collected image URLs
    };

+    // Log processed product for debugging
+    console.log("Processed Product:", product);
+
    res.json({
      success: true,
      message: "Product fetched successfully",
      data: product,
    });
  } catch (error) {
-    console.error("Error fetching product:", error);
+    console.error("Full Error Details:", error);
    return res.status(500).json({
      success: false,
-      error: "Database error occurred",
+      message: "Database error occurred",
+      error: error.message,
    });
  }
 };
--- a/backend/routes/product.js
+++ b/backend/routes/product.js
@@ -1,16 +1,20 @@
+// routes/product.js
 const express = require("express");
 const {
  addToFavorite,
  getAllProducts,
  getProductById,
 } = require("../controllers/product");
-
 const router = express.Router();

+// Add detailed logging middleware
+router.use((req, res, next) => {
+  console.log(`Incoming ${req.method} request to ${req.path}`);
+  next();
+});
+
 router.post("/add_fav_product", addToFavorite);
-
 router.get("/get_product", getAllProducts);
-
-router.post("/get_productID", getProductById);
+router.get("/:id", getProductById); // Simplified route

 module.exports = router;
--- a/frontend/src/pages/Home.jsx
+++ b/frontend/src/pages/Home.jsx
@@ -21,14 +21,14 @@ const Home = () => {
          setListings(
            data.data.map((product) => ({
              id: product.ProductID,
-              title: product.Name,
+              title: product.ProductName, // Use the alias from SQL
              price: product.Price,
-              category: product.CategoryID,
-              image: product.URL,
+              category: product.Category, // Ensure this gets the category name
+              image: product.ProductImage, // Use the alias for image URL
              condition: "New", // Modify based on actual data
-              seller: product.UserID, // Modify if seller info is available
-              datePosted: "Just now",
-              isFavorite: false,
+              seller: product.SellerName, // Fetch seller name properly
+              datePosted: product.DateUploaded, // Use the actual date
+              isFavorite: false, // Default state
            })),
          );
        } else {
--- a/frontend/src/pages/ProductDetail.jsx
+++ b/frontend/src/pages/ProductDetail.jsx
@@ -5,6 +5,8 @@ import { Heart, ArrowLeft, Tag, User, Calendar } from "lucide-react";
 const ProductDetail = () => {
  const { id } = useParams();
  const [product, setProduct] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
  const [isFavorite, setIsFavorite] = useState(false);
  const [showContactForm, setShowContactForm] = useState(false);
  const [message, setMessage] = useState("");
@@ -14,19 +16,28 @@ const ProductDetail = () => {
  useEffect(() => {
    const fetchProduct = async () => {
      try {
-        const response = await fetch(
-          `http://localhost:3030/api/product/get_productID/${id}`,
-        );
-        if (!response.ok) throw new Error("Failed to fetch product");
+        setLoading(true);
+        const response = await fetch(`http://localhost:3030/api/product/${id}`);

-        const data = await response.json();
-        if (data.success) {
-          setProduct(data.data); // Update the state with product details
+        if (!response.ok) {
+          throw new Error("Failed to fetch product");
+        }
+
+        const result = await response.json();
+        console.log(result);
+
+        if (result.success) {
+          setProduct(result.data);
+          setError(null);
        } else {
-          throw new Error(data.message || "Error fetching product");
+          throw new Error(result.message || "Error fetching product");
        }
      } catch (error) {
        console.error("Error fetching product:", error);
+        setError(error.message);
+        setProduct(null);
+      } finally {
+        setLoading(false);
      }
    };

@@ -34,14 +45,35 @@ const ProductDetail = () => {
  }, [id]);

  // Handle favorite toggle
-  const toggleFavorite = () => {
-    setIsFavorite(!isFavorite);
+  const toggleFavorite = async () => {
+    try {
+      const response = await fetch(
+        "http://localhost:3030/api/product/add_to_favorite",
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            userID: 1, // Replace with actual user ID
+            productsID: id,
+          }),
+        },
+      );
+
+      const result = await response.json();
+      if (result.success) {
+        setIsFavorite(!isFavorite);
+      }
+    } catch (error) {
+      console.error("Error toggling favorite:", error);
+    }
  };

  // Handle message submission
  const handleSendMessage = (e) => {
    e.preventDefault();
-    // Handle message logic here (send to seller)
+    // TODO: Implement actual message sending logic
    console.log("Message sent:", message);
    setMessage("");
    setShowContactForm(false);
@@ -50,23 +82,53 @@ const ProductDetail = () => {

  // Image navigation
  const nextImage = () => {
-    setCurrentImage((prev) =>
-      prev === product.images.length - 1 ? 0 : prev + 1,
-    );
+    if (product && product.images) {
+      setCurrentImage((prev) =>
+        prev === product.images.length - 1 ? 0 : prev + 1,
+      );
+    }
  };

  const prevImage = () => {
-    setCurrentImage((prev) =>
-      prev === 0 ? product.images.length - 1 : prev - 1,
-    );
+    if (product && product.images) {
+      setCurrentImage((prev) =>
+        prev === 0 ? product.images.length - 1 : prev - 1,
+      );
+    }
  };

  const selectImage = (index) => {
    setCurrentImage(index);
  };

-  if (!product) return <div>Loading...</div>; // Handle loading state
+  // Render loading state
+  if (loading) {
+    return (
+      <div className="flex justify-center items-center h-screen">
+        <div className="animate-spin rounded-full h-32 w-32 border-t-2 border-green-500"></div>
+      </div>
+    );
+  }

+  // Render error state
+  if (error) {
+    return (
+      <div className="flex justify-center items-center h-screen">
+        <div className="text-center">
+          <h2 className="text-2xl text-red-500 mb-4">Error Loading Product</h2>
+          <p className="text-gray-600">{error}</p>
+          <Link
+            to="/"
+            className="mt-4 inline-block bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600"
+          >
+            Back to Listings
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  // Render product details
  return (
    <div className="max-w-6xl mx-auto px-4 py-8">
      <div className="mb-6">
@@ -82,15 +144,21 @@ const ProductDetail = () => {
      <div className="flex flex-col md:flex-row gap-8">
        <div className="md:w-3/5">
          <div className="bg-white border border-gray-200 mb-4 relative">
-            <img
-              src={product.images[currentImage]}
-              alt={product.title}
-              className="w-full h-auto object-contain cursor-pointer"
-              onClick={nextImage}
-            />
+            {product.images && product.images.length > 0 ? (
+              <img
+                src={product.images[currentImage]}
+                alt={product.Name}
+                className="w-full h-auto object-contain cursor-pointer"
+                onClick={nextImage}
+              />
+            ) : (
+              <div className="w-full h-96 flex items-center justify-center bg-gray-200 text-gray-500">
+                No Image Available
+              </div>
+            )}
          </div>

-          {product.images.length > 1 && (
+          {product.images && product.images.length > 1 && (
            <div className="flex gap-2 overflow-x-auto pb-2">
              {product.images.map((image, index) => (
                <div
@@ -100,7 +168,7 @@ const ProductDetail = () => {
                >
                  <img
                    src={image}
-                    alt={`${product.title} - view ${index + 1}`}
+                    alt={`${product.Name} - view ${index + 1}`}
                    className="w-full h-auto object-cover"
                  />
                </div>
@@ -113,7 +181,7 @@ const ProductDetail = () => {
          <div className="bg-white border border-gray-200 p-6 mb-6">
            <div className="flex justify-between items-start mb-4">
              <h1 className="text-2xl font-bold text-gray-800">
-                {product.title}
+                {product.Name}
              </h1>
              <button
                onClick={toggleFavorite}
@@ -126,12 +194,12 @@ const ProductDetail = () => {
            </div>

            <div className="text-2xl font-bold text-green-600 mb-4">
-              ${product.price}
+              ${product.Price}
            </div>
            <div className="flex flex-wrap gap-x-4 gap-y-2 mb-6 text-sm">
              <div className="flex items-center text-gray-600">
                <Tag className="h-4 w-4 mr-1" />
-                <span>{product.category}</span>
+                <span>{product.Category}</span>
              </div>
              <div className="flex items-center text-gray-600">
                <span className="font-medium">Condition:</span>
@@ -139,12 +207,12 @@ const ProductDetail = () => {
              </div>
              <div className="flex items-center text-gray-600">
                <Calendar className="h-4 w-4 mr-1" />
-                <span>Posted on {product.datePosted}</span>
+                <span>Posted on {product.Date}</span>
              </div>
            </div>

            <div className="bg-gray-50 p-4 mb-6 border border-gray-200">
-              <p className="text-gray-700">{product.shortDescription}</p>
+              <p className="text-gray-700">{product.Description}</p>
            </div>

            <button
@@ -213,31 +281,24 @@ const ProductDetail = () => {
            <div className="pt-4 border-t border-gray-200">
              <div className="flex items-center mb-3">
                <div className="mr-3">
-                  {product.seller.avatar ? (
-                    <img
-                      src={product.seller.avatar}
-                      alt="Seller"
-                      className="h-12 w-12 rounded-full"
-                    />
-                  ) : (
-                    <div className="h-12 w-12 rounded-full bg-gray-200 flex items-center justify-center">
-                      <User className="h-6 w-6 text-gray-600" />
-                    </div>
-                  )}
+                  <div className="h-12 w-12 rounded-full bg-gray-200 flex items-center justify-center">
+                    <User className="h-6 w-6 text-gray-600" />
+                  </div>
                </div>
                <div>
                  <h3 className="font-medium text-gray-800">
-                    {product.seller.name}
+                    {product.UserID || "Unknown Seller"}
                  </h3>
                  <p className="text-sm text-gray-500">
-                    Member since {product.seller.memberSince}
+                    Member since{" "}
+                    {product.seller ? product.seller.memberSince : "N/A"}
                  </p>
                </div>
              </div>
              <div className="text-sm text-gray-600">
                <div>
                  <span className="font-medium">Rating:</span>{" "}
-                  {product.seller.rating}/5
+                  {product.seller ? `${product.seller.rating}/5` : "N/A"}
                </div>
              </div>
            </div>
@@ -245,12 +306,12 @@ const ProductDetail = () => {
        </div>
      </div>

-      <div className="mt-8">
+      {/* <div className="mt-8">
        <h2 className="text-xl font-bold text-gray-800 mb-4">Description</h2>
        <div className="bg-white border border-gray-200 p-6">
-          <div className="text-gray-700">{product.description}</div>
+          <div className="text-gray-700">{product.Description}</div>
        </div>
-      </div>
+      </div> */}
    </div>
  );
 };