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

src/components/Cart/Cart.jsx
95 строк4 KB
Denis Sklyarskij
выполнен функционал сохранения состояния корзины при перезагрузке
30 ноя 2025, 12:10
30 ноя 2025, 12:10c93532c
import React, { useEffect } from 'react';
import { selectItem, selectAll, loadCart } from "../../actions/cartActions";
import { useSelector, useDispatch } from 'react-redux';
import { OrderTable } from "./index";
import { OrderList } from "./index";
import { OrderSelectAll } from "./index";
import { CartSummary } from "./index";
import { useMediaQuery } from "react-responsive";
import './Cart.css';

const Cart = () => {
    const dispatch = useDispatch();

    /* Восстанавливаем корзину из localStorage */
    useEffect(() => {
        const currentCart = localStorage.getItem('cartItems');
        if (currentCart) {
            const savedCart = JSON.parse(currentCart);
            dispatch(loadCart(savedCart))
        }
    }, [dispatch]);

    /* Получаем список товаров из хранилища */
    const cartItems = useSelector(state => state.cart.itemsCart);
    /* Получаем состояние товаров в корзине */
    const selectedItems = useSelector(state => state.cart.selectedItems);
    /* Получаем массив идентификаторов товаров из корзины */
    const allItemsIds = cartItems.map(item => item.id);

    /* При изменениях сохраняем корзину в localStorage */
    useEffect(() => {
        if (cartItems.length > 0) {
            localStorage.setItem('cartItems', JSON.stringify(cartItems));
        } else {
            localStorage.removeItem('cartItems');
        }
    }, [cartItems]);

    /* Эффект для инициализации состояния товаров в корзине */
    useEffect(() => {
        if (cartItems.length > 0) {
            dispatch(selectAll(true));
        }
    }, [cartItems.length, dispatch]);

    /* Контрольная точка для шаблона пустой корзины */
    const isXLarge = useMediaQuery({ query: `(max-width: 1024px)` });
    /* Чекпоинт для корзины с товарами */
    const isLarge = useMediaQuery({ query: `(min-width: 992px)` });

    /* Выводим "Корзина пуста" если массив cartItems пуст */
    if (cartItems.length === 0) {
        return (
            <div className={`cart-layout ${!isXLarge ? 'cart-layout--centered' : ''}`}>
                <h1 className="cart-layout__title">Корзина пуста</h1>
                <span className={`cart-layout__text ${isXLarge ? 'cart-layout__text--limited-width' : ''}`}>
                    Перейдите в каталог, чтобы выбрать понравившиеся товары.
                </span>
            </div>
        );
    }

    /* Обработчик изменения чекбокса */
    const handleCheckboxChange = (itemId, isChecked) => {
        dispatch(selectItem(itemId, isChecked));
    };

    /* Обработчик мастер чекбокса, если нужно "Выбрать все / Снять все" */
    const handleSelectAll = () => {
        const allSelected = Object.values(selectedItems).every(item => item === true);
        dispatch(selectAll(!allSelected));
    };

    return (
        <div className="cart-layout">
            <h1 className="cart-layout__title">Корзина</h1>
            {/* Мастер чекбокс */}
            <OrderSelectAll
                itemsIds={allItemsIds}
                onSelectAll={handleSelectAll}
            />
            <h2 className="cart-layout__subtitle">Доступны для заказа</h2>
            {/* Выводим таблицу на десктопе, а список - на мобильных экранах */}
            {isLarge ? (
                <OrderTable onInputChange={handleCheckboxChange} />
            ): (
                <OrderList onInputChange={handleCheckboxChange} />
            )}
            {/* Фрагмент с подсчетом итоговой суммы заказа */}
            <CartSummary />
        </div>
    );
};

export default Cart;