- Optimization and Edgecases

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

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

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState, useMemo } from "react";
 import { useDispatch, useSelector } from "react-redux";
-import { DragDropContext, Droppable } from "../dnd/lib";
+import { DragDropContext } from "../dnd/lib";
 import PropTypes from "prop-types";
 import pick from "lodash/pick";
 import isEqual from "lodash/isEqual";
@@ -20,16 +20,6 @@ import * as actions from "../../../redux/trello/trello.actions.js";
  * @param {boolean} props.draggable - Whether the board is draggable
  * @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
- * @param {Function} props.onCardUpdate - Callback function when a card is updated
- * @param {Function} props.onCardClick - Callback function when a card is clicked
- * @param {Function} props.onBeforeCardDelete - Callback function before a card is deleted
- * @param {Function} props.onCardDelete - Callback function when a card is deleted
- * @param {Function} props.onLaneScroll - Callback function when a lane is scrolled
- * @param {Function} props.onLaneClick - Callback function when a lane is clicked
- * @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
@@ -48,16 +38,6 @@ const BoardContainer = ({
   draggable = false,
   style,
   onDataChange = () => {},
-  onCardAdd = () => {},
-  onCardUpdate = () => {},
-  onCardClick = () => {},
-  onBeforeCardDelete = () => {},
-  onCardDelete = () => {},
-  onLaneScroll = () => {},
-  onLaneClick = () => {},
-  onLaneAdd = () => {},
-  onLaneDelete = () => {},
-  onLaneUpdate = () => {},
   onDragEnd = () => {},
   editable = false,
   canAddLanes = false,
@@ -68,7 +48,6 @@ const BoardContainer = ({
   cardStyle,
   ...otherProps
 }) => {
-  const [addLaneMode, setAddLaneMode] = useState(false);
   const [isDragging, setIsDragging] = useState(false);
   const [isProcessing, setIsProcessing] = useState(false);
 
@@ -126,15 +105,9 @@ const BoardContainer = ({
     }
   }, [currentReducerData, reducerData, onDataChange]);
 
-  const onDragUpdate = () => {};
-
   const onDragStart = useCallback(() => {
     setIsDragging(true);
-  }, []);
-
-  const onBeforeDragStart = () => {};
-
-  const onBeforeCapture = () => {};
+  }, [setIsDragging]);
 
   const getCardDetails = useCallback(
     (laneId, cardIndex) => {
@@ -143,23 +116,6 @@ const BoardContainer = ({
     [currentReducerData]
   );
 
-  const hideEditableLane = useCallback(() => {
-    setAddLaneMode(false);
-  }, []);
-
-  const showEditableLane = useCallback(() => {
-    setAddLaneMode(true);
-  }, []);
-
-  const addNewLane = useCallback(
-    (params) => {
-      hideEditableLane();
-      dispatch(actions.addLane(params));
-      onLaneAdd(params);
-    },
-    [dispatch, hideEditableLane, onLaneAdd]
-  );
-
   const passThroughProps = useMemo(
     () =>
       pick(
@@ -170,16 +126,6 @@ const BoardContainer = ({
           draggable,
           style,
           onDataChange,
-          onCardAdd,
-          onCardUpdate,
-          onCardClick,
-          onBeforeCardDelete,
-          onCardDelete,
-          onLaneScroll,
-          onLaneClick,
-          onLaneAdd,
-          onLaneDelete,
-          onLaneUpdate,
           editable,
           canAddLanes,
           laneStyle,
@@ -220,16 +166,7 @@ const BoardContainer = ({
       draggable,
       style,
       onDataChange,
-      onCardAdd,
-      onCardUpdate,
-      onCardClick,
-      onBeforeCardDelete,
-      onCardDelete,
-      onLaneScroll,
-      onLaneClick,
-      onLaneAdd,
-      onLaneDelete,
-      onLaneUpdate,
+
       editable,
       canAddLanes,
       laneStyle,
@@ -272,14 +209,7 @@ const BoardContainer = ({
   return (
     <components.BoardWrapper style={style} orientation={orientation}>
       <PopoverWrapper>
-        <DragDropContext
-          onDragEnd={onLaneDrag}
-          onDragUpdate={onDragUpdate}
-          onDragStart={onDragStart}
-          onBeforeDragStart={onBeforeDragStart}
-          onBeforeCapture={onBeforeCapture}
-          contextId={groupName}
-        >
+        <DragDropContext onDragEnd={onLaneDrag} onDragStart={onDragStart} contextId={groupName}>
           {currentReducerData.lanes.map((lane, index) => {
             const { id, droppable, ...laneOtherProps } = lane;
             return (
@@ -303,15 +233,6 @@ 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>
     </components.BoardWrapper>