diff --git a/static/js/shop/ProductItem.jsx b/static/js/shop/ProductItem.jsx index 872fdb5b..9b429d62 100644 --- a/static/js/shop/ProductItem.jsx +++ b/static/js/shop/ProductItem.jsx @@ -6,9 +6,33 @@ import {useShopStore} from "./shop_store"; // #!render_count import {useRenderCount} from "@uidotdev/usehooks"; + +function DatasheetLink({datasheet_file, datasheet_name}) { + return datasheet_file && datasheet_name && (
+ + + {datasheet_name} + +
) +} + +function CardSpecs({specs}) { + return specs && specs.length > 0 && () +} + +function AddButton({onAdd}) { + return +} + /** * Component that renders a product. - * Used in the aside (e.g catalog of product) + * Used in the aside (e.g catalog of products) */ export function ProductItem({card_index}) { // #!render_count @@ -16,33 +40,14 @@ export function ProductItem({card_index}) { const getCardDescription = useShopStore((state) => state.getCardDescription); const currency = useShopStore((state) => state.currency); - const onAddCard = useShopStore((state) => state.addCardFromCatalog); + const addCardFromCatalog = useShopStore((state) => state.addCardFromCatalog); 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 ? ( @@ -51,16 +56,13 @@ export function ProductItem({card_index}) {
{`${currency} ${formatMoney(card.price)}`}
- {render_specs} + - {render_datasheet_link} +
- - + addCardFromCatalog(null, card_index, null)} /> {(provided, snapshot) => ( @@ -83,10 +85,7 @@ export function ProductItem({card_index}) { )} -
-
); - } \ No newline at end of file