- Begin to integrate DND with trello

- Resolve all ESLint issues in DND

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

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

@@ -4,7 +4,7 @@ import { useDispatch, useSelector } from "react-redux";
 // import Container from "../dnd/Container";
 // import Draggable from "../dnd/Draggable";
 
-import { DragDropContext } from "../dnd/lib";
+import { DragDropContext, Droppable } from "../dnd/lib";
 
 import PropTypes from "prop-types";
 import pick from "lodash/pick";
@@ -23,9 +23,6 @@ import * as actions from "../../../redux/trello/trello.actions.js";
  * @param {Object} props.components - Custom components to use in the board
  * @param {Object} props.data - The initial data for the board
  * @param {boolean} props.draggable - Whether the board is draggable
- * @param {boolean} props.laneDraggable - Whether the lanes in the board are draggable
- * @param {string} props.laneDragClass - The CSS class to apply when a lane is being dragged
- * @param {string} props.laneDropClass - The CSS class to apply when a lane is dropped
  * @param {Object} props.style - The CSS styles to apply to the board
  * @param {Function} props.onDataChange - Callback function when the board data changes
  * @param {Function} props.onCardAdd - Callback function when a card is added
@@ -38,14 +35,13 @@ import * as actions from "../../../redux/trello/trello.actions.js";
  * @param {Function} props.onLaneAdd - Callback function when a lane is added
  * @param {Function} props.onLaneDelete - Callback function when a lane is deleted
  * @param {Function} props.onLaneUpdate - Callback function when a lane is updated
+ * @param {Function} props.onDragEnd - Callback function when a drag ends
  * @param {boolean} props.editable - Whether the board is editable
  * @param {boolean} props.canAddLanes - Whether lanes can be added to the board
  * @param {Object} props.laneStyle - The CSS styles to apply to the lanes
  * @param {Function} props.onCardMoveAcrossLanes - Callback function when a card is moved across lanes
  * @param {string} props.orientation - The orientation of the board ("horizontal" or "vertical")
  * @param {Function} props.eventBusHandle - Function to handle events from the event bus
- * @param {Function} props.handleLaneDragStart - Callback function when a lane drag starts
- * @param {Function} props.handleLaneDragEnd - Callback function when a lane drag ends
  * @param {Object} props.reducerData - The initial data for the Redux reducer
  * @param {Object} props.cardStyle - The CSS styles to apply to the cards
  * @param {Object} props.otherProps - Any other props to pass to the board
