- Checkpoint

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

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

@@ -8,7 +8,6 @@ import isEqual from "lodash/isEqual";
 import Lane from "./Lane";
 import { PopoverWrapper } from "react-popopo";
 import * as actions from "../../../redux/trello/trello.actions.js";
-import { isFunction } from "lodash";
 
 /**
  * BoardContainer is a React component that represents a Trello-like board.
@@ -73,6 +72,8 @@ const BoardContainer = ({
   ...otherProps
 }) => {
   const [addLaneMode, setAddLaneMode] = useState(false);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isProcessing, setIsProcessing] = useState(false);
 
   const dispatch = useDispatch();
   const currentReducerData = useSelector((state) => (state.trello.lanes ? state.trello : {}));
@@ -143,7 +144,12 @@ const BoardContainer = ({
    * onDragStart
    * @type {(function({draggableId: *, type: *, source: *, mode: *}): void)|*}
    */
-  const onDragStart = useCallback(({ draggableId, type, source, mode }) => {}, []);
+  const onDragStart = useCallback(
+    ({ draggableId, type, source, mode }) => {
+      setIsDragging(true);
+    },
+    [setIsDragging]
+  );
 
   /**
    * onBeforeDragStart
@@ -236,8 +242,13 @@ const BoardContainer = ({
     ]
   );
 
-  const onLaneDrag = ({ draggableId, type, source, reason, mode, destination, combine }) => {
+  const onLaneDrag = async ({ draggableId, type, source, reason, mode, destination, combine }) => {
+    setIsDragging(false);
+
     if (!type || type !== "lane" || !source || !destination) return;
+
+    setIsProcessing(true);
+
     dispatch(
       actions.moveCardAcrossLanes({
         fromLaneId: source.droppableId,
@@ -246,29 +257,26 @@ const BoardContainer = ({
         index: destination.index
       })
     );
-    // onCardMoveAcrossLanes(payload.laneId, laneId, payload.id, addedIndex);
-  };
 
-  const combinedDragEnd = (...params) => {
-    // Early Gate
-    if (!params || !params[0]) return;
-    onLaneDrag(params[0]);
-    if (isFunction(onDragEnd)) {
-      onDragEnd(params[0]);
-    }
+    onDragEnd({ draggableId, type, source, reason, mode, destination, combine })
+      .catch((err) => {
+        console.error("Error in onLaneDrag", err);
+      })
+      .finally(() => {
+        setIsProcessing(false);
+      });
   };
 
   return (
     <components.BoardWrapper style={style} orientation={orientation} draggable={false}>
       <PopoverWrapper>
         <DragDropContext
-          onDragEnd={combinedDragEnd}
+          onDragEnd={onLaneDrag}
           onDragUpdate={onDragUpdate}
           onDragStart={onDragStart}
           onBeforeDragStart={onBeforeDragStart}
           onBeforeCapture={onBeforeCapture}
           contextId={groupName}
-          // getChildPayload={(index) => getLaneDetails(index)}
         >
           {currentReducerData.lanes.map((lane, index) => {
             const { id, droppable, ...laneOtherProps } = lane;
@@ -288,6 +296,8 @@ const BoardContainer = ({
                 {...laneOtherProps}
                 {...passThroughProps}
                 cards={lane.cards}
+                isDragging={isDragging}
+                isProcessing={isProcessing}
               />
             );
           })}