web2019/static/js/shop/ProductItem.jsx

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";


const DNDIcon = "/images/shop/icon-drag-and-drop.svg";

function DatasheetLink({datasheet_file, datasheet_name}) {
    return datasheet_file && datasheet_name && (<div className="ds">
        <span className='doc-icon'></span>
        <a href={datasheet_file} target="_blank" rel="noopener noreferrer">
            {datasheet_name}
        </a>
    </div>)
}

function CardSpecs({specs}) {
    return specs && specs.length > 0 && (<ul>
        {specs.map((spec, index) =>
            <li key={index}>{spec}</li>
        )}
    </ul>)
}

function AddButton({onAdd}) {
    return <button onClick={onAdd}>
        <img src="/images/shop/icon-add.svg" alt="add"/>
    </button>
}

/**
 * Component that renders a product.
 * Used in the aside (e.g catalog of products)
 */
export function ProductItem({card_index}) {
    // #!render_count
    const renderCount = useRenderCount();

    const getCardDescription = useShopStore((state) => state.getCardDescription);
    const currency = useShopStore((state) => state.currency);
    const addCardFromCatalog = useShopStore((state) => state.addCardFromCatalog);
    const card = getCardDescription(card_index);

    // #!render_count
    console.log("ProductItem renders: ", renderCount)

    return (
        <section className="productItem">
            <div className="content">
                <h3 style={{'marginBottom': card.name_codename ? '5px' : '20px'}}>{card.name_number} {card.name}</h3>
                {card.name_codename ? (
                    <p>{card.name_codename}</p>
                ) : null}

                <div className="price">{`${currency} ${formatMoney(card.price)}`}</div>

                <CardSpecs specs={card.specs}/>

                <DatasheetLink datasheet_file={card.datasheet_file} datasheet_name={card.datasheet_name}/>
            </div>

            <div className="content">
                <AddButton onAdd={() => addCardFromCatalog(null, card_index, null)} />

                <Draggable draggableId={card.id + card_index} index={card_index}>
                    {(provided, snapshot) => (
                        <React.Fragment>
                            <img
                                ref={provided.innerRef}
                                {...provided.draggableProps}
                                {...provided.dragHandleProps}
                                style={productStyle(
                                    provided.draggableProps.style,
                                    snapshot,
                                    true,  // hack: remove weird animation after a drop
                                )}
                                className={card.image ? "" : "default-icon"}
                                src={card.image || DNDIcon}/>

                            {/* Allows to simulate a clone */}
                            {snapshot.isDragging && (
                                <img className={"simclone " + (card.image ? "" : "default-icon")} src={card.image || DNDIcon}/>
                            )}
                        </React.Fragment>
                    )}
                </Draggable>
            </div>
        </section>
    );
}