43 lines
1.4 KiB
JavaScript
43 lines
1.4 KiB
JavaScript
import {range} from "./utils";
|
|
import React from "react";
|
|
import {useShopStore} from "./shop_store";
|
|
import {SummaryCrateHeader} from "./SummaryCrateHeader";
|
|
import {SummaryCrateCard} from "./SummaryCrateCard";
|
|
import {SummaryCratePricedOptions} from "./SummaryCratePricedOptions";
|
|
|
|
// #!render_count
|
|
import {useRenderCount} from "@uidotdev/usehooks";
|
|
|
|
|
|
export function SummaryCrate({crate_index}) {
|
|
// #!render_count
|
|
const renderCount = useRenderCount();
|
|
|
|
const crate_id = useShopStore((state) => state.crates[crate_index].id);
|
|
const crate_len = useShopStore((state) => state.crates[crate_index].items.length);
|
|
const crate_h_len = useShopStore((state) => state.crates[crate_index].h_items.length);
|
|
|
|
// #!render_count
|
|
console.log("SummaryCrate renders: ", renderCount)
|
|
|
|
return (
|
|
<tbody key={"summary_crate_body" + crate_id}>
|
|
|
|
<SummaryCrateHeader crate_index={crate_index}/>
|
|
|
|
{range(0, crate_len).map((index, _i) =>
|
|
<SummaryCrateCard crate_index={crate_index} card_index={index} key={"summary_crate_" + crate_id + "_" +index} />
|
|
)}
|
|
|
|
{range(0, crate_h_len).map((index, _i) =>
|
|
<SummaryCrateCard
|
|
crate_index={crate_index}
|
|
card_index={index}
|
|
horizontal={true}
|
|
key={"summary_crate_h_" + crate_id + "_" +index} />
|
|
)}
|
|
|
|
<SummaryCratePricedOptions crate_index={crate_index}/>
|
|
</tbody>
|
|
)
|
|
} |