1
0
Fork 0
web2019/static/js/shop/Shop.jsx

71 lines
2.7 KiB
JavaScript

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";
/**
* 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.source.droppableId, drop_result.source.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. Configure the card settings by tapping on the top of
the card; many of the options can be adjusted even after the card has been shipped.
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>
)}
/>
)}>
</Layout>
</DragDropContext>
);
}