¿Cómo se pueden visualizar todas las órdenes creadas en una aplicación de Shoppy?

La gestión y visualización de órdenes en una plataforma de compras es esencial para los usuarios finales y los desarrolladores. En esta lección, veremos cómo crear una función en Shoppy para visualizar las órdenes de manera efectiva, permitiendo a los usuarios revisar fechas, cantidades y precios.

¿Cómo crear y estructurar el componente Order en el proyecto?

Primero, necesitamos definir el componente que representará cada orden. Este componente se alojará en una carpeta que nombraremos OrdersCard y dentro de ella crearemos un archivo index.jsx. La estructura de este componente incluirá:

• Visualización de la fecha de creación de la orden.
• Cantidad total de productos en la orden.
• Precio total de los productos.
• Un ícono que indique navegación, permitiendo ver los detalles de cada orden.

Implementación del componente

Aquí proponemos una estructura de código para visualizar una orden:

fullscreen
// index.jsx del componente OrderCard
function OrdersCard({ totalPrice, totalProducts, date }) {
  return (
    <div className="order-card border-black">
      <span>{`Fecha: ${date}`}</span>
      <span>{`Total de Productos: ${totalProducts}`}</span>
      <span>{`Precio Total: ${totalPrice}`}</span>
    </div>
  );
}

export default OrdersCard;

¿Cómo integrar OrderCard en la página MyOrders?

Para mostrar todas las órdenes, utilizaremos el componente OrdersCard en la página MyOrders. La idea es que esta página tomará las órdenes desde un contexto global (en este caso, un contexto de carrito de compras) y las renderizará mediante un map.

Código para renderizar órdenes

Incluimos el contexto del carrito de compras y usamos un .map para mostrar cada orden:

fullscreen
// En la página MyOrders
import React, { useContext } from 'react';
import { ShoppingCartContext } from '../context/ShoppingCartContext';
import OrdersCard from '../components/OrderCard';

function MyOrders() {
  const { orders } = useContext(ShoppingCartContext);

  return (
    <div>
      {orders.map((order, index) => (
        <OrdersCard
          key={index}
          totalPrice={order.totalPrice}
          totalProducts={order.totalProducts}
          date={order.date}
        />
      ))}
    </div>
  );
}

export default MyOrders;

¿Cómo manejar la navegación en MyOrders?

Una parte fundamental para mejorar la experiencia del usuario es permitir la navegación hacia los detalles de cada orden al hacer clic sobre ella. Esto se logra encapsulando OrdersCard en un componente Link de React Router.

Incorporación de navegación en las órdenes

fullscreen
import { Link } from 'react-router-dom';

// Dentro de la función de renderizado
<Link to={`/myorders/${order.id}`} key={index}>
  <OrdersCard
    totalPrice={order.totalPrice}
    totalProducts={order.totalProducts}
    date={order.date}
  />
</Link>

¿Cómo personalizar el estilo y corregir errores visuales?

A veces, el problema está en los detalles visuales. Asegúrate de que el contenedor tiene un width adecuado para justificar los elementos correctamente y usar justify-center para centrar el texto interiormente.

Para aquellos casos en los que hay que volver a una página anterior, utiliza un icono (como chevron-left) adyacente al título de la página. Esto se puede realizar importando íconos de bibliotecas como Heroicons.

Motivación y persistencia

Es emocionante mostrar cómo un proyecto web puede traer mejoras en la experiencia de usuario diaria. La persistencia de datos es el próximo paso, crucial para mantener estados incluso después de recargas de página. Esta persistencia se puede abordar en módulos posteriores.

Te animamos a seguir experimentando y aprendiendo sobre cómo hacer los sistemas más eficientes y usuarios más satisfechos. La programación de interfaces no solo es un reto, es una oportunidad para crear algo impactante. ¡Sigue adelante y nos vemos en la próxima clase!