web2019/static/js/shop/ProductItem.jsx

import React from 'react';
//import {Draggable} from "@hello-pangea/dnd";
import {useDraggable} from '@dnd-kit/core';
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);

    const {attributes, listeners, setNodeRef, transform} = useDraggable({
        id: card.id,
    });

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


    const render_specs = (card.specs && card.specs.length > 0 && (
        <ul>
            {card.specs.map((spec, index) =>
                <li key={index}>{spec}</li>
            )}
        </ul>
    ));

    const render_datasheet_link = (card.datasheet_file && card.datasheet_name && (
        <div className="ds">
            <span className='doc-icon'></span>
            <a href={card.datasheet_file} target="_blank" rel="noopener noreferrer">
                {card.datasheet_name}
            </a>
        </div>
    ));

    return (
        <section className="productItem">

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

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

                {render_specs}

                {render_datasheet_link}
            </div>

            <div className="content">

                <button onClick={() => onAddCard(null, card_index, null)}>
                    <img src="/images/shop/icon-add.svg" alt="add"/>
                </button>

                <div ref={setNodeRef}  {...listeners} {...attributes}>
                    {(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
                                )}
                                src={card.image}/>

                            {/* Allows to simulate a clone */}
                            {snapshot.isDragging && (
                                <img className="simclone" src={card.image}/>
                            )}
                        </React.Fragment>
                    )}
                </div>

            </div>

        </section>
    );

}