forked from M-Labs/web2019
54 lines
2.2 KiB
JavaScript
54 lines
2.2 KiB
JavaScript
import React, {useEffect} from 'react';
|
|
import {DragDropContext} from "@hello-pangea/dnd";
|
|
|
|
|
|
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() {
|
|
const {addCardFromBacklog, moveCard, deleteCard, cardIndexById} = useShopStore(state => ({
|
|
addCardFromBacklog: state.addCardFromBacklog,
|
|
moveCard: state.moveCard,
|
|
deleteCard: state.deleteCard,
|
|
cardIndexById: 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);
|
|
}, []);
|
|
|
|
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>)}
|
|
/>
|
|
)}>
|
|
</Layout>
|
|
</DragDropContext>
|
|
);
|
|
|
|
} |