import {formatMoney} from "./utils"; import React from "react"; import {useShopStore} from "./shop_store"; import {ProcessOptionsToData} from "./options/Options"; // #!render_count import {useRenderCount} from "@uidotdev/usehooks"; export function SummaryCratePricedOptions({crate_index}) { // #!render_count const renderCount = useRenderCount(); const currency = useShopStore((state) => state.currency); const crate_id = useShopStore((state) => state.crates[crate_index].id); const optionsPrices = useShopStore((state) => state.crate_prices); const updateOptions = useShopStore((state) => state.updateCrateOptions); const options_data = useShopStore((state) => state.crates[crate_index].options_data || {}); const options = ProcessOptionsToData({options: optionsPrices, data: options_data}); // #!render_count console.log("SummaryCratePricedOptions renders: ", renderCount) return options.map((option, _i) => ( <tr key={"summary_crate_" + crate_id +"option_" + option.id}> <td className="item-card-name tabbed"> <div>{option.title}</div> </td> <td className="price"> <div className="d-inline-flex align-content-center"> {`${currency} ${formatMoney(option.price)}`} <button onClick={() => updateOptions(crate_id, option.disable_patch)}> <img src="/images/shop/icon-remove.svg" className="d-block"/> </button> <div style={{'width': '45px', 'height': '20px'}} className="d-inline"></div> </div> </td> </tr> )); }