- MAJOR DND PROGRESS UPDATE

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/components/trello-board/controllers/BoardContainer.jsx

@@ -1,7 +1,11 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import Container from "../dnd/Container";
-import Draggable from "../dnd/Draggable";
+
+// import Container from "../dnd/Container";
+// import Draggable from "../dnd/Draggable";
+
+import { DragDropContext } from "../dnd/lib";
+
 import PropTypes from "prop-types";
 import pick from "lodash/pick";
 import isEqual from "lodash/isEqual";
@@ -151,6 +155,10 @@ const BoardContainer = ({
     [dispatch, handleLaneDragEnd]
   );
 
+  const onDragEnd = (...params) => {
+    console.dir(params);
+  };
+
   const getCardDetails = useCallback(
     (laneId, cardIndex) => {
       return currentReducerData.lanes.find((lane) => lane.id === laneId).cards[cardIndex];
@@ -239,22 +247,25 @@ const BoardContainer = ({
     ]
   );
 
+  let cardIndex = 0;
+
   return (
     <components.BoardWrapper style={style} orientation={orientation} draggable={false}>
       <PopoverWrapper>
-        <Container
-          orientation={orientation === "vertical" ? "vertical" : "horizontal"}
-          onDragStart={onDragStart}
-          dragClass={laneDragClass}
-          dropClass={laneDropClass}
-          onDrop={onLaneDrop}
-          lockAxis={orientation === "vertical" ? "y" : "x"}
-          getChildPayload={(index) => getLaneDetails(index)}
-          groupName={groupName}
+        <DragDropContext
+          onDragEnd={onDragEnd}
+          // orientation={orientation === "vertical" ? "vertical" : "horizontal"}
+          // onDragStart={onDragStart}
+          // dragClass={laneDragClass}
+          // dropClass={laneDropClass}
+          // onDrop={onLaneDrop}
+          // lockAxis={orientation === "vertical" ? "y" : "x"}
+          // getChildPayload={(index) => getLaneDetails(index)}
+          // groupName={groupName}
         >
           {currentReducerData.lanes.map((lane, index) => {
             const { id, droppable, ...laneOtherProps } = lane;
-            const laneToRender = (
+            return (
               <Lane
                 key={id}
                 boardId={groupName}
@@ -269,21 +280,21 @@ const BoardContainer = ({
                 editable={editable && !lane.disallowAddingCard}
                 {...laneOtherProps}
                 {...passThroughProps}
+                cards={lane.cards.map((card) => ({ ...card, idx: cardIndex++ }))}
               />
             );
-            return draggable || laneDraggable ? <Draggable key={lane.id}>{laneToRender}</Draggable> : laneToRender;
           })}
-        </Container>
+        </DragDropContext>
       </PopoverWrapper>
-      {canAddLanes && (
-        <Container orientation={orientation === "vertical" ? "vertical" : "horizontal"}>
-          {editable && !addLaneMode ? (
-            <components.NewLaneSection onClick={showEditableLane} />
-          ) : (
-            addLaneMode && <components.NewLaneForm onCancel={hideEditableLane} onAdd={addNewLane} />
-          )}
-        </Container>
-      )}
+      {/*{canAddLanes && (*/}
+      {/*  <Container orientation={orientation === "vertical" ? "vertical" : "horizontal"}>*/}
+      {/*    {editable && !addLaneMode ? (*/}
+      {/*      <components.NewLaneSection onClick={showEditableLane} />*/}
+      {/*    ) : (*/}
+      {/*      addLaneMode && <components.NewLaneForm onCancel={hideEditableLane} onAdd={addNewLane} />*/}
+      {/*    )}*/}
+      {/*  </Container>*/}
+      {/*)}*/}
     </components.BoardWrapper>
   );
 };