No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Aprende Inglés, Programación, AI, Ciberseguridad y más a precio especial.

Antes: $249

Currency
$209
Suscríbete

Termina en:

1 Días
10 Hrs
44 Min
18 Seg

Página de MyOrders: lista de órdenes

23/31
Recursos

Aportes 8

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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

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.

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.

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

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}`} ```js /** * @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}` } ```

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 >)
}
Yo creé un hook para poder obtener la orden a partir de la url: ```js 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>
<Link to='/my-orders' className='absolute left-0'> <ChevronLeftIcon className='h-6 w-6 text-black cursor-pointer' /> </Link>

My Order

{ useCurrentOrderFromUrl()?.products?.map(product => ( <OrderCard key={product.id} title={product.title} price={product.price} imageUrl={product.images?.[0]} id={product.id} /> )) }
</Layout> ); } ```

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>
    );
  }
}