modify the quantity of a card react

Viewed 30

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>
  );
};
0 Answers
Related