Checkout de productos en el carrito

Otra opción para quitar la x de mi ultima orden es

            <div className="flex items-center gap-2">
                <p className="text-lg font.medium">{price} </p>

                {
                    handleDelete &&                 
                    <XMarkIcon
                    onClick={()=>handleDelete(id)}
                    className="h-4 w-4 text-black cursor-pointer "/>
                }

            </div>

Creo que tambien deberiamos cerrar la ventana de checkout cuando pasamos al link de myOrder, solo agregamos context.closeCheckoutSideMenu() en la funcion handleChekout.

    const handleCheckout = () => {
        const orderToAdd = {
            date: '01.02.23',
            products: context.cardProducts,
            totalProducts: context.cardProducts.length,
            totalPrice: totalPrice(context.cardProducts)
        }

        context.setOrder([...context.order, orderToAdd])
        context.setCardProducts([])
        context.setCount(0);
        context.closeCheckoutSideMenu()
    }

☹ odio cuando tengo el código bien y me salen errores, tardo minutos o hasta horas en dizque encontrar el error, y lo único que debo de hacer es reiniciar la página o el npm run dev.

En vez de utilizar slice podriamos utilizat .at(-1)
asi nos trae el ultimo elemento

Me estaba arrojando error en MyoRDER CON LA EXPRESIÓN:

context.order?.slice(-1)[0].products.map(product => ( ...)

Tuve que moodificar la expresión por:

{
        context.order && context.order.length > 0 ? 		 
  	context.order.slice(-1)[0].products.map(product => (
                    <OrderCard 
                    key={product.id}
                    id={product.id}
                    title ={product.title}
                    imageUrl = {product.images}
                    price= {product.price}
                    
                    />
                    
              ))
              : <p>No hay productos en la orden.</p>
            }

Acá explico que significa cada pieza de código:

1. context.order && context.order.length > 0: Esta parte es una comprobación condicional que verifica si “context.order” existe y si tiene al menos un elemento en su interior. Si ambas condiciones se cumplen, el código después del signo “?” será evaluado.

2. context.order.slice(-1)[0].products.map(…) : Si “context.order” existe y tiene al menos un elemento, se procede a realizar una operación en la propiedad “products” del último elemento de la matriz “context.order”. La función “slice(-1)” se utiliza para obtener el último elemento del array, y luego se accede a su propiedad “products” para realizar un mapeo de los elementos de esa propiedad.

3. map(product => …): Aquí, el código realiza un mapeo de cada elemento del array “products” del último elemento de “context.order”. Por cada elemento en “products”, se renderiza un componente “OrderCard” con las propiedades “id”, “title”, “imageUrl” y “price” obtenidas de cada elemento de “products”.

4. : <p>No hay productos en la orden.</p>: Si “context.order” no existe o no tiene elementos (length igual a 0), se renderiza el párrafo “<p>No hay productos en la orden.</p>” en lugar de la lista de “OrderCard”. Esto sirve para indicar al usuario que no hay productos en la orden o que la orden está vacía.

Puede ser así también para que se vea un poquito más limpio.

A la maestra no se le resaltan los errores de JS en VS Code, simplemente instalen la extensión de Error Lens y tendrán resaltado de errores antes de que los tengan que ver en el navegador 😄

Si les aparece un error por intentar encontrar una propiedad de “undefined”, recuerden que hacerle un map a un objeto undefined va a resultar en una excepción que no permite visualizar los demás componentes gráficos. Usen el ‘’?"’ para verificar si la variable u objeto existe primero.

Ej:

context.shoppingCartOrder?.slice(-1)[0]?.products.map( product =>
                        <OrderCard
                            key={product.id}
                            id={product.id}
                            title={product.title}
                            imgUrl={product.images}
                            price={product.price}
                        />

Así me quedó My order

Para los que tengan el problema de que no les muestra los productos en MyOrder, verifiquen que tengan bien definido el estado order. Que por default sea un array, mas no un objeto… Me llevó casi tres días darme cuenta, así que verifiquen su código cuantas veces sean necesarias.

//order está definido en la carpeta Context del proyecto

<const [order, setOrder] = useState([])> 

Si tienen este error:

Para solucionar el error debemos de envolver los componentes de React-Router-DOM (Link, NavLink…) o componentes que usan estos, dentro de BrowserRouter.

Esto nos permitira usar todos los componentes provenientes de React-Router-DOM de manera general en la aplicacion, en los componentes hijos de BrouserRouter en el componente App.

Para los que tengan problemas haciendo mostrar las órdenes en “MyOrder” con el método “slice”, otra alternativa es hacer:

order[order.length -1].products.map(productInfo => ...

La condición mostrada en el componente de myOrder que va en un if debe de ir dentro de un useEffect, dejando el if así es un evento no controlado, otra opción es dentro del HTML una condición con &&.

Otra opción pa renderizar la x icon es verificar si tenemos productos en nuestro estado productToCart, si no hay nada no muestra la x, recuerda que una vez nuestros productos se envian a my order, nuestro carrito se queda vacio entonces no deberia renderizar la x en nuestro componente:

const renderXmarkIcon = productToCart.length > 0 ? true : false

{
          renderXmarkIcon && <div 
          onClick={(e) => productRemoveFromCart(e, id)}
        >
        <XmarkIcon />
        </div>
        }

{title}

${price}

{handleDelete && renderXmarkIcon}

MyOrders\

MyOrders

Asi Vamos…

Otra forma de hacerlo es con el hook useNavigate!