1

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)

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.