Corrigiendo bugs de la aplicación

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

Andres Eduardo Maneiro Antunez

student•

Esto no lo han explicado mucho pero al useEffect se le puede enviar un return que sirve para limpiar los estados cuando el componente se desmonta por ejemplo cuando cambiamos de la ruta del Home a la ruta de MyOrders, se desmonta Home, para monta MyOrders

el useEffect tiene la siguiente estructura

useEffect(() => {
	//codigo que va a ejecutar
    first
  
//funcion que sirve para limpiar cuando el componente es desmontado
    return () => {
      second
    }
//las dependencias del useEffect
  }, [third])

en el caso de la clase y con el codigo de la profesora el useEffect seria

useEffect(() => {
    if (searchByTitle && searchByCategory) setFilteredItems(filterBy('BY_TITLE_AND_CATEGORY', items, searchByTitle, searchByCategory))
    if (searchByTitle && !searchByCategory) setFilteredItems(filterBy('BY_TITLE', items, searchByTitle, searchByCategory))
    if (!searchByTitle && searchByCategory) setFilteredItems(filterBy('BY_CATEGORY', items, searchByTitle, searchByCategory))
    if (!searchByTitle && !searchByCategory) setFilteredItems(filterBy(null, items, searchByTitle, searchByCategory))
    return () => {
      setSearchByTitle(null)
    }
  }, [items, searchByTitle, searchByCategory])

asi se aseguran que el input se limpie al cambiar de ruta, la profe solo lo uso al hace checkout, pero que pasa si entras directamente a myOrders o my account desde la navegacion, el input se mantendra, aunque eso pertenece a la logica de negocio, a lo mejor si se quiere que funcione asi el codigo, igual espero que les sirva este aporte

Daniel Alberto Cifuentes Castro

student•

Mi viejo, usted se merece una cerveza! Justo estaba buscando como hacer eso

david jurado

student•

Que buen aporte! eso es muy importante, siempre que se hace un fetch se debe de retornar para desmontar el componente, o al menos eso vi yo por ahí. aquí dejo mi aporte por si le sirve de ayuda alguien, yo lo hice con next, pero igual sirve sin next

Annderson Rey Sánchez

student•

En lo personal siento que se tomo el camino más largo para filtrar por categorías, esto se soluciona con rutas dinámicas

{ path: '/:category', element: <Home /> }

Capturamos el valor de la categoría de esta forma como lo hicimos para ver las órdenes.

const currentPath = window.location.pathname
  let index = currentPath.substring(currentPath.lastIndexOf('/') + 1);

if(index){
      return(
        filteredItems?.filter(item => item.category === index).map((item)=>(
          <Card key={item.id} {...item}/>))
      );
    }
    else {
      return(
        filteredItems?.map((item) => <Card key={item.id} {...item} />));
    }

Con esto es suficiente para hacer el filtro y adicional a ello si tenemos X cantidad de Categorías va seguir funcionando

Gianluca Enzo Procopio

student•

Es justo lo que yo hice, creé un custom hook:

import React, {useContext} from 'react';
import { Context } from '../../Context';
import Loader from '../Loader';
import Layout from '../Layout';
import Card from '../Card';

function UseCertainCategory({cat}) {
  const {products, loading} = useContext(Context)
  
      const category = products?.filter(product => product.category.name == cat);

  return (
    <Layout>
        {!loading && <Loader/>}
        <div className='grid place-content-center lg:grid-cols-4 gap-3 mt-5 w-full max-w-screen-lg md:grid-cols-3 sm:grid-cols-2 grid-cols-1'>

        {loading && category?.map(product=>(

            <Card key={product.id}
              name={product.title}
              category={product.category.name}
              img={product.images[0]}
              price={product.price}
              description={product.description}
              id={product.id}/>
            ))
              }
        </div>
    </Layout>
  )
}

export default UseCertainCategory;

Y en el archivo de app:

{
      path: "/clothes",
      element: <UseCertainCategory cat={"Clothes"} />
    },
    {
      path: "/electronics",
      element: <UseCertainCategory cat={"Electronics"} />
    },
    {
      path: "/furniture",
      element: <UseCertainCategory cat={"Furniture"} />
    },
    {
      path: "/shoes",
      element: <UseCertainCategory cat={"Shoes"} />
    },
    {
      path: "/others",
      element: <UseCertainCategory cat={"Others"} />
    }

