future4code · indiomedeiros · May 12, 2021 · May 12, 2021 · May 12, 2021 · May 12, 2021
diff --git a/README.md b/README.md
@@ -1 +1,22 @@
-Sejam bem vindos ao Labe-commerce, esse repositório contém um esqueleto de app React e um .gitignore.
+### Labcommerce 12
+
+### Novo Normal
+
+
+### O que funciona
+todas as funcionalidades estão funcionando de acordo com o solicitado no projeto
+
+
+### Link Surge 
+http://nncommerce.surge.sh/
+
+### Imagens
+![Capturar_select-area_20210515145733](https://user-images.githubusercontent.com/37752868/118373727-aac5b800-b58e-11eb-927a-afa9e8caf4bf.png)
+![Capturar_select-area_20210515145743](https://user-images.githubusercontent.com/37752868/118373730-abf6e500-b58e-11eb-9c87-7277d94ffd57.png)
+![Capturar_select-area_20210515145755](https://user-images.githubusercontent.com/37752868/118373731-ac8f7b80-b58e-11eb-996a-165f5a8ebf12.png)
+![Capturar_select-area_20210515145812](https://user-images.githubusercontent.com/37752868/118373733-ad281200-b58e-11eb-96f2-d0b9db5f653c.png)
+![Capturar_select-area_20210515145850](https://user-images.githubusercontent.com/37752868/118373735-adc0a880-b58e-11eb-95c2-058aea7da457.png)
+![Capturar_select-area_20210515145905](https://user-images.githubusercontent.com/37752868/118373736-adc0a880-b58e-11eb-9987-55d1df13d06f.png)
+![Capturar_select-area_20210515145916](https://user-images.githubusercontent.com/37752868/118373738-ae593f00-b58e-11eb-8dee-a5bbc6ae400d.png)
+![Capturar_select-area_20210515145943](https://user-images.githubusercontent.com/37752868/118373739-ae593f00-b58e-11eb-98ad-58d294a6daa4.png)
+![Capturar_select-area_20210515145952](https://user-images.githubusercontent.com/37752868/118373740-aef1d580-b58e-11eb-9466-51073018cd18.png)
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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.3.0"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Novo Normal</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.js b/src/App.js
@@ -1,26 +1,318 @@
-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 React from 'react'
+import styled from 'styled-components'
+import './App.css'
+import Products from './components/Products/Products'
+import Cart from './components/ShoppCart/Cart'
+import img from './astronauta2.jpg'
+import Filter from './components/Filters/Filter'
+import model1 from './imgs/pngwing.com.png'
+
+const AppContainer = styled.div`
+  display:flex;
+  flex-direction: column;
+  margin:0px;
+  padding:0px;
+  background-color: #1C1F22;
+`
+const DisplayApp = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+
+const Stock = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content:center;
+  flex-wrap: wrap;
+`
+
+const NavBar = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content:center;
+  background-image: url(${img});
+  background-repeat: no-repeat;
+  background-size: cover;
+  height: 50vh;
+  color: white;
+  text-shadow: 1px 5px 5px black;
+`
+const FilterBar = styled.div`
+  display:flex;
+  background-color: #133440;
+  flex-wrap: wrap;
+  padding-bottom:10px;
+`
+const Header = styled.div`
+  display:flex;
+  flex-direction: column;
+  text-align:center;
+`
+
+const NameStore = styled.h1`
+  margin: 5px;
+  font-size: 13rem;
+  font-weight: 200;
+  font-family: 'Exo 2', sans-serif;
+  font-style: italic;
+  color: #fff;
+  padding: 2rem 2rem 2rem;
+  border: 0.4rem solid #fff;
+  border-radius: 2rem;
+  text-transform: uppercase;
+  animation: flicker 1.5s infinite alternate;
+  font-size: 90px;   
+  --neon-text-color: #f40;
+  --neon-border-color: #08f;
+
+@keyframes flicker {
+
+    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
+
+        text-shadow:
+            -0.2rem -0.2rem 1rem #fff,
+            0.2rem 0.2rem 1rem #fff,
+            0 0 2rem var(--neon-text-color),
+            0 0 4rem var(--neon-text-color),
+            0 0 6rem var(--neon-text-color),
+            0 0 8rem var(--neon-text-color),
+            0 0 10rem var(--neon-text-color);
+
+        box-shadow:
+            0 0 .5rem #fff,
+            inset 0 0 .5rem #fff,
+            0 0 2rem var(--neon-border-color),
+            inset 0 0 2rem var(--neon-border-color),
+            0 0 4rem var(--neon-border-color),
+            inset 0 0 4rem var(--neon-border-color);        
+    }
+
+    20%, 24%, 55%{        
+        text-shadow: none;
+        box-shadow: none;
+    }    
+}
+    @media (max-width: 761px){
+      font-size: 4rem;
+      padding: 2rem 2rem 2rem;
+    }
+    @media (max-width: 375px){
+      font-size: 3rem;
+      padding: 1rem 1rem 1rem;
+    }
+
+`
+
+const TextHeader = styled.p`
+  font-size: 20px;
+  color: black;
+  text-shadow:
+    0 0 5px #fff,
+    0 0 10px #fff,
+    0 0 20px #fff,
+    0 0 40px #0ff,
+    0 0 80px #0ff,
+    0 0 90px #0ff,
+    0 0 100px #0ff,
+    0 0 150px #0ff;
+`
+
+
+class App extends React.Component {
+  state = {
+    products :[
+      {
+        id: Math.random(),
+        name: "Uniforme Cyberpunk",
+        price: 5600,
+        image: "https://mega.ibxk.com.br/2015/03/13/13142708050663.jpg",
+
+      },
+      {
+        id: Math.random(),
+        name: "Confort 101",
+        price: 9000,
+        image: "https://www.inovacaotecnologica.com.br/noticias/imagens/010130190521-roupa-espacial-para-marte-1.jpg",
+      },
+      {
+        id: Math.random(),
+        name: "OITNB",
+        price: 8300,
+        image: "https://i.pinimg.com/736x/d9/45/21/d94521ee32233b8ad3a3befe7d85242a.jpg",
+      },
+      {
+        id: Math.random(),
+        name: "Safety first",
+        price: 9600,
+        image: model1,
+      },
+      {
+        id: Math.random(),
+        name: "Modern solutions",
+        price: 6600,
+        image: "https://static.turbosquid.com/Preview/2019/12/04__08_39_19/Futuristic_Astronaut_Space_Suit_Rigged_c4d_00.jpg866C93BC-BAAB-4227-B53C-D011D182B44ALarge.jpg",
+      },
+      {
+        id: Math.random(),
+        name: "Vintage",
+        price: 4800,
+        image: "https://i.pinimg.com/originals/cc/05/c2/cc05c2207f91fd59c585f5389895bdad.jpg",
+      },
+      {
+        id: Math.random(),
+        name: "Jet-Pack",
+        price: 4800,
+        image: "https://www.renderhub.com/zolty/space-suit-3d/space-suit-3d-01.jpg",
+      },
+      {
+        id: Math.random(),
+        name: "Starter Pack",
+        price: 5666,
+        image: "https://static.turbosquid.com/Preview/000952/135/LE/3d-nasa-space-suit-extravehicular-model_600.jpg",
+      }
+    ],
+
+    myCart: [],
+    filterMin: 0,
+    filterMax: Infinity,
+    order: "increasing",
+    search: ""
+  }
+
+  componentDidUpdate(){
+    localStorage.setItem("cart", JSON.stringify(this.state.myCart))
+  }
+
+  componentDidMount(){
+    if (localStorage.getItem("cart")){
+      const cartSavedString = localStorage.getItem("cart")
+      this.setState({myCart: JSON.parse(cartSavedString)})
+    }
+  }
+
+  addToCart = (idProduct) => {
+    const addToCart = [...this.state.myCart]
+    let i
+    for(i =0; i <addToCart.length; i++){
+      if(addToCart[i].id === idProduct){
+        addToCart[i].quantity += 1
+        break
+      }
+    }
+    if (i === addToCart.length){
+      const productFilter = this.state.products.filter((item) =>{
+        if (item.id === idProduct)
+        return true
+      })
+      productFilter[0].quantity = 1
+      addToCart.push(productFilter[0])
+    }
+    this.setState({myCart: addToCart})
+  }
+
+  removeFromCart = (idProduct) => {
+    const removeCart = [...this.state.myCart]
+    const productId = removeCart.findIndex((item)=>{
+      return item.id === idProduct
+    })
+    for(let i = 0; i< removeCart.length; i++){
+      if(i === productId){
+        if(removeCart[i].quantity > 1){
+          removeCart[i].quantity -= 1
+        }else{
+          removeCart.splice(productId, 1)
+        }
+      }
+    }
+    this.setState ({myCart: removeCart})
+  }
+
+  onChangeFilterMin=(event)=>{
+    this.setState({filterMin: event.target.value})
+  }
+
+  onChangeFilterMax=(event)=>{
+    this.setState({filterMax: event.target.value})
+  }
+
+  onChangeFilterSearch=(event)=>{
+    this.setState({search: event.target.value})
+  }
+
+  onChangeOrder=(event)=>{
+    this.setState({order: event.target.value})
+  }
+
+  resetFilters=(event)=>{
+    this.setState({
+      search: "",
+      filterMin: 0,
+      filterMax: Infinity,
+    })
+
+  }
+
+  render() {
+
+    const filter = this.state.products.filter(item =>{
+      if(this.state.filterMin === ""){
+        this.setState({filterMin: 0})
+      }else if(this.state.filterMax === ""){
+        this.setState({filterMax: Infinity})
+      }
+      return item.price >= this.state.filterMin && item.price <= this.state.filterMax && item.name.toLowerCase().includes(this.state.search.toLocaleLowerCase())
+    }).sort((a,b) =>{
+      if(this.state.order === "increasing"){
+        return a.price - b.price
+      }else if (this.state.order === "decreasing"){
+        return b.price - a.price
+      }
+    })
+
+    const filterProducts = filter.map((item)=>{
+      return (
+            <Products
+          image={item.image}
+          name={item.name}
+          price={item.price}
+          addToCart={() => this.addToCart(item.id)} />
+      )
+    })
+
+    return (
+      <AppContainer>
+        <DisplayApp>
+          <NavBar>
+            <Header>
+              <NameStore>Novo normal</NameStore>
+              <TextHeader>Para ir ao espaço ou ao mercado durante a pandemia</TextHeader>
+            </Header>
+          </NavBar>
+          <FilterBar>
+              <Filter
+              maxPrice={this.state.filterMax}
+              minPrice={this.state.filterMin}
+              findProduct={this.state.search}
+              onChangeFilterMax={this.onChangeFilterMax}
+              onChangeFilterMin={this.onChangeFilterMin}
+              onChangeFilterSearch={this.onChangeFilterSearch}
+              onChangeOrder={this.onChangeOrder}
+              resetFilters={this.resetFilters}
+              />
+            </FilterBar>
+          <Stock>
+            {filterProducts}
+          </Stock>
+        </DisplayApp>
+        <Cart
+          myCart={this.state.myCart}
+          removeFromCart={this.removeFromCart}
+        />
+
+      </AppContainer>
+    )
+
+  }
 }
 
-export default App;
+export default App
diff --git a/src/astronauta.jpg b/src/astronauta.jpg
diff --git a/src/astronauta2.jpg b/src/astronauta2.jpg