import React from 'react'; import {Cart} from "./Cart"; import {CrateMode} from "./CrateMode"; import {CrateWarnings} from "./CrateWarnings"; import {useShopStore} from "./shop_store"; import {CrateOptions} from "./CrateOptions"; // #!render_count import {useRenderCount} from "@uidotdev/usehooks"; /** * Component that displays the main crate with reminder rules. * It includes <Cart> and rules */ export function Crate({crate_index}) { // #!render_count const renderCount = useRenderCount(); const crate = useShopStore((state) => state.crates[crate_index], (a, b) => a.length === b.length && a.id === b.id); const modes_order = useShopStore((state) => state.modes_order); const onDeleteCrate = useShopStore((state) => state.delCrate); // #!render_count console.log("Crate renders: ", renderCount) return ( <div className="crate"> { modes_order.includes(crate.crate_mode) ? ( <div className="crate-bar d-inline-flex justify-content-between"> <CrateMode crate_index={crate_index}/> <div className="delete-crate align-self-start align-content-start justify-content-end" onClick={() => onDeleteCrate(crate.id)}> Delete crate <img src="/images/shop/icon-remove.svg" alt="remove"/> </div> </div> ) : <></> } <div className="crate-products"> <Cart crate_index={crate_index}/> <CrateWarnings crate_index={crate_index} /> <CrateOptions crate_index={crate_index}/> </div> </div> ); }