Administrator / spring-boot-microservices-onlineshooping-fullstack · Files

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import { useCart } from '../context/CartContext';

const ProductList = () => {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [filter, setFilter] = useState('all');
  const { addToCart } = useCart();

  useEffect(() => {
    // 模拟获取产品数据
    const mockProducts = [
      {
        id: 1,
        name: 'Wireless Bluetooth Headphones',
        price: 99.99,
        image: '/api/placeholder/300/300',
        category: 'electronics',
        description: 'High-quality wireless headphones with noise cancellation.'
      },
      {
        id: 2,
        name: 'Smart Watch',
        price: 199.99,
        image: '/api/placeholder/300/300',
        category: 'electronics',
        description: 'Feature-rich smartwatch with health monitoring.'
      },
      {
        id: 3,
        name: 'Cotton T-Shirt',
        price: 24.99,
        image: '/api/placeholder/300/300',
        category: 'clothing',
        description: 'Comfortable cotton t-shirt available in multiple colors.'
      },
      {
        id: 4,
        name: 'Running Shoes',
        price: 129.99,
        image: '/api/placeholder/300/300',
        category: 'sports',
        description: 'Professional running shoes with cushion technology.'
      },
      {
        id: 5,
        name: 'Coffee Maker',
        price: 79.99,
        image: '/api/placeholder/300/300',
        category: 'home',
        description: 'Automatic coffee maker for perfect brew every time.'
      },
      {
        id: 6,
        name: 'Laptop Backpack',
        price: 49.99,
        image: '/api/placeholder/300/300',
        category: 'electronics',
        description: 'Durable laptop backpack with multiple compartments.'
      }
    ];

    setTimeout(() => {
      setProducts(mockProducts);
      setLoading(false);
    }, 1000);
  }, []);

  const filteredProducts = filter === 'all' 
    ? products 
    : products.filter(product => product.category === filter);

  const handleAddToCart = (product) => {
    addToCart(product);
    alert(`${product.name} added to cart!`);
  };

  if (loading) {
    return (
      <div style={loadingStyle}>
        <div>Loading products...</div>
      </div>
    );
  }

  return (
    <div style={containerStyle}>
      <div style={headerStyle}>
        <h1>Our Products</h1>
        <div style={filterStyle}>
          <select 
            value={filter} 
            onChange={(e) => setFilter(e.target.value)}
            style={selectStyle}
          >
            <option value="all">All Categories</option>
            <option value="electronics">Electronics</option>
            <option value="clothing">Clothing</option>
            <option value="home">Home & Garden</option>
            <option value="sports">Sports</option>
          </select>
        </div>
      </div>

      <div style={gridStyle}>
        {filteredProducts.map(product => (
          <div key={product.id} style={cardStyle}>
            <div style={imagePlaceholderStyle}>
              {product.name}
            </div>
            <div style={cardContentStyle}>
              <h3 style={productNameStyle}>{product.name}</h3>
              <p style={descriptionStyle}>{product.description}</p>
              <div style={priceStyle}>${product.price}</div>
              <div style={buttonGroupStyle}>
                <Link to={`/products/${product.id}`} style={detailButtonStyle}>
                  View Details
                </Link>
                <button 
                  onClick={() => handleAddToCart(product)}
                  style={addToCartButtonStyle}
                >
                  Add to Cart
                </button>
              </div>
            </div>
          </div>
        ))}
      </div>

      {filteredProducts.length === 0 && (
        <div style={emptyStyle}>
          <p>No products found in this category.</p>
        </div>
      )}
    </div>
  );
};

const containerStyle = {
  maxWidth: '1200px',
  margin: '0 auto',
  padding: '2rem 1rem',
};

const headerStyle = {
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center',
  marginBottom: '2rem',
  flexWrap: 'wrap',
  gap: '1rem',
};

const filterStyle = {
  display: 'flex',
  gap: '1rem',
  alignItems: 'center',
};

const selectStyle = {
  padding: '0.5rem 1rem',
  border: '1px solid #ddd',
  borderRadius: '4px',
  fontSize: '1rem',
};

const gridStyle = {
  display: 'grid',
  gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
  gap: '2rem',
};

const cardStyle = {
  backgroundColor: 'white',
  borderRadius: '8px',
  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
  overflow: 'hidden',
  transition: 'transform 0.3s, box-shadow 0.3s',
};

const imagePlaceholderStyle = {
  height: '200px',
  backgroundColor: '#f5f5f5',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  color: '#666',
  fontSize: '0.9rem',
};

const cardContentStyle = {
  padding: '1.5rem',
};

const productNameStyle = {
  fontSize: '1.2rem',
  marginBottom: '0.5rem',
  color: '#333',
};

const descriptionStyle = {
  color: '#666',
  fontSize: '0.9rem',
  marginBottom: '1rem',
  lineHeight: '1.4',
};

const priceStyle = {
  fontSize: '1.3rem',
  fontWeight: 'bold',
  color: '#2c5aa0',
  marginBottom: '1rem',
};

const buttonGroupStyle = {
  display: 'flex',
  gap: '0.5rem',
};

const detailButtonStyle = {
  flex: 1,
  padding: '0.5rem 1rem',
  backgroundColor: 'transparent',
  color: '#2c5aa0',
  border: '1px solid #2c5aa0',
  borderRadius: '4px',
  textDecoration: 'none',
  textAlign: 'center',
  fontSize: '0.9rem',
  transition: 'background-color 0.3s',
};

const addToCartButtonStyle = {
  flex: 1,
  padding: '0.5rem 1rem',
  backgroundColor: '#2c5aa0',
  color: 'white',
  border: 'none',
  borderRadius: '4px',
  cursor: 'pointer',
  fontSize: '0.9rem',
  transition: 'background-color 0.3s',
};

const loadingStyle = {
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  height: '50vh',
  fontSize: '1.2rem',
};

const emptyStyle = {
  textAlign: 'center',
  padding: '4rem 1rem',
  color: '#666',
};

export default ProductList;