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

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

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.

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

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.

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

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

Yo le adicione algo mas a mi aplicación

No sé si se dieron cuenta pero al inicio por unos milisegundos mientras se recarga la página aparece el mensaje de Not Found o No se encontraron productos (como le hayan puesto), para quitar ese mensaje cree un estado en el Context de carga como te muestro a continuacion

  // Initial page load
  const [isLoading, setIsLoading] = useState(true);

Luego de esto en el fetch setie (actualicé) mi estado de la siguiente manera

 useEffect(() => {
    setIsLoading(true); //start charging
    fetch("https://fakestoreapi.com/products")
      .then((response) => response.json())
      .then((data) => {
        setItems(data);
        setIsLoading(false); // charging ends
      })
      .catch((error) => {
        console.error("Error fetching data: ", error);
        setIsLoading(false);
      });
  }, []);

Le envie estado de isLoading a mi Provider

Acto siguiente en mi pagina de Home que donde se renderizan mis Cards incluí el siguiente condicional

 const renderView = () => {
    if (context.isLoading) {
      return <div>Loading...</div>; // Este condicional hace que me aparezca un mensajito de Loading... al inicio
    }
    if (context.filteredItems?.length > 0) {
      return context.filteredItems?.map((item) => (
        <Card key={item.id} data={item} />
      ));
    } else {
      return <div className=" text-gray-400 text-xl">Product Not Found</div>;
    }
  };

Y listo!!

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.