PR de correção. Não precisa mergeear.

package.json

@@ -8,7 +8,8 @@
     "@testing-library/user-event": "^7.1.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1"
+    "react-scripts": "3.4.1",
+    "styled-components": "^5.1.1"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.js

@@ -1,26 +1,139 @@
 import React from 'react';
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+import Produtos from './components/Produtos.js'
+import Carrinho from './components/Carrinho.js'
+import Filtros from './components/Filtros'
+import styled from 'styled-components'
+import IconCompra from './Imagens/compra.png'
+const DivPai = styled.div`
+  display: flex;
+  justify-content: space-around;
+  height: 100vh;
+  width:100%;
+  box-sizing: border-box;
+`
+const FormactCar = styled.img`
+  height: 40px;
+`
+const DivCar = styled.div`
+  background-color: #FFFF;
+  width: 100px;
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  box-shadow: 0px 0px 5px 1px gray;
+  position: fixed;
+  bottom: 10px;
+  right: 10px;
+`
+class App extends React.Component {
+  state = {
+    produtos: [
+      {id:1, nome: "Produto 1", valor: 100.0, imagemProd: "https://picsum.photos/200/200?ramdon=1"},
+      {id:2, nome: "Produto 2", valor: 200.0, imagemProd: "https://picsum.photos/200/200?ramdon=2"},
+      {id:3, nome: "Produto 3", valor: 300.0, imagemProd: "https://picsum.photos/200/200?ramdon=3"},
+      {id:4, nome: "Produto 4", valor: 400.0, imagemProd: "https://picsum.photos/200/200?ramdon=4"},
+      {id:5, nome: "Produto 5", valor: 500.0, imagemProd: "https://picsum.photos/200/200?ramdon=5"},
+      {id:6, nome: "Produto 6", valor: 600.0, imagemProd: "https://picsum.photos/200/200?ramdon=6"},
+      {id:7, nome: "Produto 7", valor: 700.0, imagemProd: "https://picsum.photos/200/200?ramdon=7"},
+      {id:8, nome: "Produto 8", valor: 800.0, imagemProd: "https://picsum.photos/200/200?ramdon=8"}
+    ],
+    addProduto:[],
+    carrinho:false,
+    maxValor: "",
+    minValor: "",
+    buscaProduto: "",
+    seletorOrdem: "cresc"
+  }
+  adicionaProduto = (produtoId) => {
+    const novoProduto = this.state.produtos.filter((produto)=>{
+      return produtoId === produto.id
+    }).map((produto)=>{
+      return(
+        <div>
+          <ul>
+            <li>{produto.nome}</li>
+          </ul>
+          <p>{produto.valor}</p>
+        </div>
+      )
+    })
+    this.setState({produtos:novoProduto})
+    console.log(this.state.produtos)
+  };
+  onChangeInputMax = (event) => {
+    this.setState({ maxValor: event.target.value });
+    console.log(this.state.maxValor)
+  };
+  onChangeInputMin = (event) => {
+    this.setState({ minValor: event.target.value });
+    console.log(this.state.minValor)
+  };
+  onChangeInputBusca = (event) => {
+    this.setState({ buscaProduto: event.target.value });
+    console.log(this.state.buscaProduto)
+  };
+  onChangeFilter = (event) => {
+    this.setState({ seletorOrdem: event.target.value })
+  }
+  renderizaCarrinho = ()=>{
+    this.setState({carrinho: !this.state.carrinho});
+  }
+  mensagem = this.state.produtos.length
+  render(){
+
+    if(this.state.carrinho){
+      return (
+        <DivPai className="App">
+          <Filtros arrayProd = {this.state.produtos}
+          max = {this.state.maxValor}
+          min = {this.state.minValor}
+          busca = {this.state.buscaProduto}
+          imax = {this.onChangeInputMax}
+          imin = {this.onChangeInputMin}
+          ibusca = {this.onChangeInputBusca}
+        />
+        <Produtos
+            msg = {this.mensagem}
+            arrayProd = {this.state.produtos}
+            maxValor = {this.state.maxValor}
+            minValor = {this.state.minValor}
+            buscaProduto = {this.state.buscaProduto}
+            seletorOrdem = {this.state.seletorOrdem}
+            onChangeFilter = {this.onChangeFilter}
+          />
+          <Carrinho />
+          <DivCar>
+            <FormactCar src={IconCompra} onClick={this.renderizaCarrinho}/>
+          </DivCar>
+        </DivPai>
+      )
+    }
+    return (
+      <DivPai className="App">
+        <Filtros arrayProd = {this.state.produtos}
+          max = {this.state.maxValor}
+          min = {this.state.minValor}
+          busca = {this.state.buscaProduto}
+          imax = {this.onChangeInputMax}
+          imin = {this.onChangeInputMin}
+          ibusca = {this.onChangeInputBusca}
+        />
+        <Produtos
+            msg = {this.mensagem}
+            arrayProd = {this.state.produtos}
+            maxValor = {this.state.maxValor}
+            minValor = {this.state.minValor}
+            buscaProduto = {this.state.buscaProduto}
+            seletorOrdem = {this.state.seletorOrdem}
+            onChangeFilter = {this.onChangeFilter}
+          />
+        <DivCar>
+          <FormactCar src={IconCompra} onClick={this.renderizaCarrinho}/>
+        </DivCar>
+      </DivPai>
+    );
+  }  
 }
