1 en cartData se tienen los productos de un carrito de compras, es un array de ahi requiero solo quantity, _id y timestamp + la propiedad del id y se asigna al estado orderItems
2 En el useEffect si el estado orderItems existe, a la función orderProductList le envio esa lista de productos q esta en order items
3 En la constante setproductsToOrder recibo una promesa que al resolverla me regresa un objeto con unas propiedades
4 quiero asignar ese res que me trae la función a un estado que llamé newOrder, pero siempre me envia un objeto vació.
5 No si el problema es que está dentro de un async await,s ie s así como lo puedo corregir, gracias por la ayuda
import React, {useState, useEffect} from 'react';
import {connect} from 'react-redux';
import { menuOptions } from '../../redux/actions/checkOutActions';
import {orderInformation, orderProductList} from '../../utils/services/orderServices';
import { useToasts } from "react-toast-notifications";
import {allUserOrders} from '../../redux/actions/orderActions';
const Summarizing = ({menuOptions, userData, cartData, orderData, allUserOrders}) => {
const { addToast } = useToasts();
const [selectedOption, setSelectedOption] = useState({});
const [orderItems, setOrderItems] = useState({});
const [newOrder, setNewOrder] = useState({});
const handleClick = (e) => {
e.preventDefault();
setSelectedOption({
finishShopping: false,
myOrders: true
})
}
const orderProducts = (cartData) => {
const singleItem = cartData.map((item)=>{
return {
quantity: item.quantity,
_id: item.id,
timestamp: item.timestamp
}
})
setOrderItems({
products: singleItem,
storeId: "1234"
});
}
//informacion del usuario que crea la orden
useState(()=>{
orderInformation(orderData)
},[orderData])
useEffect(()=>{
if(Object.entries(orderItems).length > 0){
const setproductsToOrder = orderProductList(orderItems);
const orderStatus = async () => {
const res = await setproductsToOrder;
if(res.status === 200){
setNewOrder(res) // ======> Error al enviar No envia nada
addToast("Se ha creado una nueva orden", {
appearance: "success",
autoDismiss: true
})
}else{
addToast("No se ha podido crear la orden", {
appearance: "error",
autoDismiss: true
})
}
}
orderStatus();
}
},[addToast, orderItems])
useEffect(()=>{
menuOptions(selectedOption)
},[selectedOption, menuOptions])
const orderPrice = cartData.reduce((acc, item)=>{
return acc = acc + item.price*item.quantity
},0)
return (
<div className="summarizing shadow-sm p-4 col-12 d-flex flex-wrap justify-content-between mb-5">
<div className="col-12 col-lg-6 p-4 p-3 mb-3 mb-lg-0 summarizinInfo">
<div className="d-flex flex-wrap justify-content-between align-items-center mb-3">
<h5 className="font-weight-bold">Información general</h5>
</div>
<p>{userData.firstName} {userData.lastName}</p>
<p>{userData.email}</p>
<p className="d-flex align-items-center m-0">
<h5 className="font-weight-bold m-0 pr-2">Dirección de envío: </h5>
{orderData.address}
</p>
</div>
<div className="col-12 col-lg-6 pr-0 pl-0 pl-lg-4">
<div className="col-12 p-4 mb-3 summarizinInfo">
<h5 className="font-weight-bold">Método de pago</h5>
<p>Efectivo</p>
</div>
<div className="col-12 p-4 summarizinInfo shadow-sm">
<h5 className="font-weight-bold">Valor a pagar</h5>
<div className="d-flex align-items-center justify-content-between">
<p className="m-0">Subtotal</p>
<p className="m-0">{ orderPrice && orderPrice}</p>
</div>
<div className="d-flex align-items-center justify-content-between">
<p className="m-0">Impuestos</p>
<p className="m-0">0</p>
</div>
<hr/>
<div className="d-flex align-items-center justify-content-between">
<p className="m-0 font-weight-bold">Total</p>
<p className="m-0">{ orderPrice && orderPrice}</p>
</div>
</div>
</div>
<div className="d-flex justify-content-end col-12 p-0 mt-3">
{/* onClick={handleClick} */}
<button
onClick={(e)=>{
handleClick(e);
orderProducts(cartData)
}}
className="border-0 ">
FINALIZAR COMPRA
</button>
</div>
</div>
)
}
const mapStateToProps = (state) => {
console.log("STATE CART DATA DESDE SUMARIZING ", state);
return {
userData: state.userData.user,
cartData: state.cartData,
orderData: state.orderData
}
}
const mapDispatchToProps = (dispatch) => {
return {
menuOptions: (selectedOption)=> {
dispatch(menuOptions(selectedOption))
},
allUserOrders: (userOrders)=> {
dispatch(allUserOrders(userOrders))
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Summarizing)