Corrigiendo bugs de la aplicación

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

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

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.

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.

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

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

Casi muesro buscando el problema ya lo habia notado clases atras y lo estaba intentando solucionar, esta clase me ayudo mucho 😃

Una forma de evitar el error de que en el input se almacene el valor aunque no se colocaba/veía nada en el input es colocandole el atributo value así:

Los filtros lo hice de diferente manera, podrían analizar el codigo en: https://github.com/Eddy-Huaylla/platzi-curso-react-vite-tailwind-css/tree/a9d92bc2aa3dbfcafc2f729262119dcde9657662

Saludos.