-
-export default App;
+export default App;

src/components/Carrinho.js

@@ -0,0 +1,29 @@
+import React from 'react'
+import styled from 'styled-components'
+
+const Cart = styled.div`
+    border: 1px solid black;
+    text-align: left;
+    width: 20%;
+    height: 100vh;
+    box-sizing: border-box;
+`
+
+class Carrinho extends React.Component{
+    render(){
+
+
+
+
+
+        return(
+            <Cart>
+                <h3>Carrinho:</h3>
+                <p>Total: R$</p>
+                {this.props.novoProduto}
+            </Cart>
+        )
+    }
+}
+
+export default Carrinho

src/components/Filtros.js

@@ -0,0 +1,51 @@
+import React from 'react'
+import styled from 'styled-components'
+const DivFilter = styled.div`
+    border: solid 1px black; 
+    justify-content: left;
+    min-width: 20%;
+    height: 100vh;
+    text-align: center;
+    box-sizing: border-box;
+`
+const DivTeste = styled.div`
+    display: flex;
+    padding: 10px;
+`
+const InputProd = styled.input`
+    width: 60%;
+    height: 15px;
+    margin: 0px 0px 0px 10px;
+`
+const DivProd = styled.div`
+    margin: 16px;
+`
+const DivProdutos = styled.div`
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    width:100%;
+`
+class Filtros extends React.Component{
+    render(){
+        return(
+            <DivFilter>
+                <h3>Filtros:</h3> 
+                <br/>
+                <DivTeste>
+                <span>Valor Mínimo:</span>
+                <InputProd type="number" value={this.props.min} onChange={this.props.imin}/>
+                </DivTeste>
+                <DivTeste>
+                <span>Valor Máximo:</span>
+                <InputProd type="number" value={this.props.max} onChange={this.props.imax}/>
+                </DivTeste>
+                <DivTeste>
+                <span>Busca Produto:</span>
+                <InputProd type="text" value={this.props.busca} onChange={this.props.ibusca}/>
+                </DivTeste>
+            </DivFilter>
+        )
+    }
+}
+export default Filtros

src/components/Produtos.js

@@ -0,0 +1,95 @@
+import React from 'react'
+import styled from 'styled-components'
+const DivProdutos = styled.div`
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    width:100%;
+`
+const DivQuant = styled.div`
+    display: flex;
+    justify-content: space-evenly;  
+    align-items:baseline;
+`
+const DivProd = styled.div`
+    margin: 16px;
+`
+const SelectStyled = styled.select`
+    height: 10%;
+`
+const DivTotal = styled.div`
+    height: 100vh;
+`
+class Produtos extends React.Component{
+    render(){
+        function ordenaCrescente(a,b){
+            return a.valor - b.valor;
+        }
+        function ordenaDecrescente(a,b){
+            return b.valor - a.valor;
+        }
+        if(this.props.seletorOrdem === "cresc"){
+            this.props.arrayProd.sort(ordenaCrescente);
+        }
+        else if(this.props.seletorOrdem === "decresc"){
+            this.props.arrayProd.sort(ordenaDecrescente);
+        }
+        let listaFiltrada = this.props.arrayProd;
+        if(this.props.minValor !== ""){
+          listaFiltrada = listaFiltrada.filter((produto) => {
+            if(produto.valor >= this.props.minValor){
+              return true
+            } else {
+              return false
+            }
+            console.log(listaFiltrada)
+          })
+        }
+        if(this.props.maxValor !== ""){
+          listaFiltrada = listaFiltrada.filter((produto) => {
+            if(produto.valor <= this.props.maxValor){
+              return true
+            } else {
+              return false
+            }
+            console.log(listaFiltrada)
+          })
+        }
+        if(this.props.buscaProduto !== ""){
+            listaFiltrada = listaFiltrada.filter((produto) => {
+              if(produto.nome === this.props.buscaProduto){
+                return true
+              } else {
+                return false
+              }
+              console.log(listaFiltrada)
+            })
+          }
+        const novaListaDeProduto = listaFiltrada.map((produto)=>{
+            return (
+                    <DivProd key={produto.id}>
+                        <img src={produto.imagemProd}/>
+                        <p>{produto.nome}</p>
+                        <p>R$ {produto.valor}</p>
+                        <button onClick={this.props.adicionaProduto}>Adicionar ao Carrinho</button>
+                    </DivProd>
+            )
+            console.log(novaListaDeProduto)
+        });
+        return(
+                <DivTotal>
+                    <DivQuant>
+                        <p>Quantidade de produtos: {this.props.msg}</p>
+                        <SelectStyled value={this.props.seletorOrdem} onChange={this.props.onChangeFilter}>
+                            <option value="cresc">Preço: Crescente</option>
+                            <option value="decresc">Preço: Decrescente</option>
+                        </SelectStyled>
+                    </DivQuant>
+                    <DivProdutos>
+                        {novaListaDeProduto}
+                    </DivProdutos>
+                </DivTotal>
+        );
+    }
+} 
+export default Produtos;