rd-web/src/views/shops/shopCard.js

/* eslint-disable react/prop-types */
import { Button, Card, CardContent, CardMedia, Typography } from '@mui/material'
import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { addToCart, selectIsProductInCart } from '../../redux-store/CartStore/ducs'
import Swal from 'sweetalert2'

// eslint-disable-next-line react/prop-types
const ShopCard = ({ item }) => {
  const dispatch = useDispatch()
  const isProductInCart = useSelector(selectIsProductInCart(item._id))

  const handleAddToCart = () => {
    if (!isProductInCart) {
      dispatch(addToCart(item))
      Swal.fire('Product added to cart ')
    }
  }
  return (
    <div>
      <Card>
        <CardMedia component="img" height="150" image={item?.image} alt={item?.name} />
        <CardContent>
          <Typography gutterBottom variant="h5" component="div">
            {item?.name}
          </Typography>
          <Typography variant="body2" color="text.secondary">
            ${item?.price}
          </Typography>
          <Button
            variant="contained"
            color="primary"
            fullWidth
            disabled={isProductInCart}
            onClick={handleAddToCart}
            sx={{ marginTop: '10px' }}
          >
            {isProductInCart ? 'Already in Cart' : 'Add to Cart'}
          </Button>
        </CardContent>
      </Card>
    </div>
  )
}

export default ShopCard