forked from M-Labs/web2019
78 lines
2.9 KiB
JavaScript
78 lines
2.9 KiB
JavaScript
import React, {useEffect} from 'react';
|
|
//import {DragDropContext} from "@hello-pangea/dnd";
|
|
import {DndContext, useSensor, useSensors, TouchSensor, MouseSensor} from "@dnd-kit/core";
|
|
|
|
// #!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 mouseSensor = useSensor(MouseSensor);
|
|
const touchSensor = useSensor(TouchSensor);
|
|
const sensors = useSensors(
|
|
mouseSensor,
|
|
touchSensor,
|
|
);
|
|
|
|
const handleOnDragEnd = (event) => {
|
|
console.log(event);
|
|
|
|
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 (
|
|
<DndContext sensors={sensors} 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>
|
|
</DndContext>
|
|
);
|
|
|
|
} |