Gestion D éTat De Panier React Avec VéRification De Quantité

What the source does

• FilesystemNone observedNo reads or writes in the source
• NetworkNone observedNo outbound calls in the source
• ShellNone observedNo commands run in the source
• DependenciesPinnedNothing floats
• SecretsNone foundNo keys in source

Five audit layers

Gates applied: no behavioural pass.

Audit 0.4.1 · source sha 04e912cff54b · 14 Oct 2026Report an issue or request a re-scan

• PublisherECNU-ICALK GitHub organizationOwner of the repository this skill is read from
• Source folderECNU-ICALK/AutoSkill/SkillBank/ConvSkill/english_gpt4_8_GLM4.7/gestion-d-état-de-panier-react-avec-vérification-de-quantitéThe exact folder we audited
• LicenceNot declaredAs the repository states it
• Commit pinned for this verdict04e912cff54bA new audit runs when the source changes
• Repository statusNot archivedLast push 157 days ago
• Sandboxed runNot runSkills are read, not executed; layer L4 is skipped

Its 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.

---
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

Excerpt, first 3,835 characters of SKILL.md, verbatim from the audited commit. It is text from someone else’s repository, quoted so you can judge it before your agent reads it.

git clone https://github.com/ECNU-ICALK/AutoSkill
git -C AutoSkill checkout 04e912cff54b

Works in

1. 2026-10-14
   ✓SAFE B 89 / 100

   first audit · source 04e912cff54b

Questions about Gestion D éTat De Panier React Avec VéRification De Quantité

• github.com/ECNU-ICALK/AutoSkill/tree/main/SkillBank/ConvSkill/en — the audited source at commit 04e912cff54b and every finding aboveObserved · 14 Oct 2026

Spotted something wrong? Report a correction · Methodology