{"size": 3493, "ext": "js", "max_stars_repo_path": "students/k3340/laboratory_works/laboratory_works/Arlakov_Denis/laboratiry_work_2_and_3/lab/django-react-ecommerce-master/src/containers/ProductList.js", "max_stars_repo_name": "TonikX/ITMO_ICT_-WebProgramming_2020", "max_stars_repo_stars_event_min_datetime": "2020-03-20T09:06:12.000Z", "max_stars_repo_stars_event_max_datetime": "2021-07-27T13:06:02.000Z", "max_issues_repo_path": "students/k3340/laboratory_works/laboratory_works/Arlakov_Denis/laboratiry_work_2_and_3/lab/django-react-ecommerce-master/src/containers/ProductList.js", "max_issues_repo_name": "TonikX/ITMO_ICT_-WebProgramming_2020", "max_issues_repo_issues_event_min_datetime": "2020-03-23T09:47:48.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-12T01:05:19.000Z", "max_forks_repo_path": "students/k3340/laboratory_works/laboratory_works/Arlakov_Denis/laboratiry_work_2_and_3/lab/django-react-ecommerce-master/src/containers/ProductList.js", "max_forks_repo_name": "TonikX/ITMO_ICT_-WebProgramming_2020", "max_forks_repo_forks_event_min_datetime": "2020-03-20T12:45:56.000Z", "max_forks_repo_forks_event_max_datetime": "2021-10-31T19:22:25.000Z"}
{"max_stars_count": 10, "max_issues_count": 134, "max_forks_count": 71, "avg_line_length": 26.2631578947, "max_line_length": 73, "alphanum_fraction": 0.4251359863}
import React from "react";
import { connect } from "react-redux";
import axios from "axios";
import {
  Container,
  Dimmer,
  Image,
  Item,
  Label,
  Loader,
  Message,
  Segment
} from "semantic-ui-react";
import { productListURL, addToCartURL } from "../constants";
import { fetchCart } from "../store/actions/cart";
import { authAxios } from "../utils";

class ProductList extends React.Component {
  state = {
    loading: false,
    error: null,
    data: []
  };

  componentDidMount() {
    this.setState({ loading: true });
    axios
      .get(productListURL)
      .then(res => {
        this.setState({ data: res.data, loading: false });
      })
      .catch(err => {
        this.setState({ error: err, loading: false });
      });
  }

  handleAddToCart = slug => {
    this.setState({ loading: true });
    authAxios
      .post(addToCartURL, { slug })
      .then(res => {
        this.props.refreshCart();
        this.setState({ loading: false });
      })
      .catch(err => {
        this.setState({ error: err, loading: false });
      });
  };

  render() {
    const { data, error, loading } = this.state;
    return (
      <Container>
        {error && (
          <Message
            error
            header="There was some errors with your submission"
            content={JSON.stringify(error)}
          />
        )}
        {loading && (
          <Segment>
            <Dimmer active inverted>
              <Loader inverted>Loading</Loader>
            </Dimmer>

            <Image src="/images/wireframe/short-paragraph.png" />
          </Segment>
        )}
        <Item.Group divided>
          {data.map(item => {
            return (
              <Item key={item.id}>
                <Item.Image src={item.image} />
                <Item.Content>
                  <Item.Header
                    as="a"
                    onClick={() =>
                      this.props.history.push(`/products/${item.id}`)
                    }
                  >
                    {item.title}
                  </Item.Header>
                  <Item.Meta>
                    <span className="cinema">{item.category}</span>
                  </Item.Meta>
                  <Item.Description>{item.description}</Item.Description>
                  <Item.Extra>
                    {/* <Button
                      primary
                      floated="right"
                      icon
                      labelPosition="right"
                      onClick={() => this.handleAddToCart(item.slug)}
                    >
                      Add to cart
                      <Icon name="cart plus" />
                    </Button> */}
                    {item.discount_price && (
                      <Label
                        color={
                          item.label === "primary"
                            ? "blue"
                            : item.label === "secondary"
                            ? "green"
                            : "olive"
                        }
                      >
                        {item.label}
                      </Label>
                    )}
                  </Item.Extra>
                </Item.Content>
              </Item>
            );
          })}
        </Item.Group>
      </Container>
    );
  }
}

const mapDispatchToProps = dispatch => {
  return {
    refreshCart: () => dispatch(fetchCart())
  };
};

export default connect(
  null,
  mapDispatchToProps
)(ProductList);
