Listare produse

1. Generarea unor produse în baza de date

Primul pas înainte de a crea componentele necesare pentru afișarea produselor este generarea efectivă a acestora în baza de date. Produsele trebuie să respecte structura modelului definit în baza de date, incluzând toate câmpurile necesare (name, description, price, category, image, stock).

Lista de produse pe care urmează să le generăm este următoarea:

[
  {
    "name": "Wireless Headphones Pro",
    "description": "Noise-cancelling Bluetooth headphones with 30-hour battery life.",
    "price": 199.99,
    "category": "Electronics",
    "image": "https://plus.unsplash.com/premium_photo-1679513691474-73102089c117?ixlib=rb-4.1.0&auto=format&fit=crop&q=60&w=500",
    "stock": 100
  },
  {
    "name": "Cotton Crewneck Tee",
    "description": "Premium soft cotton t-shirt available in multiple colors.",
    "price": 29.99,
    "category": "Clothing",
    "image": "https://images.unsplash.com/photo-1651761179569-4ba2aa054997?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8Y290dG9uJTIwdCUyMHNoaXJ0fGVufDB8fDB8fHww&auto=format&fit=crop&q=60&w=500",
    "stock": 250
  },
  {
    "name": "The Art of Mindfulness",
    "description": "A practical guide to mindfulness and meditation for daily life.",
    "price": 19.99,
    "category": "Books",
    "image": "https://images.unsplash.com/photo-1512820790803-83ca734da794?ixlib=rb-4.0.3&auto=format&fit=crop&q=60&w=500",
    "stock": 150
  },
  {
    "name": "Minimalist Desk Lamp",
    "description": "Adjustable LED desk lamp with touch dimming and USB charging port.",
    "price": 59.99,
    "category": "Home",
    "image": "https://images.unsplash.com/photo-1621447980929-6638614633c8?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8ZGVzayUyMGxhbXB8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&q=60&w=500",
    "stock": 120
  },
    {
    "name": "Pro Basketball",
    "description": "Official size and weight basketball suitable for indoor and outdoor play.",
    "price": 49.99,
    "category": "Sports",
    "image": "https://media.istockphoto.com/id/1636022764/photo/basketball-ball.webp?a=1&b=1&s=612x612&w=0&k=20&c=O1vh__YNBnuRBvourLKdU4Gmeuukm6NU7KbsC-EH2-Y=",
    "stock": 80
  },
    {
    "name": "Organic Almonds Pack",
    "description": "A 500g pack of raw organic almonds, perfect for healthy snacking.",
    "price": 14.99,
    "category": "Food",
    "image": "https://images.unsplash.com/photo-1615485737457-f07082c77813?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NHx8YWxtb25kfGVufDB8fDB8fHww&auto=format&fit=crop&q=60&w=500",
    "stock": 200
  },
    {
    "name": "Eco-Friendly Notebook",
    "description": "Recycled paper notebook with durable cover and 200 lined pages.",
    "price": 9.99,
    "category": "Other",
    "image": "https://images.unsplash.com/photo-1593642532973-d31b6557fa68?ixlib=rb-4.0.3&auto=format&fit=crop&q=60&w=500",
    "stock": 300
  },
    {
    "name": "Smart Fitness Tracker",
    "description": "Track your steps, heart rate, sleep, and workouts with this sleek wearable.",
    "price": 79.99,
    "category": "Electronics",
    "image": "https://images.unsplash.com/photo-1669480380743-f76990b9bc44?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTh8fGZpdG5lc3MlMjB0cmFja2VyfGVufDB8fDB8fHww&auto=format&fit=crop&q=60&w=500",
    "stock": 90
  }
]

Fiecare produs din listă trebuie creat printr-un request de tip POST în Postman, incluzând toate câmpurile produsului în body-ul request-ului. Astfel, baza de date va fi populată cu produse reale, gata pentru a fi afișate în interfața aplicației.

2. Crearea metodei de GET care va prelua lista de produse

Generăm fișierul product.routes.js definește funcția de GET pentru produse:

// client/src/api/product.routes.js
import axiosNoAuth from "../axios/axiosNoAuth";

export const fetchProducts = async () => {
  try {
    const response = await axiosNoAuth.get('products');
    return response.data;
  } catch (error) {
    console.error("Error fetching products:", error);
    return error.response?.data;
  }
};

3. Actualizarea componentei ProductsPage

După ce am adăugat rute care preia toate produsele din baza de date, este nevoie să actualizăm componenta ProductsPage.jsx care va face un request către baza de date pentru a prelua documentele și pentru a le lista în pagină.

Această componentă utilizează useEffect pentru a încărca produsele la montarea componentului și useState pentru gestionarea datelor locale. Se integrează cu Redux pentru a verifica rolul utilizatorului curent.

