From d99eb3b2f3c37401b031c22332dd9174bf454b0c Mon Sep 17 00:00:00 2001
From: Tiago Brito <69848652+britotiago03@users.noreply.github.com>
Date: Fri, 10 May 2024 05:12:34 +0200
Subject: [PATCH] Implemented ProductDetails.js
---
frontend/src/components/ProductDetails.js | 43 +++++++++++++++++++++++
1 file changed, 43 insertions(+)
create mode 100644 frontend/src/components/ProductDetails.js
diff --git a/frontend/src/components/ProductDetails.js b/frontend/src/components/ProductDetails.js
new file mode 100644
index 0000000..8577871
--- /dev/null
+++ b/frontend/src/components/ProductDetails.js
@@ -0,0 +1,43 @@
+import React, { useState, useEffect } from 'react';
+import { useParams } from 'react-router-dom';
+import { useCart } from '../contexts/CartContext';
+import '../css/ProductDetails.css'; // Make sure to import the CSS file
+
+function ProductDetails() {
+ const { productId } = useParams();
+ const { addToCart } = useCart();
+ const [product, setProduct] = useState(null);
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ fetch(`http://localhost:5000/products/${productId}`)
+ .then(response => response.json())
+ .then(data => {
+ setProduct(data);
+ setLoading(false);
+ })
+ .catch(err => console.error('Error fetching product details:', err));
+ }, [productId]);
+
+ if (loading) return <p>Loading...</p>;
+ if (!product) return <p>Product not found!</p>;
+
+ return (
+ <div className="product-details">
+ <h1>{product.Name}</h1>
+ <img src={product.ImageURL} alt={product.Name} />
+ <div className="product-info">
+ <p className="product-price">Price: {product.Price},-</p>
+ <p>Description: {product.Description}</p>
+ <p>Category: {product.CategoryName}</p>
+ <p>Brand: {product.BrandName}</p>
+ <p>Stock: {product.StockQuantity} units available</p>
+ <p>Dimensions: {product.Dimensions}</p>
+ <p>Weight: {product.Weight}kg</p>
+ <button onClick={() => addToCart({...product, id: product.ProductID})}>Add to Cart</button>
+ </div>
+ </div>
+ );
+}
+
+export default ProductDetails;
--
GitLab