Corrigiendo bugs de la aplicación

Clase 29 de 31 • Curso de React.js con Vite.js y TailwindCSS

Resumen

Descubriendo ajustes finales en el desarrollo de aplicaciones web

En la fase final de desarrollo de una aplicación, se hace esencial depurar y perfeccionar los detalles para asegurar una experiencia de usuario impecable. En esta ocasión, exploraremos diversas estrategias que podemos emplear para optimizar una aplicación web, en particular la corrección de filtros y la mejora en la gestión de los estados de entrada.

¿Cómo resolver inconvenientes con los filtros en una aplicación?

A menudo, al interactuar con filtros, como la selección de categorías, nos enfrentamos a problemas. Por ejemplo, se espera que al seleccionar "Clouds" se muestren solamente ítems de esa categoría, pero si no ocurre, es vital investigar la causa. Puede ser necesario examinar el código de la página "Home" y cualquier lógica anterior que afecte la visualización de resultados filtrados.

¿Cómo mejorar la lógica de filtrado?

Modificar la lógica de filtrado es una solución eficaz. Esto podría implicar eliminar condicionales que limitan la visualización a búsquedas por título y permitir que solo se muestren los ítems filtrados. Simplificando el código, reducimos la complejidad y optimizamos la funcionalidad global de la aplicación.

¿Cómo interactuar y depurar la aplicación durante el desarrollo?

La interacción continua con la aplicación es crucial. Añadir elementos al carrito de compras y verificar la correcta visualización de pedidos, por ejemplo, son pasos que nos permiten evaluar la lógica y fluidez de la aplicación. Al encontrar inconsistencias, como la incorrecta visualización de la cantidad de productos, es prudente usar herramientas como console.log para diagnosticar el problema.

¿Qué hacer para limpiar estados persistentes?

Los estados persistentes, como valores de búsqueda que no se borran después de ciertas acciones, pueden afectar la funcionalidad. La clave para resolver esto es asegurar que los campos de entrada se restablezcan a su valor por defecto, como null, después de realizar ciertas acciones, como el checkout.

¿Por qué es importante prestar atención al carrito de compras?

El carrito de compras es un componente esencial en una aplicación de comercio electrónico. Ajustar detalles como la actualización del contador de productos es fundamental. Se debe asegurar que el contador refleje de manera precisa el contenido del carrito en todo momento, enlazando su valor al tamaño del arreglo que contiene los productos, en lugar de a un contador estático.

Al final del desarrollo, es satisfactorio observar que la aplicación funciona según lo esperado. Si has llegado hasta aquí en el desarrollo de tu propio e-commerce, recuerda que ajustar y depurar son procesos que mejoran notablemente la calidad de tu trabajo. Y si estás planeando seguir enriqueciendo tu aplicación, siempre hay más por aprender y nuevas funcionalidades por implementar. ¡Anímate a compartir tus avances y seguir innovando en tus proyectos!

Humberto Cruz

student•

hola, en mi caso solucione dos cosas.

Para evitar que filtrado por titulo se realizara en las rutas en donde no debía lo que hice fue setearlo (o actualizarlo) en null cada vez que la ruta cambie, esto lo hice añadiendo en el Home una constante location = useLocation(); que captura la ruta en la cual nos encontramos, y después añadí un useEffect(() => context.searchByTitle(null), [location]); .
para lograr que el filtrado por categoría se hiciera incluso cuando no se le da click a las opciones en el navbar (es decir, que se hiciera también cuando se recarga la pagina o cuando se escribe directamente la ruta desde la barra de navegación), lo que hice fue cambier en el componente AppRoutes las rutas de las clases anteriores por {path: /home/categoryProduct, element: <home />} y en Home agregar const { categoryProduct } = useParams(); edemas de un useEffect que cambie cada vez que cambie categoryProduct de la siguiente manera: ~~~ useEffect(() => { if (categoryProduct?.length > 0) { context.setCurrentCategory(categoryProduct.toLocaleLowerCase()); } }, [categoryProduct]); ~~~

acá dejo el código de los componentes de Home y App con los cambios que hice.

Home:

import { useContext, useEffect } from "react";

import { useLocation, useParams } from "react-router-dom";
import { ShoppingCartContext } from "../../context";
import Layout from "../../components/Layuot";
import Card from "../../components/Card";
import ProductDetail from "../../components/ProductDetail";
import CheckoutSideMenu from "../../components/CheckoutSideMenu";
import { FaceFrownIcon } from "@heroicons/react/24/outline";

