web2019/static/js/shop/SummaryCrateCard.jsx

import {compareObjectsEmptiness, formatMoney} from "./utils";
import {WarningIndicator} from "./CardWarnings";
import React from "react";
import {useShopStore} from "./shop_store";
import {OptionsSummaryWrapper} from "./OptionsWrapper";

// #!render_count
import {useRenderCount} from "@uidotdev/usehooks";


export function SummaryCrateCard({crate_index, card_index}) {
    // #!render_count
    const renderCount = useRenderCount();

    const currency = useShopStore((state) => state.currency);
    const deleteCard = useShopStore((state) => state.deleteCard);
    const setHighlight = useShopStore((state) => state.highlightCard);
    const resetHighlight = useShopStore((state) => state.highlightReset);

    const highlighted = useShopStore((state) => state.crates[crate_index].id === state.highlighted.crate && card_index === state.highlighted.card);
    const crate_id = useShopStore((state) => state.crates[crate_index].id);
    const card = useShopStore((state) => state.crates[crate_index].items[card_index],
        (a, b) => a.id === b.id);
    const card_show_warnings = useShopStore(state => state.crates[crate_index].items[card_index].show_warnings, compareObjectsEmptiness);
    const card_options_data = useShopStore(state => state.crates[crate_index].items[card_index].options_data, compareObjectsEmptiness);

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


    const options = card && card.options && card.options.length > 0;
    const options_data = card_options_data && Object.keys(card_options_data).length > 0;
    const warnings = card_show_warnings && card_show_warnings.length > 0;

    return (
        <tr
            key={"summary_crate_" + crate_id + "_" + card_index}
            className={`hoverable ${highlighted ? 'selected' : ''}`}
            onClick={() => setHighlight(crate_id, card_index)}
            onMouseEnter={() => setHighlight(crate_id, card_index)}
            onMouseLeave={() => resetHighlight()}>
            <td className="item-card-name">
                                    <span style={{
                                        'display': 'inline-block',
                                        'width': '16px',
                                    }}>&nbsp;</span>
                <div>{`${card.name_number} ${card.name} ${card.name_codename}`}</div>
            </td>

            <td className="price">
                <div className="d-inline-flex align-content-center">
                    {`${currency} ${formatMoney(card.price)}`}

                    <button onClick={() => deleteCard(crate_id, card_index)}>
                        <img src="/images/shop/icon-remove.svg"/>
                    </button>

                    <div style={{'width': '45px', 'height': '20px'}}
                         className="d-inline-flex align-content-center align-self-center justify-content-evenly">
                        {(warnings ? (
                            <WarningIndicator crate_index={crate_index} card_index={card_index}/>
                        ) : (
                            <span style={{
                                'display': 'inline-block',
                                'width': '20px',
                            }}>&nbsp;</span>
                        ))}
                        {((options && options_data) ? (
                            <OptionsSummaryWrapper crate_index={crate_index} card_index={card_index}/>
                        ) : (
                            <span style={{
                                'display': 'inline-block',
                                'width': '20px',
                            }}>&nbsp;</span>
                        ))}
                    </div>
                </div>
            </td>
        </tr>);
}