{"size": 1072, "ext": "js", "max_stars_repo_path": "client/components/cartItem.js", "max_stars_repo_name": "Big-O-Town/Big-O-Town-Store", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "client/components/cartItem.js", "max_issues_repo_name": "Big-O-Town/Big-O-Town-Store", "max_issues_repo_issues_event_min_datetime": "2020-05-05T00:47:22.000Z", "max_issues_repo_issues_event_max_datetime": "2021-05-11T12:33:02.000Z", "max_forks_repo_path": "client/components/cartItem.js", "max_forks_repo_name": "Big-O-Town/Big-O-Town-Store", "max_forks_repo_forks_event_min_datetime": "2022-03-17T00:00:31.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-17T00:00:31.000Z"}
{"max_stars_count": null, "max_issues_count": 3, "max_forks_count": 1, "avg_line_length": 26.8, "max_line_length": 76, "alphanum_fraction": 0.6110074627}
/* eslint-disable react/button-has-type */
import React from 'react'
import {Link} from 'react-router-dom'
import {deleteProduct} from '../store/cart'
import {connect} from 'react-redux'
import {Button} from '@material-ui/core'

export const CartItem = product => {
  const {quantity} = product.carts_products

  return (
    <div className="cartListProduct">
      <div>
        <Link to={`/products/${product.id}`}>
          <img style={{height: '40px'}} src={product.imageUrl} />
        </Link>
      </div>
      <React.Fragment>
        {product.name}x {quantity}
      </React.Fragment>
      <Button style={{margin: '.5rem'}} variant="contained" color="primary">
        Qty
      </Button>
      <Button
        style={{margin: '.5rem'}}
        variant="contained"
        color="primary"
        onClick={() => product.deleteProd(product.carts_products)}
      >
        Delete
      </Button>
    </div>
  )
}

const mapDispatch = dispatch => ({
  deleteProd: product => dispatch(deleteProduct(product))
})
export default connect(null, mapDispatch)(CartItem)
