React

Název, cena, dostupnost a obsluha košíku přicházejí jako props. Lokální state uchovává pouze počet přidání provedených v této kartě. Funkce předaná do onClick se spustí až při události; během renderu se nemění okolní data ani DOM.

V reálné aplikaci by onAddToCart obvykle volala vyšší aplikační vrstvu. Ta musí zobrazit průběh a chybu, ošetřit opakované odeslání a respektovat autoritativní odpověď serveru. Lokální číslo v komponentě není zdroj pravdy pro obsah objednávky.

TypeScript / React (TSX)

import { useState } from 'react';

type ProductCardProps = {
  id: string;
  name: string;
  price: string;
  inStock: boolean;
  onAddToCart: (productId: string) => Promise<void>;
};

export function ProductCard({
  id, name, price, inStock, onAddToCart,
}: ProductCardProps) {
  const [addedCount, setAddedCount] = useState(0);
  const [isAdding, setIsAdding] = useState(false);
  const [error, setError] = useState<string | null>(null);

  async function handleAdd() {
    setIsAdding(true);
    setError(null);
    try {
      await onAddToCart(id);
      setAddedCount((count) => count + 1);
    } catch {
      setError('Přidání se nepodařilo. Zkuste to znovu.');
    } finally {
      setIsAdding(false);
    }
  }

  return (
    <article>
      <h2>{name}</h2>
      <p>{price}</p>
      <p>{inStock ? 'Skladem' : 'Není skladem'}</p>
      <button type="button" disabled={!inStock || isAdding} onClick={handleAdd}>
        {isAdding ? 'Přidávám…' : 'Přidat do košíku'}
      </button>
      {addedCount > 0 && <p aria-live="polite">Přidáno: {addedCount}×</p>}
      {error && <p role="alert">{error}</p>}
    </article>
  );
}