From 472465ef7936948eb578bfdf4a4d803411a538c4 Mon Sep 17 00:00:00 2001
From: Kaueny Alves <63555634+Kaueny-Alves@users.noreply.github.com>
Date: Tue, 26 May 2020 20:38:28 -0300
Subject: [PATCH 1/2] =?UTF-8?q?Filtros=20em=20constru=C3=A7=C3=A3o?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.js                      | 18 +++++++++++-
 src/components/Filter/Filter.js | 51 +++++++++++++++++++++++++++++++--
 2 files changed, 66 insertions(+), 3 deletions(-)

diff --git a/src/App.js b/src/App.js
index b12f39d..a36da5f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -61,15 +61,31 @@ const MainContainer = styled.div`
   grid-template-rows: 80vh;
 `;
 
+
+
 class App extends React.Component {
   state = {
     produtos: produtos,
+    filtros: {
+      maxValor: "",
+      minValor: "",
+    },
+    buscarProdutos:"",
   };
 
+  updateFilterValue = (produto) => {
+    this.setState({filtros: {...this.state.filtros, ...produto},
+    })
+  }
+
+
   render() {
     return (
     <MainContainer>
-      <Filter></Filter>
+      <Filter 
+         onChangeFilter={this.updateFilterValue}
+
+      />
       <GridProdutos listaProdutos={this.state.produtos}></GridProdutos>
       <Carrinho></Carrinho>
     </MainContainer>
diff --git a/src/components/Filter/Filter.js b/src/components/Filter/Filter.js
index a517449..a6a9d7f 100644
--- a/src/components/Filter/Filter.js
+++ b/src/components/Filter/Filter.js
@@ -7,9 +7,56 @@ const BarraLateral = styled.div`
     border: 1px solid orange;
 `
 
-function Filter() {
+
+function Filter(props) {
+
+  const onChangeMin = (e) => {
+    const value = Number(e.target.value)
+    const novoFiltro = {"valorMinimo": value}
+
+    props.onChangeFilter(novoFiltro)
+    console.log(novoFiltro)
+  }
+
+  const onChangeMax = (e) => {
+    const value = Number(e.target.value)
+    const novoFiltro = {"valorMaximo": value}
+
+    props.onChangeFilter(novoFiltro)
+    console.log(novoFiltro)
+  }
+
+  
+
+  
+
+  
+
+
   return <BarraLateral>
-      <h2>Filtros</h2>
+      <h2>Filtros:</h2>
+     <label>Valor Mínimo:</label>
+     <input 
+      type="number"
+      min={0}
+      name="valorMinimo"
+      onChange={onChangeMin}
+     />
+     <label>Valor Máximo:</label>
+     <input
+       type="number"
+       max={0}
+       name="valorMaximo"
+       onChange={onChangeMax}
+     />
+     <label>Buscar Produtos:</label>
+     <input 
+      type="text"
+      name="busca"
+      value={props.valorInput}
+      onChange={""}
+     />
+
   </BarraLateral>;
 }
 

From 6aa33db58f56fbd6b83621bed50b5f11a127d45a Mon Sep 17 00:00:00 2001
From: Kaueny Alves <63555634+Kaueny-Alves@users.noreply.github.com>
Date: Wed, 27 May 2020 15:35:35 -0300
Subject: [PATCH 2/2] Filtros Atualizados

---
 src/App.js                      | 46 ++++++++++++++++++++++-------
 src/components/Filter/Filter.js | 51 +++------------------------------
 2 files changed, 40 insertions(+), 57 deletions(-)

diff --git a/src/App.js b/src/App.js
index a36da5f..c8325d6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -66,24 +66,50 @@ const MainContainer = styled.div`
 class App extends React.Component {
   state = {
     produtos: produtos,
-    filtros: {
-      maxValor: "",
-      minValor: "",
-    },
-    buscarProdutos:"",
-  };
+    filtroMax: "",
+    filtroMin: "",
+    regex: "",
+    }
+    
+  
 
-  updateFilterValue = (produto) => {
-    this.setState({filtros: {...this.state.filtros, ...produto},
-    })
+  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
+  }
+
+  
+
 
   render() {
     return (
     <MainContainer>
       <Filter 
-         onChangeFilter={this.updateFilterValue}
+         funcaoMax={this.atualizarMaximo}
+         funcaoMin={this.atualizarMinimo}
+         funcaoRegex={this.atualizarRegex}
 
       />
       <GridProdutos listaProdutos={this.state.produtos}></GridProdutos>
diff --git a/src/components/Filter/Filter.js b/src/components/Filter/Filter.js
index a6a9d7f..4f52772 100644
--- a/src/components/Filter/Filter.js
+++ b/src/components/Filter/Filter.js
@@ -9,54 +9,11 @@ const BarraLateral = styled.div`
 
 
 function Filter(props) {
-
-  const onChangeMin = (e) => {
-    const value = Number(e.target.value)
-    const novoFiltro = {"valorMinimo": value}
-
-    props.onChangeFilter(novoFiltro)
-    console.log(novoFiltro)
-  }
-
-  const onChangeMax = (e) => {
-    const value = Number(e.target.value)
-    const novoFiltro = {"valorMaximo": value}
-
-    props.onChangeFilter(novoFiltro)
-    console.log(novoFiltro)
-  }
-
-  
-
-  
-
-  
-
-
+  const { funcaoMax, funcaoMin, funcaoRegex } = props;
   return <BarraLateral>
-      <h2>Filtros:</h2>
-     <label>Valor Mínimo:</label>
-     <input 
-      type="number"
-      min={0}
-      name="valorMinimo"
-      onChange={onChangeMin}
-     />
-     <label>Valor Máximo:</label>
-     <input
-       type="number"
-       max={0}
-       name="valorMaximo"
-       onChange={onChangeMax}
-     />
-     <label>Buscar Produtos:</label>
-     <input 
-      type="text"
-      name="busca"
-      value={props.valorInput}
-      onChange={""}
-     />
-
+    <input placeholder="Maximo" type="number" onChange={funcaoMax} />
+    <input placeholder="Minimo" type="number" onChange={funcaoMin} />
+    <input placeholder="Pesquisar" onChange={funcaoRegex} />
   </BarraLateral>;
 }