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

43 lines
1.5 KiB
React
Raw Normal View History

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);
// #!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_type.name}</td>
<td className="price">
<div className="d-inline-flex">
{`${currency} ${formatMoney(crate_type.price)}`}
<button onClick={() => clearCrate(crate_id)}>
<img src="/images/shop/icon-clear.svg" alt="empty crate"/>
</button>
<button onClick={() => delCrate(crate_id)}>
<img src="/images/shop/icon-remove.svg" alt="remove crate"/>
</button>
</div>
</td>
</tr>
)
}