Filtros em construção

src/App.js

@@ -62,17 +62,46 @@ const MainContainer = styled.div`
   grid-template-columns: 1fr 3fr 1fr;
 `;
 
+
+
 class App extends React.Component {
   state = {
     produtos: produtos,
     carrinho: [],
     ordenacao: "crescente",
-  };
+    filtroMax: "",
+    filtroMin: "",
+    regex: "",
+    }  
 
-  contador = (soma) => {
-    return soma += soma
-  };
+  atualizarMaximo = (evento) => {
+    this.setState({ filtroMax: Number(evento.target.value) })
+  }
+
+  atualizarMinimo = (evento) => {
+    this.setState({ filtroMin: Number(evento.target.value) })
+  }
 
+  atualizarRegex = (evento) => {
+    this.setState({ regex: evento.target.value })
+  }
+
+  filtrarProdutos = () => {
+    let filtrados = this.state.produtos;
+    if (this.state.filtroMax) {
+      filtrados = filtrados.filter(item => item.valor <= this.state.filtroMax)
+    }
+    if (this.state.filtroMin) {
+      filtrados = filtrados.filter(item => item.valor >= this.state.filtroMin)
+    }
+    if (this.state.regex) {
+      const regexp = new RegExp(this.state.regex)
+      filtrados = filtrados.filter(item => regexp.test(item.nome))
+    }
+    return filtrados
+  }
+
+
   adicionarAoCarrinho = (produto) => {
       const novoCarrinho = [...this.state.carrinho, produto];
       this.setState({ carrinho: novoCarrinho });
@@ -93,22 +122,28 @@ class App extends React.Component {
     this.setState({ ordenacao: evento.target.value });
   };
 
+
   render() {
     return (
-      <MainContainer>
-        <Filter></Filter>
-        <GridProdutos
-          produtos={this.state.produtos}
+    <MainContainer>
+      <Filter 
+         funcaoMax={this.atualizarMaximo}
+         funcaoMin={this.atualizarMinimo}
+         funcaoRegex={this.atualizarRegex}
+      />
+      <GridProdutos
+          produtos={this.filtrarProdutos()}
           ordenacao={this.state.ordenacao}
           funcaoAdicionar={this.adicionarAoCarrinho}
           funcaoOrdenacao={this.mudarOrdenacao}
-        ></GridProdutos>
+       />
         <Carrinho 
           meuCarrinho={this.state.carrinho}
           funcaoRemover={this.cancelarCompra}
-        ></Carrinho>
-      </MainContainer>
-    );
+        />
+    </MainContainer>
+    )
+
   }
 }
 

src/components/Filter/Filter.js

@@ -7,9 +7,13 @@ const BarraLateral = styled.div`
     border: 1px solid orange;
 `
 
-function Filter() {
+
+function Filter(props) {
+  const { funcaoMax, funcaoMin, funcaoRegex } = props;
   return <BarraLateral>
-      <h2>Filtros</h2>
+    <input placeholder="Maximo" type="number" onChange={funcaoMax} />
+    <input placeholder="Minimo" type="number" onChange={funcaoMin} />
+    <input placeholder="Pesquisar" onChange={funcaoRegex} />
   </BarraLateral>;
 }