1
0
Fork 0
web2019/static/js/shop/Crate.jsx

46 lines
1.3 KiB
JavaScript

import React from 'react';
import {Cart} from "./Cart";
import {CrateMode} from "./CrateMode";
import {CrateWarnings} from "./CrateWarnings";
import {useShopStore} from "./shop_store";
// #!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);
const onDeleteCrate = useShopStore((state) => state.delCrate);
// #!render_count
console.log("Crate renders: ", renderCount)
return (
<div className="crate">
<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} />
</div>
</div>
);
}