Página de MyOrders: lista de órdenes

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

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

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