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 && ( )); const render_datasheet_link = (card.datasheet_file && card.datasheet_name && (
{card.datasheet_name}
)); return (

{card.name_number} {card.name}

{card.name_codename ? (

{card.name_codename}

) : null}
{`${currency} ${formatMoney(card.price)}`}
{render_specs} {render_datasheet_link}
{(provided, snapshot) => ( {/* Allows to simulate a clone */} {snapshot.isDragging && ( )} )}
); }