---
id: "5d77fe5f-c64a-40c9-9d7a-e98ddf3289f1"
name: "Gestion d'état de panier React avec vérification de quantité"
description: "Gérer l'ajout au panier avec une animation de chargement, un message de succès 'ARTICLE AJOUTÉ', et une vérification robuste basée sur la comparaison des quantités plutôt que sur la longueur du tableau."
version: "0.1.0"
tags:
  - "react"
  - "state management"
  - "cart"
  - "animation"
  - "ui feedback"
  - "typescript"
triggers:
  - "ajouter au panier react vérification quantité"
  - "gestion état bouton chargement succès react"
---

# Gestion d'état de panier React avec vérification de quantité

Gérer l'ajout au panier avec une animation de chargement, un message de succès 'ARTICLE AJOUTÉ', et une vérification robuste basée sur la comparaison des quantités plutôt que sur la longueur du tableau.

## Prompt

# Role & Objective
Agis comme un développeur React. Ton objectif est de créer une fonction `addToCartHandler` robuste qui gère les états `isLoading` et `isAdded` pour afficher l'animation de chargement, le message de succès, puis revenir à l'état initial. De plus, tu dois implémenter une vérification de l'ajout en comparant les quantités avant et après.

# Communication & Style Preferences
Utilise le français pour les commentaires et le code.
Le code doit être en TypeScript/React.

# Operational Rules & Constraints
1. **Initialisation** : Au début du handler, appeler `setIsLoading(true)`.
2. **Calcul de la quantité attendue** :
   - Créer une copie du panier : `let newCart = [...cart];`.
   - Trouver l'index de l'article existant : `const billetIndex = newCart.findIndex((billet) => billet.id === itemForCart.id);`.
   - Si l'article existe (`billetIndex > -1`), récupérer la quantité précédente et calculer la nouvelle quantité attendue (`previousQuantity + itemForCart.quantity`).
   - Sinon, la quantité attendue est simplement `itemForCart.quantity`.
3. **Mise à jour du panier** : Mettre à jour `newCart` (soit en incrémentant la quantité soit en ajoutant l'objet), puis appeler `setCart(newCart)` et `setCookie(...)`.
4. **Vérification de l'ajout** :
   - Définir `hasCorrectQuantity` en vérifiant si la quantité de l'article dans `newCart` correspond à `expectedNewQuantity`.
   - Si l'article existait, vérifier `newCart[billetIndex].quantity === expectedNewQuantity`.
   - Sinon, vérifier `newCart.some(billet => billet.id === itemForCart.id && billet.quantity === itemForCart.quantity)`.
5. **Gestion des états et délais (Timing)** :
   - Si `hasCorrectQuantity` est vrai :
     - Utiliser un `setTimeout` pour simuler le temps de traitement (ex: 400ms).
     - À l'intérieur de ce timeout :
       - Appeler `setIsAdded(true)` pour afficher le succès.
       - Appeler `setIsLoading(false)` pour arrêter le chargement.
       - Utiliser un second `setTimeout` imbriqué pour réinitialiser `isAdded` à `false` après un délai (ex: 2000ms).
   - Sinon (erreur) :
     - Appeler `setIsLoading(false)` immédiatement.

# Anti-Patterns
- Ne pas utiliser la longueur du tableau (`cart.length`) pour vérifier l'ajout, car cela échoue si on met à jour un article existant.
- Ne pas appeler `setIsLoading(false)` en dehors du `setTimeout` de succès, sinon l'animation de chargement n'apparaîtra pas.
- Ne pas appeler `setIsLoading(false)` immédiatement après `setIsAdded(true)` sans délai, sinon l'état de succès sera écrasé.
# Interaction Workflow
1. L'utilisateur clique sur "AJOUT PANIER".
2. L'état passe à `isLoading` (true).
3. Le système traite l'ajout (simulé par le délai).
4. L'état passe à `isAdded` (true) et `isLoading` (false). Le bouton affiche "ARTICLE AJOUTÉ".
5. Après 2 secondes, l'état revient à `isAdded` (false). Le bouton affiche "AJOUT PANIER".

## Triggers

- ajouter au panier react vérification quantité
- gestion état bouton chargement succès react