// client/src/pages/ProductsPage.jsx
import { useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { toast } from 'sonner';
import { fetchProducts, deleteProduct } from '../api/product.routes';
import LoadingSpinner from '../components/LoadingSpinner';

export default function ProductsPage() {
  const [products, setProducts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [deletingId, setDeletingId] = useState(null);
  const user = useSelector((state) => state.user.user);
  const isAdmin = user?.role === 'admin';
  const navigate = useNavigate();

  useEffect(() => {
    const getProducts = async () => {
      try {
        setLoading(true);
        const {data} = await fetchProducts();
        if (data && Array.isArray(data)) {
          setProducts(data);
        } else {
          setError('Failed to load products');
        }
      } catch (err) {
        setError(err.message || 'An error occurred while fetching products');
        console.error('Error fetching products:', err);
      } finally {
        setLoading(false);
      }
    };

    getProducts();
  }, []);

  const handleEditClick = (productId) => {
    navigate(`/products/edit/${productId}`);
  };

  const handleDeleteClick = async (productId) => {
    if (!confirm('Are you sure you want to delete this product?')) {
      return;
    }

    try {
      setDeletingId(productId);
      const response = await deleteProduct(productId);

      if (response?.success) {
        setProducts(products.filter((p) => p.id !== productId));
        toast.success('Product deleted successfully');
      } else {
        toast.error(response?.message || 'Failed to delete product');
      }
    } catch (err) {
      toast.error(err.message || 'An error occurred while deleting the product');
    } finally {
      setDeletingId(null);
    }
  };

  const handleCreateClick = () => {
    navigate('/products/create');
  };

  if (loading) {
    return <LoadingSpinner />;
  }

  if (error) {
    return (
      <div className="bg-white h-screen flex items-center justify-center">
        <div className="text-center">
          <p className="text-red-500 font-semibold">{error}</p>
        </div>
      </div>
    );
  }

  if (!products || products.length === 0) {
    return (
      <div className="bg-white h-screen flex items-center justify-center">
        <div className="text-center">
          <p className="text-gray-500 font-semibold">No products available</p>
          {isAdmin && (
            <button
              onClick={handleCreateClick}
              className="mt-4 inline-flex items-center rounded-md bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-500"
            >
              <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
              </svg>
              Create First Product
            </button>
          )}
        </div>
      </div>
    );
  }

  return (
    <div className="bg-white h-screen overflow-y-auto">
      <div className="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
        <div className="flex justify-between items-center mb-8">
          <h2 className="text-2xl font-bold tracking-tight text-gray-900">Products</h2>
          {isAdmin && (
            <button
              onClick={handleCreateClick}
              className="inline-flex items-center rounded-md bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-500"
            >
              <svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
              </svg>
              Create Product
            </button>
          )}
        </div>

        <div className="mt-6 grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-4 xl:gap-x-8">
          {products.map((product) => (
            <div key={product.id} className="group relative">
              <div className="relative">
                <img
                  alt={product.name}
                  src={product.image || 'https://via.placeholder.com/300'}
                  className="aspect-square w-full rounded-md bg-gray-200 object-cover group-hover:opacity-75 lg:aspect-auto lg:h-80 pointer-events-none"
                />
                {isAdmin && (
                  <div className="absolute top-2 right-2 flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10">
                    <button
                      type="button"
                      className="bg-blue-500 hover:bg-blue-600 text-white p-2 rounded-md shadow-lg transition-colors duration-200"
                      onClick={() => handleEditClick(product.id)}
                      title="Edit"
                    >
                      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                      </svg>
                    </button>
                    <button
                      type="button"
                      className="bg-red-500 hover:bg-red-600 text-white p-2 rounded-md shadow-lg transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
                      onClick={() => handleDeleteClick(product.id)}
                      disabled={deletingId === product.id}
                      title="Delete"
                    >
                      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                      </svg>
                    </button>
                  </div>
                )}
              </div>
              <div className="mt-4 flex justify-between">
                <div>
                  <h3 className="text-sm text-gray-700">
                    <a href="#" onClick={(e) => e.preventDefault()}>
                      <span aria-hidden="true" className="absolute inset-0" />
                      {product.name}
                    </a>
                  </h3>
                  <p className="mt-1 text-sm text-gray-500">{product.category}</p>
                </div>
                <p className="text-sm font-medium text-gray-900">${product.price}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

Explicații detaliate

• useEffect + fetchProducts: La montarea componentei, se face un request asincron către API pentru a prelua lista de produse.

• Stări locale (useState): products pentru date, loading pentru afișarea spinnerului, error pentru mesajele de eroare.

• Redux (useSelector): Se verifică rolul utilizatorului curent pentru a activa funcționalitățile de admin (edit/delete).

• Afișarea produselor: Produsele sunt afișate într-un grid responsive cu TailwindCSS. Dacă lista e goală sau apare o eroare, se afișează un mesaj corespunzător.

• Admin overlay: Butoanele pentru editare și ștergere apar doar la utilizatori cu rol de admin și se afișează la hover pe produs.

Listarea produselor