function Home() {
  const location = useLocation();
  const context = useContext(ShoppingCartContext);
  const { categoryProduct } = useParams();
  const renderView = () => {
    const itemsToRender =
      context.searchByTitle?.length > 0 || context.currentCategory?.length > 0
        ? context.filteredItems
        : context.items;
    if (itemsToRender?.length > 0) {
      return itemsToRender.map((item) => <Card key={item.id} data={item} />);
    } else {
      return (
        <div className="m-10 p-4 h-44 col-span-5 flex flex-col items-center justify-center bg-amber-50 rounded-lg">
          <FaceFrownIcon className="m-2 size-20" />
          <h3>{"Sorry, we can't find your product"}</h3>
        </div>
      );
    }
  };

  useEffect(() => {
    if (categoryProduct?.length > 0) {
      context.setCurrentCategory(categoryProduct.toLocaleLowerCase());
    }
  }, [categoryProduct]);
  useEffect(() => {
    context.setSearchByTitle(null);
  }, [location]);

  return (
    <Layout>
      <div className="m-2 p-1 ">
        <h1 className="text-center text-lg font-medium">Our Products</h2>
        <input
          type="text"
          placeholder="find your products"
          className="mb-2 p-2 w-72 text-center text-sm border border-black rounded-lg focus:outline-none focus:shadow-lg"
          onChange={(e) => context.setSearchByTitle(e.target.value)}
        />
      </div>
      <div className="grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 xl:max-w-screen-xl justify-items-center w-full max-w-screen-lg">
        {renderView()}
      </div>
      <ProductDetail />
      <CheckoutSideMenu />
    </Layout>
  );
}

export default Home;

App:

import { useRoutes, BrowserRouter } from "react-router-dom";
import { ShoppingCartProvider } from "../../context";

import Home from "../Home";
import MyAccount from "../Myaccount";
import MyOrder from "../MyOrder";
import MyOrders from "../MyOrders";
import NotFound from "../NotFound";
import SignIn from "../SignIn";
import Navbar from "../../components/Navbar";

import "./App.css";

const AppRoutes = () => {
  let routes = useRoutes([
    {
      path: "/",
      element: <Home />,
    },
    {
      path: "/home/:categoryProduct",
      element: <Home />,
    },
    {
      path: "/my-account",
      element: <MyAccount />,
    },
    {
      path: "/my-order",
      element: <MyOrder />,
    },
    {
      path: "/my-orders",
      element: <MyOrders />,
    },

    {
      path: "/my-orders/last",
      element: <MyOrder />,
    },

    {
      path: "/my-orders/:id",
      element: <MyOrder />,
    },
    {
      path: "/sign-in",
      element: <SignIn />,
    },
    {
      path: "/*",
      element: <NotFound />,
    },
  ]);
  return routes;
};

function App() {
  return (
    <ShoppingCartProvider>
      <BrowserRouter>
        <AppRoutes />
        <Navbar />
      </BrowserRouter>
    </ShoppingCartProvider>
  );
}

export default App;
```Espero que mi aporte les sirva 😊.

Andres Eduardo Maneiro Antunez

Daniel Alberto Cifuentes Castro

david jurado

Annderson Rey Sánchez

Gianluca Enzo Procopio

Abraham Gonzalez

Hugo Roberto Gutiérrez Valentín

Carlos Florez

Xavier Flores

David Esteban Giraldo Duque

Gustavo Eduardo Navarro Rodríguez

Rubén Vega

Cristian Acalo

Martín Tamagno

Jesus David Bravo Vergara

Diego Matías Segovia

Henry Alejandro Taby Zenteno

Jorge Gaitan

Martin Mendez

Kengya Moncada

Willie David Roa Hidalgo

Invitado Certificado

Milton Estrada

Corrigiendo bugs de la aplicación

Introducción

Construye una tienda online con React

Enrutamiento y estructura base

Instalación de React con Vite y TailwindCSS

Análisis de rutas y componentes en React

Enrutamiento con React Router DOM

Componente Navbar

Componente de Layout

Componente de Card

Consumiendo la FakeStore API para pintar cards

Manejo de estado global con Context

Contexto global de la aplicación

Contador de productos en el carrito

Abriendo el detalle de cada producto

Reto: heroicons con TailwindCSS

Maquetando el ProductDetail

Mostrando productos en ProductDetail

Carrito de Compras

Agregando productos al carrito

SideMenu del carrito de compras

Componente OrderCard

Evitando productos duplicados en el carrito

Eliminar productos del carrito

Suma total de productos en el carrito

Checkout y Órdenes de Compra

Flujo para crear una nueva orden

Checkout de productos en el carrito

Página de MyOrders: lista de órdenes

Página de MyOrder: órden individual

Reto: órdenes de compra con TailwindCSS

Filtrando productos desde el frontend

Buscador de productos

Filtrando títulos con JavaScript

Filtrando categorías con JavaScript

Corrigiendo bugs de la aplicación

Próximos pasos

Deploy de React en Netlify

¿Preparada o preparado para un Laboratorio de React?