import React from 'react'; import {Draggable} from "@hello-pangea/dnd"; import {formatMoney, productStyle} from "./utils"; import {useShopStore} from "./shop_store"; // #!render_count import {useRenderCount} from "@uidotdev/usehooks"; /** * Component that renders a product. * Used in the aside (e.g backlog of product) */ export function ProductItem({card_index}) { // #!render_count const renderCount = useRenderCount(); const getCardDescription = useShopStore((state) => state.getCardDescription); const currency = useShopStore((state) => state.currency); const onAddCard = useShopStore((state) => state.addCardFromBacklog); const card = getCardDescription(card_index); // #!render_count console.log("ProductItem renders: ", renderCount) const render_specs = (card.specs && card.specs.length > 0 && (
{card.name_codename}
) : null}