🔨 Filtrando categorías con JavaScript

src/Components/Navbar/Navbar.jsx

@@ -16,6 +16,7 @@ const Navbar = () => {
         <li>
           <NavLink
             to="/"
+            onClick={() => context.setSearchByCategory()}
             className={({ isActive }) => (isActive ? activeStyle : undefined)}
           >
             All
@@ -24,6 +25,7 @@ const Navbar = () => {
         <li>
           <NavLink
             to="/clothes"
+            onClick={() => context.setSearchByCategory('clothes')}
             className={({ isActive }) => (isActive ? activeStyle : undefined)}
           >
             Clothes
@@ -32,6 +34,7 @@ const Navbar = () => {
         <li>
           <NavLink
             to="/electronics"
+            onClick={() => context.setSearchByCategory('electronics')}
             className={({ isActive }) => (isActive ? activeStyle : undefined)}
           >
             Electronics
@@ -40,6 +43,7 @@ const Navbar = () => {
         <li>
           <NavLink
             to="/furnitures"
+            onClick={() => context.setSearchByCategory('furnitures')}
             className={({ isActive }) => (isActive ? activeStyle : undefined)}
           >
             Furnitures
@@ -48,6 +52,7 @@ const Navbar = () => {
         <li>
           <NavLink
             to="/toys"
+            onClick={() => context.setSearchByCategory('toys')}
             className={({ isActive }) => (isActive ? activeStyle : undefined)}
           >
             Toys
@@ -56,6 +61,7 @@ const Navbar = () => {
         <li>
           <NavLink
             to="/others"
+            onClick={() => context.setSearchByCategory('others')}
             className={({ isActive }) => (isActive ? activeStyle : undefined)}
           >
             {" "}

src/Context/Context.jsx

@@ -31,8 +31,11 @@ export const ShoppingCartProvider = ({ children }) => {
   const [filteredItems, setFilteredItems] = useState(null);
 
   //Get products by title
-  const [seachByTitle, setSeachByTitle] = useState(null);
-
+  const [searchByTitle, setSearchByTitle] = useState(null);
+
+  //Get products by category
+  const [searchByCategory, setSearchByCategory] = useState(null);
+
   useEffect(() => {
     fetch('https://api.escuelajs.co/api/v1/products')
       .then((res) => res.json())
@@ -42,15 +45,58 @@ export const ShoppingCartProvider = ({ children }) => {
   }, []);
 
   const filteredItemsByTitle = (items, searchByTitle) => {
-   return items?.filter(item => item.title.toLowerCase().includes(searchByTitle.toLowerCase())); 
-  }
+    return items?.filter((item) =>
+      item.title.toLowerCase().includes(searchByTitle.toLowerCase())
+    );
+  };
+
+  const filteredItemsByCategory = (items, searchByCategory) => {
+    return items?.filter((item) =>
+      item.category.name.toLowerCase().includes(searchByCategory.toLowerCase())
+    );
+  };
 
+  const filterBy = (searchType, items, searchByTitle, searchByCategory) => {
+    if (searchType === 'BY_TITLE') {
+      return filteredItemsByTitle(items, searchByTitle);
+    }
+    if (searchType === 'BY_CATEGORY') {
+      return filteredItemsByCategory(items, searchByCategory);
+    }
+    if (searchType === 'BY_TITLE_AND_CATEGORY') {
+      return filteredItemsByCategory(items, searchByCategory).filter((item) =>
+        item.title.toLowerCase().includes(searchByTitle.toLowerCase())
+      );
+    }
+    if (!searchType) {
+      return items;
+    }
+  };
   useEffect(() => {
-    if(seachByTitle) {
-      setFilteredItems(filteredItemsByTitle(items, seachByTitle));
+    if (searchByTitle && searchByCategory) {
+      setFilteredItems(
+        filterBy(
+          'BY_TITLE_AND_CATEGORY',
+          items,
+          searchByTitle,
+          searchByCategory
+        )
+      );
     }
-  },[items, seachByTitle]);
-
+    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));
+    }
+  }, [items, searchByTitle, searchByCategory]);
 
   return (
     <ShoppingCartContext.Provider
@@ -71,9 +117,11 @@ export const ShoppingCartProvider = ({ children }) => {
         setOrder,
         items,
         setItems,
-        seachByTitle,
-        setSeachByTitle,
-        filteredItems
+        searchByTitle,
+        setSearchByTitle,
+        filteredItems,
+        searchByCategory,
+        setSearchByCategory,
       }}
     >
       {children}

src/Pages/App/App.jsx

@@ -16,6 +16,26 @@ const AppRoutes = () => {
       path: "/",
       element: <Home />,
     },
+    {
+      path: "/clothes",
+      element: <Home />,
+    },
+    {
+      path: "/electronics",
+      element: <Home />,
+    },
+    {
+      path: "/furnitures",
+      element: <Home />,
+    },
+    {
+      path: "/toys",
+      element: <Home />,
+    },
+    {
+      path: "/others",
+      element: <Home />,
+    },
     {
       path: "/my-orders",
       element: <MyOrders />,

src/Pages/Home/Home.jsx

@@ -7,7 +7,7 @@ const Home = () => {
   const context = useContext(ShoppingCartContext);
 
   const renderView = () => {
-    if (context.seachByTitle?.length > 0) {
+    if (context.searchByTitle?.length > 0) {
       if (context.filteredItems?.length > 0) {
         return context.filteredItems?.map((item) => (
           <Card key={item.id} data={item} />
@@ -29,7 +29,7 @@ const Home = () => {
         type="text"
         placeholder="Search a product"
         className="rounded-lg border border-black w-80 p-4 mb-4 focus:outline-none"
-        onChange={(event) => context.setSeachByTitle(event.target.value)}
+        onChange={(event) => context.setSearchByTitle(event.target.value)}
       />
       <div className="grid gap-4 grid-cols-4 w-full max-w-screen-lg">
         {renderView()}