{"size": 1361, "ext": "js", "max_stars_repo_path": "src/components/products-list.js", "max_stars_repo_name": "eugenehdev6/shirtastic-starer", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/products-list.js", "max_issues_repo_name": "eugenehdev6/shirtastic-starer", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/products-list.js", "max_forks_repo_name": "eugenehdev6/shirtastic-starer", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 27.7755102041, "max_line_length": 104, "alphanum_fraction": 0.6304188097}
import React from "react"
import PropTypes from "prop-types"
import ProductCard from "./product-card"
import { Col, Row } from "react-bootstrap"
import ReactPaginate from "react-paginate"
import "./product-list.scss"

const ProductsList = ({ items, currentPage, numPages, pageSelected }) => {
  const shirts = items.map(item => (
    <Col key={item.node.id} xs lg={4} md={6} sm={12}>
      <ProductCard item={item.node} />
    </Col>
  ))

  return (
    <div className="list-container d-flex flex-column align-items-center w-100 justify-content-between">
      <Row className="w-100 mt-3">{shirts}</Row>
      {numPages > 1 && (
        <Row className=" mt-3">
          <ReactPaginate
            pageCount={numPages}
            pageRangeDisplayed={7}
            marginPagesDisplayed={8}
            containerClassName={"pagination"}
            subContainerClassName={"pages pagination"}
            activeClassName={"active"}
            initialPage={currentPage ? currentPage - 1 : 0}
            onPageChange={data => pageSelected(data)}
          />
        </Row>
      )}
    </div>
  )
}

ProductsList.propTypes = {
  items: PropTypes.arrayOf(PropTypes.object),
  currentPage: PropTypes.number,
  numPages: PropTypes.number,
  pageSelected: PropTypes.func,
}

ProductsList.defaultProps = {
  items: [],
  numPages: 1,
}

export default ProductsList
