I recover articles in an object table, I create two buttons to add or remove the quantity of the article. In my cart page everything works, but in my page where I display my item list it does not work. I display the article list, then I retrieve the articles added to the basket to have the quantity, but when I add an article or remove it all the counts of all the articles change at the same time. I also cannot manage to deactivate a button that corresponds to the article if this one arrives at 0. Thank you in advance for your help and explanations. this is what my data looks like in my table:
const listPastry= [
{
allergenes: "Allergènes présents : GLUTEN, LAIT, OEUF, POISSON,
FRUITS A COQUE, SOJA, SULFITESPeut contenir des traces de :Arachides"
gammeProduit: "entremets"
id_patisserie: 190
nomProduit: "Passion-ananas - Entremets"
prix: "18.80"
}
]
reducer get article
const initialState = {
data:[],
message:"",
}
export default function GammePastry(state = initialState, action){
const {type, payload} = action;
switch (type) {
case ActionTypes.GET_ALL_GAMME_PASTRY:
return {state: payload}
case ActionTypes.ERROR_GET_GAMME_PASTRY:
return { message: payload }
default:
return state;
}
}
reducer add basket
export default function Basket(state = initialState, action) {
const { type, payload } = action;
switch (type) {
case ActionTypes.ADD_BASKET:
return {
...state,
quantityTotalBasket: state.quantityTotalBasket +1,
basket: [...state.basket, payload],
priceTotalArticle: parseFloat(payload.prix).toFixed(2) * payload.quantity,
totalPrice: parseFloat(state.totalPrice) + parseFloat(payload.prix)
}
case ActionTypes.ADD_QUANTITY:
return {
...state,
basket: state?.basket?.map((article) =>
article.id_patisserie === payload.id_patisserie
? {
...article,
quantity: article.quantity + 1,
priceTotalArticle: parseFloat(article.prix).toFixed(2) * article.quantity,
}
: article
),
quantityTotalBasket: parseInt(state.quantityTotalBasket +1),
totalPrice: parseFloat(state.totalPrice) + parseFloat(state.priceTotalArticle),
};
case ActionTypes.REMOVE_QUANTITY:
return {
...state,
basket: state?.basket?.map((article) =>
article.id_patisserie === payload.id_patisserie
? {
...article,
quantity: article.quantity - 1
}
: article
),
quantityTotalBasket: state.quantityTotalBasket -1,
totalPrice: parseFloat(state.totalPrice) - parseFloat(payload.prix),
};
case ActionTypes.CANCEL_COMMAND:
return { ...state, payload };
default:
return state;
}
}
component List pastry
const ListGammePastryComponent = () => {
const dispatch = useDispatch();
const getListPastry = useSelector(
(state) => state?.reducerGammePastry?.state
);
const basket = useSelector((state) => state?.reducerBasket);
const [quantityAddProduct, setQuantityAddProduct] = useState(0)
const item = basket?.basket;
useEffect(() => {}, [basket, item,quantityAddProduct]);
const AddQuantity = (product) => {
const productSelect = {
id_patisserie: product.id_patisserie,
gammeProduit: product.gammeProduit,
imageUrl: product.imageUrl,
nomProduit: product.nomProduit,
prix: product.prix,
ingredients: product.ingredients,
quantity: 1,
};
const ifItem = item?.find((t) => t.id_patisserie === product.id_patisserie);
if (ifItem) {
const infoProduct = {
id_patisserie: product.id_patisserie,
prix: product.prix,
quantity: 1,
};
dispatch(actionAddQuantity(infoProduct));
} else {
dispatch(actionAddBasket(productSelect));
}
};
return (
<div className="container_list_pastryGamme">
{getListPastry?.map((product) => {
console.log(product)
return (
<div className="list_pastryGamme" key={product?.id_patisserie}>
<div className="list_pastryGamme_image">
<img
className="pastryGamme_image"
crossorigin="anonymous"
src={product?.imageUrl}
alt="image pâtisserie"
/>
</div>
<div className="list_pastryGamme_data">
<div className="pastryGamme_data">
<h2 className="pastryGamme_data_name">{product?.nomProduit}</h2>
<div className="pastryGamme_data_element">
<p className="pastryGamme_data_text">Catégorie:</p>
<p className="pastryGamme_data_info">
{product?.gammeProduit}
</p>
</div>
<div className="pastryGamme_data_element">
<p>Ingrédients</p>
<p className="pastryGamme_data_info">
{product?.ingredients}
</p>
</div>
<div className="pastryGamme_data_element">
<p className="pastryGamme_data_info">{product?.prix} €</p>
<div className="pastryGamme_data_element-btn">
{
item.map((el)=>{
return(
<div>
<button
className="pastryGamme_data_btn"
disabled={el.quantity === 0 ? true : false}
onClick={() => dispatch(actionRemoveQuantity(product))}
>
-
</button>
{
el.quantity !== 0 && el.id_patisserie === product.id_patisserie ? <p>{el.quantity}</p>
: <p>{count}</p>
}
</div>
)
})
}
<button
className="pastryGamme_data_btn"
onClick={() => AddQuantity(product)}
>
+
</button>
</div>
</div>
</div>
</div>
</div>
);
})}
</div>
);
};