Carrito de la compra

[zamarrowski]

app.js

import React from 'react'
import './App.css'
import Product from './Product'

class App extends React.Component {

  state = {
    selectedProducts: [],
    promoText: '',
    applyDiscount: false,
  }

  products = [
    {
      descriptionImg: 'iphone x',
      img: 'https://store.storeimages.cdn-apple.com/4668/as-images.apple.com/is/refurb-iphoneX-spacegray_AV2?wid=1144&hei=1144&fmt=jpeg&qlt=80&op_usm=0.5,0.5&.v=1548459944179',
      name: 'iPhone X',
      price: 1000
    },
    {
      descriptionImg: 'iphone 8',
      img: 'https://store.storeimages.cdn-apple.com/4668/as-images.apple.com/is/refurb-iphone8-gold?wid=1144&hei=1144&fmt=jpeg&qlt=80&op_usm=0.5,0.5&.v=1542226468997',
      name: 'iPhone 8',
      price: 800
    },
    {
      descriptionImg: 'iphone 7',
      img: 'https://images-na.ssl-images-amazon.com/images/I/618wAPmPJPL._AC_SL1000_.jpg',
      name: 'iPhone 7',
      price: 700
    }
  ]

  componentDidMount() {
    if (localStorage.products) {
      this.setState({
        selectedProducts: JSON.parse(localStorage.products)
      })
    }
  }

  addProduct = product => {
    this.setState({
      selectedProducts: [...this.state.selectedProducts, {...product, id: Math.random()}]
    }, () => {
      localStorage.products = JSON.stringify(this.state.selectedProducts)
    })
  }

  removeProduct = product => {
    this.setState({
      selectedProducts: this.state.selectedProducts.filter(p => p.id !== product.id)
    }, () => {
      localStorage.products = JSON.stringify(this.state.selectedProducts)
    })
  }

  getTotalPrice = () => {
    let total = this.state.selectedProducts.reduce((prev, next) => prev + next.price, 0)
    if (this.state.applyDiscount) return total * 0.9
    return total
  }

  handleChange = e => {
    this.setState({
      promoText: e.target.value
    })
  }

  applyDiscount = () => {
    if (this.state.promoText === 'SAVE10') {
      this.setState({
        applyDiscount: true
      })
    } else {
      alert('Código incorrecto')
    }
  }

  render() {
    return (
      <div className="app-container">
        <div>
          <h1>Products</h1>
          <div className="products-container">
            {this.products.map(product => (
              <Product
                key={product.name}
                descriptionImg={product.descriptionImg}
                img={product.img}
                name={product.name}
                price={product.price}
                onAddProduct={() => this.addProduct(product)}
              />
            ))}
          </div>
        </div>
        <div className="cart-container">
          <h1>Cart</h1>
          {this.state.selectedProducts.length === 0 && <p>No products added</p>}
          <div className="products-container">
            {this.state.selectedProducts.map(product => (
              <Product
                key={product.name}
                descriptionImg={product.descriptionImg}
                img={product.img}
                name={product.name}
                price={product.price}
                onRemoveProduct={() => this.removeProduct(product)}
              />
            ))}
          </div>
          <p>Total price: {this.getTotalPrice()}€</p>
          <input placeholder="PROMO CODE" type="text" onChange={this.handleChange} />
          <button onClick={this.applyDiscount}>Apply</button>
        </div>
      </div>
    )
  }
}

export default App

Product.js

import React from 'react'

export default props =>
  <div>
    <img alt={props.descriptionImg} src={props.img} height="150px" />
    <p>{props.name}</p>
    <p>{props.price}€</p>
    {props.onAddProduct && (
      <button onClick={props.onAddProduct}>Añadir</button>
    )}
    {props.onRemoveProduct && (
      <button onClick={props.onRemoveProduct}>Borrar</button>
    )}
  </div>