src/components/Cart/OrderTable.jsx - master - DevDenzo/DigitalStore

src/components/Cart/OrderTable.jsx
67 строк2 KB
Denis Sklyarskij
Финальный коммит
29 ноя 2025, 18:05
29 ноя 2025, 18:05c8d7804
import React, { memo } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { removeFromCart } from "../../actions/cartActions";
import { v4 as uuidv4 } from 'uuid';
import { ItemOrderCard } from './index';
import PropTypes from 'prop-types';
import './OrderTable.css';

const OrderTable = memo(({ onInputChange }) => {
    const dispatch = useDispatch();

    /* Товары из покупательской корзины */
    const cartItems = useSelector(state => state.cart.itemsCart);
    const selectedItems = useSelector(state => state.cart.selectedItems);

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

    return (
        <table className="order-table">
            <thead className="order-table__thead">
                <tr className="order-table__tr">
                    <th className="order-table__th">Наименование</th>
                    <th className="order-table__th">Цена</th>
                    <th className="order-table__th">Опции</th>
                </tr>
            </thead>
            <tbody className="order-table__body">
                {cartItems.map((item) => (
                    <tr
                        key={`${item.id}-${uuidv4()}`}
                        className="order-table__tr"
                    >
                        <td className="order-table__td">
                            <ItemOrderCard
                                item={item}
                                onHandleChange={onInputChange}
                                checked={selectedItems[item.id]}
                            />
                        </td>
                        <td className="order-table__td">
                            <span className="order-table__cell-text">
                               {item.price}
                            </span>
                        </td>
                        <td className="order-table__td">
                            <button
                                type="button"
                                className="order-table__button"
                                onClick={() => handleRemoveFromCart(item)}
                            >
                                Убрать
                            </button>
                        </td>
                    </tr>
                ))}
            </tbody>
        </table>
    );
});

OrderTable.propTypes = {
    onInputChange: PropTypes.func.isRequired
};

export default OrderTable;