text: import React, { Component } from 'react';
  
  import { MdShoppingBasket } from 'react-icons/md';
  import { connect } from 'react-redux';
  import { bindActionCreators } from 'redux';
  import api from '../../services/api';
  
  import { ProductList } from './styles';
  
  import { formatPrice } from '../../util/format';
  
  import * as cartActions from '../../store/models/cart/actions';
  
  
  class Home extends Component {
    state = {
      products: []
    }
  
    async componentDidMount() {
      const response = await api.get('products');
  
      const data = response.data.map(product => ({
        ...product,
        priceFormatted: formatPrice(product.price)
      }));
  
      this.setState({ products: data });
    }
  
    handleAddProduct = id => {
      const { addToCartRequest } = this.props;
  
      addToCartRequest(id);
    }
  
    render() {
      const { products } = this.state;
  
      const { amount } = this.props;
  
      return (
        <ProductList>
          {products.map(product => (
            <li key={product.id}>
              <img src={product.image} alt="Tênis" />
              <strong>{product.title}</strong>
              <span>{product.priceFormmated}</span>
  
              <button type='button' onClick={() => this.handleAddProduct(product.id)}>
                <div>
                  <MdShoppingBasket size={16} color="#FFF" /> {amount[product.id] || 0}
                </div>
                <span>Adicionar ao carrinho</span>
              </button>
            </li>
          ))}
        </ProductList>
      );
    }
  
  }
  
  const mapStateToProps = state => ({
    amount: state.cart.reduce((amount, product) => {
      amount[product.id] = product.amount;
  
      return amount;
    }, {})
  });
  
  const mapDispatchToProps = dispatch =>
    bindActionCreators(cartActions, dispatch);
  
  export default connect(mapStateToProps, mapDispatchToProps)(Home);
  