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

install

source · Clone the upstream repo

git clone https://github.com/ECNU-ICALK/AutoSkill

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/ECNU-ICALK/AutoSkill "$T" && mkdir -p ~/.claude/skills && cp -r "$T/SkillBank/ConvSkill/english_gpt4_8_GLM4.7/gestion-d-état-de-panier-react-avec-vérification-de-quantité" ~/.claude/skills/ecnu-icalk-autoskill-gestion-d-etat-de-panier-react-avec-verification-de-quantit && rm -rf "$T"

manifest: SkillBank/ConvSkill/english_gpt4_8_GLM4.7/gestion-d-état-de-panier-react-avec-vérification-de-quantité/SKILL.md

source content

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

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

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

Initialisation : Au début du handler, appeler
```
setIsLoading(true)
```
.
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
```
  .
Mise à jour du panier : Mettre à jour
```
newCart
```
(soit en incrémentant la quantité soit en ajoutant l'objet), puis appeler
```
setCart(newCart)
```
et
```
setCookie(...)
```
.

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)

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

L'utilisateur clique sur "AJOUT PANIER".
L'état passe à
```
isLoading
```
(true).
Le système traite l'ajout (simulé par le délai).
L'état passe à
```
isAdded
```
(true) et
```
isLoading
```
(false). Le bouton affiche "ARTICLE AJOUTÉ".
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