Skip to content
Snippets Groups Projects
Select Git revision
  • d99eb3b2f3c37401b031c22332dd9174bf454b0c
  • main default protected
2 results

ProductDetails.js

Blame
  • Code owners
    Assign users and groups as approvers for specific file changes. Learn more.
    ProductDetails.js 1.62 KiB
    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;