src/components/Catalog/CatalogCard.jsx - master - DevDenzo/DigitalStore

src/components/Catalog/CatalogCard.jsx
70 строк3 KB
Denis Sklyarskij
последние доработки перед релизом
28 ноя 2025, 18:43
28 ноя 2025, 18:436bdaafb
import React, { memo } from 'react';
import { Link } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import { addToCart, removeFromCart } from "../../actions/cartActions";
import PropTypes from 'prop-types';
import { useMediaQuery } from "react-responsive";
import './CatalogCard.css';

const CatalogCard = memo(({ item }) => {
    const isSmall = useMediaQuery({ query: '(max-width: 576px)' });

    const dispatch = useDispatch();

    /* Получаем список товаров в корзине из глобального состояния */
    const cartItems = useSelector(state => state.cart.itemsCart);

    /* Проверяем наличие товара в корзине */
    const isInCart = cartItems.some(cartItem => cartItem.id === item.id);

    const handleAddedToCart = () => {
        dispatch(addToCart(item));
    };

    const handleRemoveFromCart = () => {
        dispatch(removeFromCart(item.id));
    };

    return (
        <div className="catalog-card">
            <img
                src={item.image}
                className="catalog-card__image"
                alt="Изображение товара"
            />
            <div className="catalog-card__body">
                <div className="catalog-card__title">{item.name}</div>
                <div className="catalog-card__text">{item.price}&#8381;</div>
                <div className="catalog-card__actions">
                    <Link
                        to={isInCart ? '/cart': '#'}
                        className={`catalog-card__button ${isInCart ? 'catalog-card__button--added': ''}`}
                        onClick={isInCart ? () => {} : handleAddedToCart}
                    >
                        {isInCart ? (isSmall ? 'В корзину': 'Оформить заказ') : 'Добавить в корзину'}
                    </Link>
                    {isInCart && (
                        <button
                            type="button"
                            className="catalog-card__button catalog-card__button--small"
                            onClick={handleRemoveFromCart}

                        >
                            -
                        </button>
                    )}
                </div>
            </div>
        </div>
    );
});

CatalogCard.propTypes = {
    item: PropTypes.shape({
        image: PropTypes.string.isRequired,
        name: PropTypes.string.isRequired,
        price: PropTypes.number.isRequired
    }).isRequired
};

export default CatalogCard;