Pensando en React ejercicio

[zamarrowski]

App.js

import React from 'react'

import './App.css'
import productsConstants from './products.constants'
import ProductsList from './ProductsList'

class App extends React.Component {

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

  addProduct = product => {
    this.setState({ selectedProducts: [...this.state.selectedProducts, product] })
  }

  removeProduct = product => {
    this.setState({ selectedProducts: this.state.selectedProducts.filter(p => p.id !== product.id) })
  }

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

  applyDiscount = () => {
    if (this.state.codeText === 'SAVE10') {
      this.setState({ applyDiscount: true })
    } else {
      alert('Invalid code')
    }
  }

  onHandleCode = e => {
    this.setState({ codeText: e.target.value })
  }

  componentDidUpdate() {
    localStorage.setItem('state', JSON.stringify(this.state))
  }

  componentDidMount() {
    this.setState(JSON.parse(localStorage.getItem('state')))
  }

  render() {
    return (
      <div>
        <div>
          <h1>Products</h1>
          <ProductsList products={productsConstants} onClick={this.addProduct} actionLabel="Add product" />
        </div>
        <div>
          <h1>Selected products</h1>
          <ProductsList products={this.state.selectedProducts} onClick={this.removeProduct} actionLabel="Remove product" />
          <p>Total price: {this.getTotalPrice()}</p>
          <input type="text" placeholder="Type code" onChange={this.onHandleCode} />
          <button onClick={this.applyDiscount}>Apply discount</button>
        </div>
      </div>
    )
  }

}

export default App

ProductsList.js

import React from 'react'

const ProductsList = props =>
  props.products.map(product => (
    <div key={product.id}>
      <div>Name: {product.name}</div>
      <div>Price: {product.price}</div>
      <img width="100" src={product.img} alt="" />
      <button onClick={() => props.onClick(product)}>{props.actionLabel}</button>
    </div>
  ))

export default ProductsList

products.constants.js

export default [
  {
    id: 1,
    name: 'iPhone 11',
    price: 700,
    img: 'https://thumb.pccomponentes.com/w-530-530/articles/23/233093/n1.jpg'
  },
  {
    id: 2,
    name: 'iPhone 12',
    price: 800,
    img: 'https://thumb.pccomponentes.com/w-530-530/articles/23/233099/b1.jpg'
  },
  {
    id: 3,
    name: 'iPhone 12S',
    price: 1000,
    img: 'https://thumb.pccomponentes.com/w-530-530/articles/17/170988/iphone-xs-gold-58-2-g97c-uw.jpg'
  }
]