web2019/static/js/shop/Shop.jsx

import React, {useEffect} from 'react';
import {DragDropContext} from "@hello-pangea/dnd";

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


import {Layout} from "./Layout";
import {Backlog} from "./Backlog";
import {OrderPanel} from "./OrderPanel";
import {useShopStore} from "./shop_store";
import {Legend} from "./Legend";

/**
 * Component that renders the entire shop
 */

export function Shop() {
    // #!render_count
    const renderCount = useRenderCount();

    const addCardFromBacklog = useShopStore((state) => state.addCardFromBacklog);
    const moveCard = useShopStore((state) => state.moveCard);
    const deleteCard = useShopStore((state) => state.deleteCard);
    const cardIndexById = useShopStore((state) => state.cardIndexById);

    const handleOnDragEnd = (drop_result, _provided) => {
        if (!drop_result.destination) {
            console.warn("No drop destination");
            return;
        }
        if (drop_result.source.droppableId === "backlog")
            addCardFromBacklog(drop_result.destination.droppableId, drop_result.source.index, drop_result.destination.index);
        else if (drop_result.destination.droppableId === "backlog")
            deleteCard(drop_result.destination.droppableId, drop_result.destination.index);
        else
            moveCard(drop_result.source.droppableId, drop_result.source.index, drop_result.destination.droppableId, drop_result.destination.index)
    }

    useEffect(() => {
        addCardFromBacklog(null, [cardIndexById("eem_pwr_mod"), cardIndexById("kasli")], -1, true);
    }, []);

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

    return (
        <DragDropContext onDragEnd={handleOnDragEnd}>
            <Layout
                aside={
                    <Backlog/>
                }
                main={(
                    <OrderPanel
                        title="Order hardware"
                        description={(
                            <p className="description">Drag and drop the cards you want into the crate below to see how
                                the combination would look like. Setup card's configuration by tapping at the top of the
                                card, most of the options can be modified after shipment. If you have any issues with
                                this ordering system, or if you need other configurations, email us directly anytime
                                at <a href="mailto:sales@m-labs.hk">sales@m-labs.hk</a>. The price is estimated and must
                                be confirmed by a quote.</p>)}
                        legend={(<Legend/>)}
                    />
                )}>
            </Layout>
        </DragDropContext>
    );

}