Página de MyOrders: lista de órdenes

Curso de React.js con Vite.js y TailwindCSS

Contenido del curso

Introducción

1
Construye un ecommerce completo con React
04:59 min

Enrutamiento y estructura base

Manejo de estado global con Context

Carrito de Compras

Checkout y Órdenes de Compra

Filtrando productos desde el frontend

Próximos pasos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0018:13

Página de MyOrders: lista de órdenes

Curso de React.js con Vite.js y TailwindCSS

Clase 23 de 31

Clase 23 / 31

Recursos

¿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:

// 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:

// 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

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!

Kevin Daniel Hincapie Lumbaque

Hace 3 años

Tuve problemas en mi codigo (por hacer las cosas diferente) y termine usando las rutas para acceder a cada orden (les di un id a cada orden), lo hice de esta manera:

En mi path, inclui ":orderId" como Url Param en el path de my_order para poder acceder a los datos especificos de cada orden sin tener que pasar objetos o acceder al contexto.

const AppRoutes = () => {
  const routes = useRoutes([
    { path: '/', element: <Home /> },
    { path: '/my_order/:orderId', element: <MyOrder /> },
    { path: '/my_orders', element: <MyOrders /> },
    { path: '/sign_in', element: <SignIn /> },
    { path: '/my_account', element: <MyAccount /> },
    { path: '/*', element: <NotFound /> },
  ]);
  return routes;
};

Luego use "useParams" de la libreria de react router para leer el id que estaba en los parametros.

function MyOrder() {
  const { orderId } = useParams();
  const { myOrders } = useContext(ShoppingContext);
  const myOrder = myOrders.find((x) => x.id === orderId);

	...resto de codigo...
}

Cada card de cada orden renderizada en la pagina my orders tenia el id de la orden asi que solo debia pasar ese id cuando queria redirigir a my_order/{id de la orden}

	export default function OrderCard({ id }: OrderCardProps) {
  const { myOrders } = useContext(ShoppingContext);
  const myOrder = myOrders.find((items) => items.id === id);

  if (myOrder) {
    const dateString = myOrder.date.toLocaleDateString();

    return (
      <div className="flex items-center">
     ...
        <NavLink to={`/my_order/${id}`}>
          <ChevronRightIcon className="w-6 h-7" />
        </NavLink>
      </div>
    );
  }
}

Comentarios (12)12 comentarios

Angie Tatiana Rodríguez Gallego

Para tener la fecha en la cual se realizó la orden, hice algunos cambios en la función de handleCheckout de CheckoutSideMenu:

... 
const handleCheckout = () => {
        const date = new Date();

        const orderToAdd = {
            date: date.toLocaleDateString(),
            products: context.productsInCart,
            totalProducts: context.productsInCart.length,
            totalPrice: totalPrice(context.productsInCart)
...
        }

Ahora la fecha se pasará como date por medio de Props, desde la Page de MyOrders a cada componente de tipo OrdersCard

Bryan Enrique Garay Benavidez

Ahí resulta práctico crear un archivo en Utils para tener disponible siempre la función de obtener la fecha, así quedó la mía, luego se usa igual que la suma, solo que no recibe parámetros:

/**
 * This function obtains current DateTime
 * @returns {number} Date Time
 */

export const dateTime = () => {
    var today = new Date();
    var date = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+today.getDate();
    var time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
    var dateTime = date+' '+time;
        
    return dateTime;
}

Christian Marin

Me gusta como va el curso pero usar el Index de un array como key no es para nada recomendado. React.js no lo recomienda en su sintaxis ya que podría interferir con el render de React y tener comportamientos inesperados.

Hasta donde he investigado podría determinarse como mala practica.

Si hay algo que se pueda añadir a raíz de esta sintaxis y se pueda usar el índex en ciertos casos, por favor, déjame saberlo.

Adrian Perez

Puedes usar perfectamente el index del array solo si sabes que ese array nunca cambiará, osea no se eliminará ni se ordenará ningún elemento del array, en el caso del curso es mucho mejor utilizar la id que te proporciona la api, si no la id que te proporciona una base de datos en un proyecto real.

Rubén Ernesto Aragón Gil

Le pido perdón a todos los profes y equipo de Platzi, por no asistir al evento presencial como virtual.

Hay una razón, tengo mucho por hacer. Mucho por aprender.

Espero anden disfrutando los demás.

Jesus Nicolas Vite

Yo estuve allí, estuvo padrisimo ✨

Eduardo Lemus Zavala

El nombre de las rutas me confunde muchísimo :(, además pienso que se puede crear un componente donde importemos el icono, recibamos la función que necesita como propiedad, crear ahí mismo todos los estilos y podríamos simplemente importarlo en donde sea necesario, y nos evitamos la necesidad de estar copiando y pegando el código, y creo que así sería mas legible nuestro código. También es posible visualizar las OrdersCard cambiando las {} por () en la función map

Lucia Garcia

Para obtener la fecha de compra agregue un nuevo módulo en Utils que toma la fecha actual y le da él un formato de fecha y hora

/**
 * This function obtains the current DateTime in the format 'DD-MM-YYYY HH:mm:ss'
 * @returns {string} Current DateTime in 'YYYY-MM-DD HH:mm:ss' format
 */

export const dateTime = () => {
    const today = new Date();
    const year = today.getFullYear();
    const month = (today.getMonth() + 1).toString().padStart(2, '0');
    const day = today.getDate().toString().padStart(2, '0');
    const hours = today.getHours().toString().padStart(2, '0');
    const minutes = today.getMinutes().toString().padStart(2, '0');
    const seconds = today.getSeconds().toString().padStart(2, '0');

    const dateTime = `${day}-${month}-${year} ${hours}:${minutes}:${seconds}`;

    return dateTime;
};

El contexto de MyOrders

import { createContext, useState } from "react";
import { dateTime } from "../../Utils/dateTime";
export const OrdersContext = createContext()
export const OrdersProvider = ({ children }) => {

    const [orders, setOrder] = useState([])
    const addOrders = (product, totalPrice) => {
        setOrder(prevState => ([
            {
                products: { ...product, },
                dateTime: dateTime(),
                totalPrice: totalPrice
            },
            ...prevState
        ]
        ))
    }

    const removeOrders = (product) => {
        setOrder(prevState => prevState.filter(item => item.id !== product.id))
    }

    return (
        <OrdersContext.Provider value={{
            orders,
            addOrders,
            removeOrders
        }} >
            {children}
        </OrdersContext.Provider >)
}

Leopoldo Martinez

Asi use una function en utils para el tema del Date*/** * @param {Date} date * @returns {String} Formatted date */*const formatDate = (date) => { date = new Date(date) const [day, month, year, hour, minutes] = [ date.getDate(), date.getMonth() + 1, date.getFullYear(), date.getHours(), date.getMinutes(), ] return ${day}/${month}/${year} ${hour}:${minutes}}

/**
 * @param {Date} date
 * @returns {String} Formatted date
 */
const formatDate = (date) => {
  date = new Date(date)
  const [day, month, year, hour, minutes] = [
    date.getDate(),
    date.getMonth() + 1,
    date.getFullYear(),
    date.getHours(),
    date.getMinutes(),
  ]

  return `${day}/${month}/${year} ${hour}:${minutes}`
}

Carlos Mina

como puedo resolver el problema de CORS

Luis Emilio Correa Díaz

No anda la Api store de platzi :(

José Nicolás Aristizabal Ramírez

Por qué la profe no usa el navBar para navegar entre las paginas ?

No creo que no lo use porque no quiera, cada programador/a tiene su manera de ir navegando dentro de su app. Yo también soy de los que navega usando el link en vez de el navbar.

También tener en cuenta que puede estar acostumbrada a trabajar con aplicaciones que ya tienen persistencia de datos.

Enrique Aguilera

Yo creé un hook para poder obtener la orden a partir de la url:

export const  useCurrentOrderFromUrl = () => {
  const context = useContext(ShoppingCartContext);
  const { pathname } = useLocation();
  const { id } = useParams();

  const orderId = pathname === '/my-orders/last' ? context.order[context.order.length - 1]?.id : parseInt(id);
  
  return context.order.find((order) => order.id === orderId);
};

```y lo utilizo en el componente de esta forma:
```jsx
import { Link } from 'react-router-dom';
import { ChevronLeftIcon } from '@heroicons/react/24/solid';
import Layout from '../../Components/Layout';
import OrderCard from '../../Components/OrderCard';
import { useCurrentOrderFromUrl } from '../../Utils';

function MyOrder() {
  return (
    <Layout>
      <div className='flex items-center justify-center relative w-80 mb-6'>
        <Link to='/my-orders' className='absolute left-0'>
          <ChevronLeftIcon className='h-6 w-6 text-black cursor-pointer' />
        </Link>
        <h2>My Order</h2>
      </div>
      <div className="flex flex-col w-80">
        {
          useCurrentOrderFromUrl()?.products?.map(product => (
            <OrderCard
              key={product.id}
              title={product.title}
              price={product.price}
              imageUrl={product.images?.[0]}
              id={product.id}
            />
          ))
        }
      </div>
    </Layout>
  );
}

Alejandro Garcia

Alguien pudo solucionar ese error

Vladimir Farrera Vera

cual es el error que te muestra primero la console?

Introducción

Construye un ecommerce completo con React

Enrutamiento y estructura base

Instalación de Vite y Tailwind en React

Análisis de rutas y componentes en React

Rutas en React con React Router Dom

Componente Navbar

Componente Layout para todas las vistas

Componente de Card

Consumiendo la FakeStore API para pintar cards

Manejo de estado global con Context

Estado global con Context en React

Contador de productos en el carrito

Cómo crear un side menu con React y CSS

Heroicons en React: íconos sin emojis

Abrir y cerrar el Product Detail con Context

Mostrar info de producto al hacer clic

Carrito de Compras

Agregando productos al carrito

Checkout Side Menu con Context API

Construye el componente OrderCard en React

Evitando productos duplicados en el carrito

Eliminar productos del carrito con filter

Suma total de productos en el carrito

Checkout y Órdenes de Compra

Flujo para crear una nueva orden

Visualizar la última orden en My Order

Página de MyOrders: lista de órdenes

Rutas dinámicas con index en React

Estiliza la OrdersCard con Tailwind CSS

Filtrando productos desde el frontend

Buscador de productos con useContext

Filtrado de productos por título en React

Filtrado de productos por categoría en React

Bugs finales en e-commerce React

Próximos pasos

Deploy de e-commerce con Netlify y GitHub

Qué sigue después de tu e-commerce en React

Página de MyOrders: lista de órdenes