Actualizado el ejemplo

rferromoreno · Jul 14, 2021 · 52c3ebb · 52c3ebb
1 parent 14fc66f
commit 52c3ebb
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 6 deletions.
diff --git a/src/App.js b/src/App.js
@@ -17,7 +17,8 @@ function App() {
       <NavBar/>
         <Switch>
           <Route path='/item/:itemId'><ItemDetail products={products} /></Route>
-          <Route path='/color/:colorId'><ItemList products={products} /></Route>
+          <Route path='/color/:id'><ItemList products={products} filterBy="color" /></Route>
+          <Route path='/category/:id'><ItemList products={products} filterBy="category" /></Route>
           <Route exact path='/'><ItemList products={products} /></Route>
         </Switch>
       </BrowserRouter>

diff --git a/src/components/NavBar.js b/src/components/NavBar.js
@@ -7,6 +7,8 @@ const NavBar = () => (
     <Link className="link" to='/'>Inicio</Link>
     <Link className="link" to='/color/Blanco'>Productos en Blanco</Link>
     <Link className="link" to='/color/Negro'>Productos en Negro</Link>
+    <Link className="link" to='/category/Madera'>Productos de Madera</Link>
+    <Link className="link" to='/category/Ladrillo'>Productos de Ladrillo</Link>
   </nav>
 );
 

diff --git a/src/containers/ItemDetail.js b/src/containers/ItemDetail.js
@@ -12,6 +12,8 @@ const ItemDetail = ({ products }) => {
     <div>
       <h1>{item?.title}</h1>
       <span>{item?.description}</span>
+      <span>{item?.category}</span>
+      <span>{item?.color}</span>
       <div><img src={item?.imageSrc} alt={item?.title} /></div>
       <div><Link to='/'>Volver al inicio</Link></div>
     </div>

diff --git a/src/containers/ItemList.js b/src/containers/ItemList.js
@@ -1,18 +1,18 @@
 import React, { useState, useEffect } from 'react';
 import { Link, useParams } from 'react-router-dom';
 
-const ItemList = ({ products }) => {
-  const { colorId } = useParams();
+const ItemList = ({ products, filterBy }) => {
+  const { id } = useParams();
   const [list, setList] = useState([]);
   useEffect(() => {
     let productList;
-    if (colorId) {
-      productList = products.filter(product => product.color === colorId)
+    if (id && filterBy) {
+      productList = products.filter(product => product[filterBy] === id)
     } else {
       productList = products;
     }
     setList(productList)
-  }, [colorId, products]);
+  }, [id, products, filterBy]);
   return (
     <div>
       {list.map(item => (