{"size": 1950, "ext": "js", "max_stars_repo_path": "client/components/page/AllProducts.js", "max_stars_repo_name": "Grace-Shopper-Team-Grapes/grace-shopper", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "client/components/page/AllProducts.js", "max_issues_repo_name": "Grace-Shopper-Team-Grapes/grace-shopper", "max_issues_repo_issues_event_min_datetime": "2020-01-14T01:16:32.000Z", "max_issues_repo_issues_event_max_datetime": "2021-05-11T00:08:50.000Z", "max_forks_repo_path": "client/components/page/AllProducts.js", "max_forks_repo_name": "Grace-Shopper-Team-Grapes/grace-shopper", "max_forks_repo_forks_event_min_datetime": "2020-01-15T12:55:27.000Z", "max_forks_repo_forks_event_max_datetime": "2020-03-02T15:23:38.000Z"}
{"max_stars_count": null, "max_issues_count": 63, "max_forks_count": 2, "avg_line_length": 26.7123287671, "max_line_length": 73, "alphanum_fraction": 0.581025641}
import React from 'react';
import {connect} from 'react-redux';
import {getAllProducts} from '../../store/products';
import ProductGridItem from './module/ProductGridItem';
import {addOrderProduct} from '../../store';

class AllProducts extends React.Component {
  constructor(props) {
    super(props);
    this.handleAddToCart = this.handleAddToCart.bind(this);
  }
  componentDidMount() {
    this.props.getAllProducts();
  }

  handleAddToCart(event, productId) {
    event.preventDefault();
    this.props.addOrderProduct(productId, 1);
  }

  render() {
    const products = this.props.products;

    if (!products) {
      return (
        <div className="loading">
          <i className="fas fa-spinner fa-sync-alt" />
          Loading Products &ellips;
        </div>
      );
    }

    return (
      <div className="container">
        <div className="page-block">
          <h2 className="page-block__title page-block__title--center">
            All Products
          </h2>
          <div className="products-grid-container products-grid--all">
            <div className="products-grid-controls">
              {/* <!-- we probably won't bother with this --> */}
            </div>
            <div className="products-grid--fourths">
              {products.map(product => (
                <ProductGridItem
                  key={product.id}
                  product={product}
                  handleAddToCart={this.handleAddToCart}
                />
              ))}
            </div>
          </div>
        </div>
      </div>
    );
  }
}

const mapStateToProps = state => ({products: state.products});

const mapDispatchToProps = dispatch => {
  return {
    getAllProducts: () => {
      dispatch(getAllProducts());
    },
    addOrderProduct: (productId, productQty) => {
      dispatch(addOrderProduct(productId, productQty));
    }
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(AllProducts);
