From 0b49687b96f5c02a0e1c27158405f60cda8df667 Mon Sep 17 00:00:00 2001
From: Tiago Brito <69848652+britotiago03@users.noreply.github.com>
Date: Fri, 10 May 2024 05:13:20 +0200
Subject: [PATCH] Implemented CategoryProducts.css
---
frontend/src/components/CategoryProducts.js | 47 +++++++++++++++++++++
1 file changed, 47 insertions(+)
create mode 100644 frontend/src/components/CategoryProducts.js
diff --git a/frontend/src/components/CategoryProducts.js b/frontend/src/components/CategoryProducts.js
new file mode 100644
index 0000000..bf771a6
--- /dev/null
+++ b/frontend/src/components/CategoryProducts.js
@@ -0,0 +1,47 @@
+import React, { useState, useEffect } from 'react';
+import { useParams, Link } from 'react-router-dom';
+import { useCart } from '../contexts/CartContext';
+import '../css/CategoryProducts.css'; // Ensure CSS is correctly linked
+
+function CategoryProducts() {
+ const { categoryName } = useParams();
+ const { addToCart } = useCart();
+ const [products, setProducts] = useState([]);
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ fetch(`http://localhost:5000/products/category/${categoryName}`) // Ensure this endpoint exists and is configured to return products by category name
+ .then(response => response.json())
+ .then(data => {
+ setProducts(data);
+ setLoading(false);
+ })
+ .catch(err => {
+ console.error('Error fetching products by category:', err);
+ setLoading(false);
+ });
+ }, [categoryName]);
+
+ if (loading) return <div>Loading products...</div>;
+ if (!products.length) return <div>No products found in this category.</div>;
+
+ return (
+ <div className="category-products">
+ <h2>Products in {categoryName}</h2>
+ <div className="category-product-list">
+ {products.map(product => (
+ <div key={product.ProductID} className="category-product">
+ <img src={product.ImageURL} alt={product.Name} style={{ width: '200px', height: '200px', objectFit: 'contain' }} />
+ <h3>{product.Name}</h3>
+ <p>{product.Description}</p>
+ <p>Price: {product.Price},-</p>
+ <button onClick={() => addToCart({...product, id: product.ProductID})}>Add to Cart</button>
+ <Link to={`/product/${product.ProductID}`}>View Details</Link>
+ </div>
+ ))}
+ </div>
+ </div>
+ );
+}
+
+export default CategoryProducts;
--
GitLab