web2019/static/js/shop/SummaryCrateCard.jsx

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

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


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

    const whichH = whichItems(horizontal);

    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.highlighted.horizontal === horizontal &&
        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][whichH][card_index],
        (a, b) => a.id === b.id);
    // additional hooks for updating warning and options
    const card_show_warnings = useShopStore(state =>
            state.crates[crate_index][whichH][card_index].show_warnings,
        compareObjectsEmptiness);
    const card_options_data = useShopStore(state =>
            state.crates[crate_index][whichH][card_index].options_data,
        compareObjectsEmptiness);
    const warnings_disabled = useShopStore((state) => !!state.crateParams(state.crates[crate_index].crate_mode).warnings_disabled);
    const use_options = useShopStore((state) => state.crateParams(state.crates[crate_index].crate_mode).options);

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


    const options = use_options && card && card[use_options] && card[use_options].length > 0;
    const options_data = card_options_data && Object.keys(card_options_data).length > 0;
    const warnings = !warnings_disabled && 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, horizontal)}
            onMouseEnter={() => setHighlight(crate_id, card_index, horizontal)}
            onMouseLeave={() => resetHighlight()}>
            <td className="item-card-name tabbed">
                <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, horizontal)}>
                        <img src="/images/shop/icon-remove.svg" className="d-block"/>
                    </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',
                                'minWidth': '20px',
                            }}>&nbsp;</span>
                        ))}
                        {((options && options_data) ? (
                            <OptionsSummaryWrapper
                                crate_index={crate_index}
                                card_index={card_index}
                                horizontal={horizontal}/>
                        ) : (
                            <span style={{
                                'display': 'inline-block',
                                'width': '20px',
                            }}>&nbsp;</span>
                        ))}
                    </div>
                </div>
            </td>
        </tr>);
}