forked from M-Labs/web2019
53 lines
1.7 KiB
JavaScript
53 lines
1.7 KiB
JavaScript
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>
|
|
);
|
|
|
|
} |