import React from 'react' import {Droppable} from "@hello-pangea/dnd"; import {cartStyle, compareArraysWithIds} from "./utils"; import {ProductCartItem} from "./ProductCartItem"; import {FakePlaceholder} from "./FakePlaceholder"; import {FillExtData} from "./options/utils"; import {hp_to_slots} from "./count_resources"; import {useShopStore} from "./shop_store"; // #!render_count import {useRenderCount} from "@uidotdev/usehooks"; /** * Component that displays a list of */ export function Cart({crate_index}) { // #!render_count const renderCount = useRenderCount(); const crate = useShopStore((state) => state.crates[crate_index], (a, b) => { return compareArraysWithIds(a.items, b.items) && a.occupiedHP === b.occupiedHP && a.crate_mode === b.crate_mode }); const crateParams = useShopStore((state) => state.crateParams); // #!render_count console.log("Cart renders: ", renderCount) const nbrOccupied = hp_to_slots(crate.occupiedHP); const nbrSlots = hp_to_slots(crateParams(crate.crate_mode).hp); const products = crate.items.map((item, index) => { const ext_data = FillExtData(crate.items, index); return ( = nbrSlots} key={item.id}/> ); }); return ( {(provided, snapshot) => (
{products} {provided.placeholder && (
{provided.placeholder}
)}
)}
); }