Try make wrappers

Signed-off-by: Egor Savkin <es@m-labs.hk>

static/js/shop/Backlog.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
-//import {Droppable} from "@hello-pangea/dnd";
-import {useDroppable} from '@dnd-kit/core';
+import {Droppable} from './dnd/Droppable';
 import {ProductItem} from "./ProductItem";
 import {useShopStore} from "./shop_store";
 // #!render_count
@@ -18,10 +17,6 @@ export function Backlog() {
     const onClickToggleMobileSideMenu = useShopStore((state) => state.switchSideMenu);
     const isMobile = useShopStore((state) => state.isMobile);
 
-    const {setNodeRef} = useDroppable({
-        id: data.id,
-    });
-
     // #!render_count
     console.log("Backlog renders: ", renderCount)
 
@@ -57,7 +52,9 @@ export function Backlog() {
     );
 
     return (
-        <div ref={setNodeRef}>
+        <Droppable
+            droppableId={data.id}
+            isDropDisabled={false}>
 
             {(provided) => (
                 <div
@@ -85,7 +82,7 @@ export function Backlog() {
                 </div>
             )}
 
-        </div>
+        </Droppable>
     );
 
 }

static/js/shop/Cart.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
-//import {Droppable} from "@hello-pangea/dnd";
-import {useDroppable} from '@dnd-kit/core';
+import {Droppable} from './dnd/Droppable';
 import {cartStyle, compareArraysWithIds} from "./utils";
 import {ProductCartItem} from "./ProductCartItem";
 import {FakePlaceholder} from "./FakePlaceholder";
@@ -23,10 +22,6 @@ export function Cart({crate_index}) {
     });
     const crateParams = useShopStore((state) => state.crateParams);
 
-    const {setNodeRef} = useDroppable({
-        id: crate.id,
-    });
-
     // #!render_count
     console.log("Cart renders: ", renderCount)
 
@@ -47,7 +42,7 @@ export function Cart({crate_index}) {
     });
 
     return (
-        <div ref={setNodeRef}>
+        <Droppable droppableId={crate.id} direction="horizontal">
 
             {(provided, snapshot) => (
                 <div
@@ -73,6 +68,6 @@ export function Cart({crate_index}) {
                 </div>
             )}
 
-        </div>
+        </Droppable>
     );
 }

static/js/shop/ProductCartItem.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 //import {Draggable} from "@hello-pangea/dnd";
-import {useDraggable} from '@dnd-kit/core';
+import {Draggable} from './dnd/Draggable';
 import {compareObjectsEmptiness, productStyle} from "./utils";
 import {Resources} from "./Resources";
 import {CardWarnings} from "./CardWarnings";
@@ -32,10 +32,6 @@ export function ProductCartItem({card_index, crate_index, first, last}) {
     const removeHighlight = useShopStore((state) => state.highlightReset);
     const onCardRemove = useShopStore((state) => state.deleteCard);
 
-    const {attributes, listeners, setNodeRef, transform} = useDraggable({
-        id: card.id,
-    });
-
     // #!render_count
     console.log("ProductCartItem renders: ", renderCount)
 
@@ -45,7 +41,7 @@ export function ProductCartItem({card_index, crate_index, first, last}) {
     const resources = !options_disabled && card_counted_resources && card_counted_resources.length > 0;
 
     return (
-        <div ref={setNodeRef}  {...listeners} {...attributes}>
+        <Draggable draggableId={card.id} index={card_index}>
 
             {(provided, snapshot) => (
                 <div
@@ -115,6 +111,6 @@ export function ProductCartItem({card_index, crate_index, first, last}) {
                 </div>
             )}
 
-        </div>
+        </Draggable>
     );
 }

static/js/shop/ProductItem.jsx

@@ -1,6 +1,5 @@
 import React from 'react';
-//import {Draggable} from "@hello-pangea/dnd";
-import {useDraggable} from '@dnd-kit/core';
+import {Draggable} from './dnd/Draggable';
 import {formatMoney, productStyle} from "./utils";
 import {useShopStore} from "./shop_store";
 
@@ -20,10 +19,6 @@ export function ProductItem({card_index}) {
     const onAddCard = useShopStore((state) => state.addCardFromBacklog);
     const card = getCardDescription(card_index);
 
-    const {attributes, listeners, setNodeRef, transform} = useDraggable({
-        id: card.id,
-    });
-
     // #!render_count
     console.log("ProductItem renders: ", renderCount)
 
@@ -67,7 +62,7 @@ export function ProductItem({card_index}) {
                     <img src="/images/shop/icon-add.svg" alt="add"/>
                 </button>
 
-                <div ref={setNodeRef}  {...listeners} {...attributes}>
+                <Draggable draggableId={card.id} index={card_index}>
                     {(provided, snapshot) => (
                         <React.Fragment>
                             <img
@@ -87,7 +82,7 @@ export function ProductItem({card_index}) {
                             )}
                         </React.Fragment>
                     )}
-                </div>
+                </Draggable>
 
             </div>
 

static/js/shop/dnd/Draggable.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import {useDraggable} from '@dnd-kit/core';
+
+export function Draggable(props) {
+    const Element = props.element || 'div';
+    const {attributes, listeners, setNodeRef} = useDraggable({
+        id: props.id,
+    });
+
+    return (
+        <Element ref={setNodeRef} {...listeners} {...attributes}>
+            {props.children}
+        </Element>
+    );
+}

static/js/shop/dnd/Droppable.jsx

@@ -0,0 +1,14 @@
+import {useDroppable} from '@dnd-kit/core';
+import React from 'react'
+
+export function Droppable(props) {
+    const {setNodeRef} = useDroppable({
+        id: props.id,
+    });
+
+    return (
+        <div ref={setNodeRef}>
+            {props.children}
+        </div>
+    );
+}