Abraham Gonzalez

student•

Concuerdo contigo, es más sencillo el uso de rutas dinámicas

{ path: '/category/:category', element: <Home /> }

Tan solo agregaria que podemos usar el hook useParams() para capturar el valor del path. No hace falta el uso del window.location.pathname

Podemos usarlo de la siguiente forma

import { useParams } from "react-router-dom";

const {category} = useParams();

Incluso si deseas validar su existencia (que exista category) puedes hacer uso del useEffect

Hugo Roberto Gutiérrez Valentín

student•

Otro bug.

Filtrar por categorías tiene el mismo porblema del Filtrar por título,cuando has seleccionado una y quieres volver a All o todos,no se borra el valor setSearchBy Category.

Carlos Florez

student•

Así quedó mi mi versión del proyecto.

Xavier Flores

student•

me gusto el curso, el código aun tiene mucho por mejorar, pero ya es cuestión nuestra.

david jurado

student•

El único bug que sigo viendo es que si recargas la página en alguna ruta, puede ser, /clothes, /electronics, no va a tomar la categoria porque la categoria la toma con el onClick del nav, esa partecita me gustaria que ayudaran a resolverlaxd -Yo pensé en una solución que es que cuando se recargue la página siempre inicie en /, la raiz -otra creo que seria que category se guarde en el local storage, pero depronto da más problemas, si alguien sabe porfa ayudaxd

David Esteban Giraldo Duque

student•

Yo lo solucioné agregando la siguiente ruta:

{ path: "/:category", element: <Home /> }

Además, en el componente Home utilicé el hook useParams para obtener la categoría:

const {category} = useParams()

Gustavo Eduardo Navarro Rodríguez

student•

Efectivamente existe este bug, yo lo solucioné haciendo al ruta :category de forma dinámica y utilizando el hook useParams()

En las rutas:

{ path: '/:category', element: <Home /> },

En el Home

const { category } = useParams()

  useEffect(() => {
    if (category?.length > 0) context.setSearchByCategory(category.toLowerCase())
  }, [category])

De esta forma no tenemos que depender de ese onClick

david jurado

student•

una solución rapidita y sencilla es poner un value en donde está el input, en mi caso uso searchTerm, pero si ponemos en value como el ejemplo de la profe, searchByTitle, sirve de la misma manera. siempre nos saldrá el valor y podemos borrarlo.

Rubén Vega

student•

Puede parecer una tonteria pero, en pantallas mas pequeñas, el menu superior tiene posicion fixed y al hacer scroll no es legible y se entremezcla con los productos del e-commerce. Añadiendo un simple background white, queda perfecto. . Gracias por el curso, he aprendido mucho y refrescado conceptos

Cristian Acalo

student•

🦄✨Me gustó bastante como finalizó el proyecto. Con una api que tenga más datos como el número de productos disponibles, proveedor, etc, sería un gran proyecto para portafolio.

Martín Tamagno

student•

También podríamos agregar el reseteo del count, para que vacíe el carrito una vez que hacemos el checkout:

context.setCount(0)

Jesus David Bravo Vergara

student•

A alguien le pasa que no se muestran las imagenes de todos los productos?

Diego Matías Segovia

student•

Holaa, tengo una consulta. Arreglamos el bug de limpiar el valor del input desde el checkout, pero cuando vamos simplemente pasando por las categorías desde el home, al querer volver al listado de todos los productos sin filtrado, no funciona. Cómo se puede solucionar eso?

Gustavo Eduardo Navarro Rodríguez

student•

Tienes que mandar la función sin la categoria en el onClick, por ejemplo:

En el NavBar

         	<NavLink
            to=''
            onClick={() => context.setSearchByCategory()}
          >
            All
          </NavLink>

Henry Alejandro Taby Zenteno

student•

En MyOrder (index.jsx), me mostraba el siguiente error en el navegador:

Caused by: TypeError: can't access property "products", context.order[index] is undefinedimport { useContext } from 'react'import { Link } from 'react-router-dom'import { ShoppingCartContext } from '../../Context'import Layout from '../../Components/Layout'import OrderCard from '../../Components/OrderCard'import { ChevronLeftIcon } from '@heroicons/react/24/solid' function MyOrder() { const context = useContext(ShoppingCartContext) const currentPath = window.location.pathname let** index** = currentPath.substring(currentPath.lastIndexOf('/')** +** 1) // Validar si el índice es 'last' y calcular el índice correcto if(index === 'last') index = context.order?.length -1 const renderView = ()=>** {** index** = Number(index);** if** (isNaN(index)** ||** index** <** 0** ||** index** >= context.order?.length)** { return(** <p className='text-center text-red-500'>Order not found.</p>** )** } ** const order = context.order[index];** if** (!order?.products || order.products.length ===** 0)** { return (** <p className='text-center text-red-500'>No products in this order.</p>** )** } return ( context.order?.[index].products.map(product =>** (** <OrderCard key={*product.*id} id={*product.*id} title={*product.*title} imageUrl={product.image} price={product.price} /> )) ) ** } return ( <Layout> <div className='flex items-center justify-center w-120 relative mb-6'> <Link to='/my-orders' className='absolute left-0'> <ChevronLeftIcon className='h-6 w-6 text-blue-500 x-mark cursor-pointer' /> </Link> <h2>My Order</h2> </div> <div className='flex flex-col w-120'> {renderView()} </div> </Layout> )} export default MyOrder

Salia despues de hacer el Checkout, y mostraba la lista de productos comprados e inmediatamente se hacia click en cualquier categoria del Navbar.

Este es el código que me aumente y me funciono.

import { useContext } from 'react'
import { Link } from 'react-router-dom'
import { ShoppingCartContext } from '../../Context'
import Layout from '../../Components/Layout'
import OrderCard from '../../Components/OrderCard'
import { ChevronLeftIcon } from '@heroicons/react/24/solid'

function MyOrder() {
  const context = useContext(ShoppingCartContext)
  const currentPath = window.location.pathname
  let index = currentPath.substring(currentPath.lastIndexOf('/') + 1)
  
  // Validar si el índice es 'last' y calcular el índice correcto
  if(index === 'last') index = context.order?.length -1

  const renderView = ()=> {   
    index = Number(index);
    if (isNaN(index) || index < 0 || index >= context.order?.length) {
      return(
        <p className='text-center text-red-500'>Order not found.</p>
      )
    }

    const order = context.order[index];
    if (!order?.products || order.products.length === 0) {
      return (
        <p className='text-center text-red-500'>No products in this order.</p>
      )
    }

    return (
      context.order?.[index].products.map(product => (
        <OrderCard
          key={product.id}
          id={product.id}
          title={product.title}
          imageUrl={product.image}
          price={product.price}
        />
      ))
    )

  }

  return (
    <Layout>
      <div className='flex items-center justify-center w-120 relative mb-6'>
        <Link to='/my-orders' className='absolute left-0'>
        <ChevronLeftIcon className='h-6 w-6 text-blue-500 x-mark cursor-pointer' />
        </Link>
        <h2>My Order</h2>
      </div>

      <div className='flex flex-col w-120'>
        {renderView()}
      </div>
    </Layout>
  )
}

export default MyOrder

Jorge Gaitan

student•

Yo dejo por aquí lo que hice.

En el home hice:

useEffect(() => {      
  context.setSearchByCategory(category?.length > 0 ? category.toLowerCase() : "all")
}, [category])
```Y en el contexto hice:

```js
const filteredItemsByCategory = (items, searchByCategory) => {

        if(searchByCategory === "all"){
            return items;
        }
        
        return items.filter(item => item.category?.name?.toLowerCase().includes(searchByCategory.toLowerCase()))
    }

    useEffect(() => {

        let _items = items;

        if(searchByCategory)
            _items = filteredItemsByCategory(_items, searchByCategory)

        if(searchByTitle)
            _items = filteredItemsByTitle(_items, searchByTitle)

        setFilteredItems(_items)

    }, [items, searchByTitle, searchByCategory])
