web2019/static/js/shop/OptionsWrapper.jsx

import {DialogPopup} from "./options/DialogPopup";
import React from "react";
import {useShopStore} from "./shop_store";
import {SummaryPopup} from "./options/SummaryPopup";

export function OptionsDialogWrapper({crate_index, card_index, first, last}) {
    const crate_id = useShopStore((state) => state.crates[crate_index].id);
    const options = useShopStore((state) => state.crates[crate_index].items[card_index].options);
    const options_data = useShopStore((state) => state.crates[crate_index].items[card_index].options_data);
    const card_size = useShopStore((state) => state.crates[crate_index].items[card_index].size);
    const card_id = useShopStore((state) => state.crates[crate_index].items[card_index].id);
    const options_class = useShopStore((state) => state.crates[crate_index].items[card_index].options_class);
    const sideMenuIsOpen = useShopStore((state) => state.sideMenuIsOpen);
    const _notificationTimer = useShopStore((state) => state.notificationTimer);
    const hideNotification = useShopStore((state) => state.hideNotification);
    //const notificationCardIndex = useShopStore((state) => state.notificationCardIndex);
    //const displayNotification = notificationCrateId === crate_id && notificationCardIndex === card_index;
    const displayNotification = useShopStore((state) =>  
        state.notificationCrateId === crate_id &&
        (state.notificationCardIndex === card_index || (state.crates[crate_index].items.length + (state.notificationCardIndex || -1)) === card_index));

    const onOptionsUpdate = useShopStore((state) => state.updateOptions);

    return (
        <DialogPopup
            options={options}
            data={options_data}
            options_class={options_class}
            key={"popover" + crate_id +card_id}
            id={"popover"+ crate_id + card_id}
            big={card_size === "big"}
            first={first}
            last={last}
            sideMenuIsOpen={sideMenuIsOpen}
            onHideNotification={hideNotification}
            displayNotification={displayNotification}
            target={{
                construct: ((outvar, value) => {
                    // #!options_log
                    console.log("construct", outvar, value, options_data);

                    options_data[outvar] = value;
                }),
                update: ((outvar, value) => {
                    // #!options_log
                    console.log("update", outvar, value, options_data);

                    if (outvar in options_data) options_data[outvar] = value;
                    onOptionsUpdate(crate_id, card_index, {[outvar]: value});
                })
            }}
        />
    )
}

export function OptionsSummaryWrapper({crate_index, card_index}) {
    const card_id = useShopStore((state) => state.crates[crate_index].items[card_index].id);
    const options = useShopStore((state) => state.crates[crate_index].items[card_index].options);
    const options_data = useShopStore((state) => state.crates[crate_index].items[card_index].options_data);

    return (
        <SummaryPopup id={card_id + "options"} options={options}
                      data={options_data}/>
    )
}