@@ -56,9 +52,6 @@ const BoardContainer = ({
   components,
   data,
   draggable = false,
-  laneDraggable = true,
-  laneDragClass = "react_trello_dragLaneClass",
-  laneDropClass = "react_trello_dragLaneDropClass",
   style,
   onDataChange = () => {},
   onCardAdd = () => {},
@@ -71,14 +64,13 @@ const BoardContainer = ({
   onLaneAdd = () => {},
   onLaneDelete = () => {},
   onLaneUpdate = () => {},
+  onDragEnd = () => {},
   editable = false,
   canAddLanes = false,
   laneStyle,
   onCardMoveAcrossLanes = () => {},
   orientation = "horizontal",
   eventBusHandle,
-  handleLaneDragStart = () => {},
-  handleLaneDragEnd = () => {},
   reducerData,
   cardStyle,
   ...otherProps
@@ -138,26 +130,38 @@ const BoardContainer = ({
     }
   }, [currentReducerData, reducerData, onDataChange]);
 
-  const onDragStart = useCallback(
-    ({ payload }) => {
-      handleLaneDragStart(payload.id);
-    },
-    [handleLaneDragStart]
-  );
+  /**
+   * onDragUpdate
+   * @param draggableId
+   * @param type
+   * @param source
+   * @param mode
+   * @param combine
+   * @param destination
+   */
+  const onDragUpdate = ({ draggableId, type, source, mode, combine, destination }) => {};
 
-  const onLaneDrop = useCallback(
-    ({ removedIndex, addedIndex, payload }) => {
-      if (removedIndex !== addedIndex) {
-        dispatch(actions.moveLane({ oldIndex: removedIndex, newIndex: addedIndex }));
-        handleLaneDragEnd(removedIndex, addedIndex, payload);
-      }
-    },
-    [dispatch, handleLaneDragEnd]
-  );
+  /**
+   * onDragStart
+   * @type {(function({draggableId: *, type: *, source: *, mode: *}): void)|*}
+   */
+  const onDragStart = useCallback(({ draggableId, type, source, mode }) => {}, []);
 
-  const onDragEnd = (...params) => {
-    console.dir(params);
-  };
+  /**
+   * onBeforeDragStart
+   * @param draggableId
+   * @param type
+   * @param source
+   * @param mode
+   */
+  const onBeforeDragStart = ({ draggableId, type, source, mode }) => {};
+
+  /**
+   * onBeforeCapture
+   * @param draggableId
+   * @param mode
+   */
+  const onBeforeCapture = ({ draggableId, mode }) => {};
 
   const getCardDetails = useCallback(
     (laneId, cardIndex) => {
@@ -166,13 +170,6 @@ const BoardContainer = ({
     [currentReducerData]
   );
 
-  const getLaneDetails = useCallback(
-    (index) => {
-      return currentReducerData.lanes[index];
-    },
-    [currentReducerData]
-  );
-
   const hideEditableLane = () => {
     setAddLaneMode(false);
   };
@@ -193,9 +190,6 @@ const BoardContainer = ({
       components,
       data,
       draggable,
-      laneDraggable,
-      laneDragClass,
-      laneDropClass,
       style,
       onDataChange,
       onCardAdd,
@@ -214,8 +208,6 @@ const BoardContainer = ({
       onCardMoveAcrossLanes,
       orientation,
       eventBusHandle,
-      handleLaneDragStart,
-      handleLaneDragEnd,
       reducerData,
       cardStyle,
       ...otherProps
@@ -233,7 +225,6 @@ const BoardContainer = ({
       "onLaneClick",
       "laneSortFunction",
       "draggable",
-      "laneDraggable",
       "cardDraggable",
       "collapsibleLanes",
       "canAddLanes",
@@ -254,14 +245,12 @@ const BoardContainer = ({
       <PopoverWrapper>
         <DragDropContext
           onDragEnd={onDragEnd}
-          // orientation={orientation === "vertical" ? "vertical" : "horizontal"}
-          // onDragStart={onDragStart}
-          // dragClass={laneDragClass}
-          // dropClass={laneDropClass}
-          // onDrop={onLaneDrop}
-          // lockAxis={orientation === "vertical" ? "y" : "x"}
+          onDragUpdate={onDragUpdate}
+          onDragStart={onDragStart}
+          onBeforeDragStart={onBeforeDragStart}
+          onBeforeCapture={onBeforeCapture}
+          contextId={groupName}
           // getChildPayload={(index) => getLaneDetails(index)}
-          // groupName={groupName}
         >
           {currentReducerData.lanes.map((lane, index) => {
             const { id, droppable, ...laneOtherProps } = lane;
@@ -284,17 +273,17 @@ const BoardContainer = ({
               />
             );
           })}
+          {canAddLanes && (
+            <Droppable type="placeholder" direction={orientation === "horizontal" ? "vertical" : "grid"}>
+              {editable && !addLaneMode ? (
+                <components.NewLaneSection onClick={showEditableLane} />
+              ) : (
+                addLaneMode && <components.NewLaneForm onCancel={hideEditableLane} onAdd={addNewLane} />
+              )}
+            </Droppable>
+          )}
         </DragDropContext>
       </PopoverWrapper>
-      {/*{canAddLanes && (*/}
-      {/*  <Container orientation={orientation === "vertical" ? "vertical" : "horizontal"}>*/}
-      {/*    {editable && !addLaneMode ? (*/}
-      {/*      <components.NewLaneSection onClick={showEditableLane} />*/}
-      {/*    ) : (*/}
-      {/*      addLaneMode && <components.NewLaneForm onCancel={hideEditableLane} onAdd={addNewLane} />*/}
-      {/*    )}*/}
-      {/*  </Container>*/}
-      {/*)}*/}
     </components.BoardWrapper>
   );
 };
@@ -325,15 +314,10 @@ BoardContainer.propTypes = {
   hideCardDeleteIcon: PropTypes.bool,
   handleDragStart: PropTypes.func,
   handleDragEnd: PropTypes.func,
-  handleLaneDragStart: PropTypes.func,
-  handleLaneDragEnd: PropTypes.func,
   style: PropTypes.object,
   tagStyle: PropTypes.object,
-  laneDraggable: PropTypes.bool,
   cardDraggable: PropTypes.bool,
   cardDragClass: PropTypes.string,
-  laneDragClass: PropTypes.string,
-  laneDropClass: PropTypes.string,
   onCardMoveAcrossLanes: PropTypes.func,
   orientation: PropTypes.string,
   cardStyle: PropTypes.object