```Saludos.

Martin Mendez

student•

Hola faltó meterle un blocker al boton de Checkout del Side menu. siempre está creando una nueva orden aunque no tenga productos adentro.const renderCheckoutButton = () => { if(context.cartProducts.length > 0) { return ( <Link to='/orders/last'> <button className="w-full bg-gray-900 py-3 text-violet-300 rounded-lg" onClick={() => handleCheckout()}> Checkout </button> </Link> ) } else { return ( <button className="w-full bg-gray-400 py-3 text-violet-200 rounded-lg"> Checkout </button> ) } }

Le mandé un render() y quedó algo asi ..

const renderCheckoutButton = () => {
    if(context.cartProducts.length > 0) {
      return (
        <Link to='/orders/last'>
          <button className="w-full bg-gray-900 py-3 text-violet-300 rounded-lg" onClick={() => handleCheckout()}>
            Checkout
          </button>
        </Link>
      )
    } else {
      return (
        <button className="w-full bg-gray-400 py-3 text-violet-200 rounded-lg">
        Checkout
      </button>
      )
    }
  }

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 😊.

Kengya Moncada

student•

me ha costado el ruteo

Gustavo Eduardo Navarro Rodríguez

student•

Para hacer la ruta de forma dinamica podemos usar el hook useParams, de la siguiente forma:

En las rutas:

{ path: '/:category', element: <Home /> },

En el Home

const { category } = useParams()

  useEffect(() => {
    if (category?.length > 0) context.setSearchByCategory(category.toLowerCase())
  }, [category])

De esta forma no tenemos que depender de ese onClick y tenemos acceso a las categorias por medio de la url

Willie David Roa Hidalgo

student•

Aun no resuelvo eso 😭 y lo he intentado de muchas maneras, hasta con chatGPT y todo. 😭 ¿Me muestras tu código de ese archivo? 😥

Invitado Certificado

student•

No se si esta bien hacerlo asi, pero yo me ahorre bastante codigo y siendo que queda menos confuso y automatizado quizas. Les dejo mi codigo para ver que puedo mejorar.

function Home() {
    const { items, searchByTitle, setSearchByTitle, filteredItems } = useContext(ShoppingCartContext)
    // If you want to insert a category, do it in pathAndCategory with its respective path. Category filtering does not have a state; it filters using the existing items using the values inserted in pathAndCategory.

    const pathAndCategories = {
        "/clothes": "clothing",
        "/electronics": "electronics",
        "/jewelerys": "jewelery"
    }
    const renderSearch = (items) => {
        if (items?.length > 0) {
            return (
                items?.map((item) => (
                    <Card key={item.id} data={item} />
                ))
            )
        }
        else {
            return (
                <div className=" ">No products found matching your search. Please try again with different terms.</div>
            )
        }

    }

    const renderView = (categories) => {
        const areInHome = window.location.pathname === "/"
        const existSearch = searchByTitle?.length > 0;
        //In Home
        if (areInHome) {

            if (existSearch) {
                return (
                    renderSearch(filteredItems)
                )

            }
            return (
                items?.map((item) => (
                    <Card key={item.id} data={item} />
                ))
            )

        }
        //In Categories


        if (!areInHome) {
            //Utils 
            let categoryOfThePath = categories[window.location.pathname];
            let itemsFilterByPath = items?.filter(item => item.category.includes(categoryOfThePath));

            if (searchByTitle?.length === 0) {

                return (
                    itemsFilterByPath?.map((item) => (

                        <Card key={item.id} data={item} />
                    ))
                )
            }
            if (existSearch) {
                return (
                    renderSearch(filteredItems?.filter(item => item.category.includes(categoryOfThePath)))
                )
                //Only returns items that meet the corresponding category.

            }
        }
    }

Milton Estrada

student•

Para tener las categorias de manera dinamica ya que pueden cambiar en el futuro opte por useEffect(() => { fetch("https://api.escuelajs.co/api/v1/products") .then((response) => response.json()) .then((data) => { const categorias = [...new Set(data.map((item) => item.category.name))]; setItemsCategorys(categorias); return setItems(data); }); }, []);

  useEffect(() => {
    fetch("https://api.escuelajs.co/api/v1/products")
      .then((response) => response.json())
      .then((data) => {
        const categorias = [...new Set(data.map((item) => item.category.name))];
        setItemsCategorys(categorias);
        return setItems(data);
      });
  }, []);
```y ya salo tengo que llamar las categorías en el navbar

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?