53 lines
2.0 KiB
JavaScript
53 lines
2.0 KiB
JavaScript
import {formatMoney} from "./utils";
|
|
import React from "react";
|
|
import {useShopStore} from "./shop_store";
|
|
|
|
// #!render_count
|
|
import {useRenderCount} from "@uidotdev/usehooks";
|
|
|
|
export function SummaryCrateHeader({crate_index}) {
|
|
// #!render_count
|
|
const renderCount = useRenderCount();
|
|
|
|
const currency = useShopStore((state) => state.currency);
|
|
const crateParams = useShopStore((state) => state.crateParams);
|
|
const clearCrate = useShopStore((state) => state.clearCrate);
|
|
const delCrate = useShopStore((state) => state.delCrate);
|
|
|
|
const crate_mode = useShopStore((state) => state.crates[crate_index].crate_mode);
|
|
const crate_id = useShopStore((state) => state.crates[crate_index].id);
|
|
const crate_name = useShopStore((state) => state.crates[crate_index].name);
|
|
const modes_order = useShopStore((state) => state.modes_order);
|
|
const crate_mode_displayed = modes_order.includes(crate_mode);
|
|
|
|
|
|
// #!render_count
|
|
console.log("SummaryCrateHeader renders: ", renderCount)
|
|
|
|
let crate_type = crateParams(crate_mode);
|
|
|
|
return (
|
|
<tr key={"summary_crate_" + crate_id}>
|
|
<td className="item-card-name">{!!crate_name ? crate_name : crate_type.name + " #" + crate_index}</td>
|
|
<td className="price">
|
|
<div className="d-inline-flex">
|
|
|
|
{crate_mode_displayed && `${currency} ${formatMoney(crate_type.price)}`}
|
|
|
|
<button onClick={() => clearCrate(crate_id)}>
|
|
<img src="/images/shop/icon-clear.svg" alt="empty crate"/>
|
|
</button>
|
|
|
|
{
|
|
crate_mode_displayed ? (
|
|
<button onClick={() => delCrate(crate_id)}>
|
|
<img src="/images/shop/icon-remove.svg" alt="remove crate"/>
|
|
</button>
|
|
) : <span className="span-with-margin"></span>
|
|
}
|
|
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
)
|
|
} |