web2019/static/js/shop/Crate.jsx

import React from 'react';
import {Cart} from "./Cart";
import {CrateMode} from "./CrateMode";
import {CrateWarnings} from "./CrateWarnings";
import {useShopStore} from "./shop_store";

/**
 * Component that displays the main crate with reminder rules.
 * It includes <Cart> and rules
 */
export function Crate({crate_index}) {
    const {
        onDeleteCrate,
        crate
    } = useShopStore(state => ({
        onDeleteCrate: state.delCrate,
        crate: state.crates[crate_index]
    }))

    return (
        <div className="crate">

            <CrateMode crate_index={crate_index}/>

            <div>
                Delete crate
                <button style={{width: "32px"}} onClick={() => onDeleteCrate(crate.id)}>
                    <img src="/images/shop/icon-remove.svg" alt="remove"/>
                </button>
            </div>

            <div className="crate-products">

                <Cart crate_index={crate_index}/>

                <CrateWarnings crate_index={crate_index} />
            </div>
        </div>
    );

}