45 lines
1.6 KiB
React
45 lines
1.6 KiB
React
|
import {formatMoney} from "./utils";
|
||
|
|
import React from "react";
|
||
|
|
import {useShopStore} from "./shop_store";
|
||
|
|
|
||
|
|
// #!render_count
|
||
|
|
import {useRenderCount} from "@uidotdev/usehooks";
|
||
|
|
|
||
|
|
|
||
|
|
export function SummaryCrateFanTray({crate_index}) {
|
||
|
|
// #!render_count
|
||
|
|
const renderCount = useRenderCount();
|
||
|
|
|
||
|
|
const currency = useShopStore((state) => state.currency);
|
||
|
|
const fanTray = useShopStore((state) => state.fanTray);
|
||
|
|
const crate_id = useShopStore((state) => state.crates[crate_index].id);
|
||
|
|
const fanTrayAvailable = useShopStore((state) => state.fanTrayAvailableByIndex(crate_index));
|
||
|
|
const fanTrayEnabled = useShopStore((state) => state.crates[crate_index].fan_tray);
|
||
|
|
const updateFanTray = useShopStore((state) => state.updateFanTrayOption);
|
||
|
|
|
||
|
|
|
||
|
|
// #!render_count
|
||
|
|
console.log("SummaryCrateCard renders: ", renderCount)
|
||
|
|
|
||
|
|
return (fanTrayAvailable && fanTrayEnabled) ? (<tr
|
||
|
|
key={"summary_crate_" + crate_id + "_fan_tray"}>
|
||
|
|
<td className="item-card-name">
|
||
|
|
<span style={{
|
||
|
|
'display': 'inline-block', 'width': '16px',
|
||
|
|
}}> </span>
|
||
|
|
<div>{fanTray.optionTitle}</div>
|
||
|
|
</td>
|
||
|
|
|
||
|
|
<td className="price">
|
||
|
|
<div className="d-inline-flex align-content-center">
|
||
|
|
{`${currency} ${formatMoney(fanTray.price)}`}
|
||
|
|
|
||
|
|
<button onClick={() => updateFanTray(crate_id, false)}>
|
||
|
|
<img src="/images/shop/icon-remove.svg" className="d-block"/>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<div style={{'width': '45px', 'height': '20px'}} className="d-inline"></div>
|
||
|
|
</div>
|
||
|
|
</td>
|
||
|
|
</tr>) : null;
|
||
|
|
}
|