Progress Commit

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

client/src/components/trello-board/dnd/Container.jsx

@@ -51,52 +51,27 @@ class Container extends Component {
 
   getContainerOptions() {
     const functionProps = {};
+    const propKeys = [
+      "onDragStart",
+      "onDragEnd",
+      "onDrop",
+      "getChildPayload",
+      "shouldAnimateDrop",
+      "shouldAcceptDrop",
+      "onDragEnter",
+      "onDragLeave",
+      "render",
+      "onDropReady",
+      "getGhostParent"
+    ];
 
-    if (this.props.onDragStart) {
-      functionProps.onDragStart = (...p) => this.props.onDragStart(...p);
-    }
+    propKeys.forEach((key) => {
+      if (this.props[key]) {
+        functionProps[key] = (...p) => this.props[key](...p);
+      }
+    });
 
-    if (this.props.onDragEnd) {
-      functionProps.onDragEnd = (...p) => this.props.onDragEnd(...p);
-    }
-
-    if (this.props.onDrop) {
-      functionProps.onDrop = (...p) => this.props.onDrop(...p);
-    }
-
-    if (this.props.getChildPayload) {
-      functionProps.getChildPayload = (...p) => this.props.getChildPayload(...p);
-    }
-
-    if (this.props.shouldAnimateDrop) {
-      functionProps.shouldAnimateDrop = (...p) => this.props.shouldAnimateDrop(...p);
-    }
-
-    if (this.props.shouldAcceptDrop) {
-      functionProps.shouldAcceptDrop = (...p) => this.props.shouldAcceptDrop(...p);
-    }
-
-    if (this.props.onDragEnter) {
-      functionProps.onDragEnter = (...p) => this.props.onDragEnter(...p);
-    }
-
-    if (this.props.onDragLeave) {
-      functionProps.onDragLeave = (...p) => this.props.onDragLeave(...p);
-    }
-
-    if (this.props.render) {
-      functionProps.render = (...p) => this.props.render(...p);
-    }
-
-    if (this.props.onDropReady) {
-      functionProps.onDropReady = (...p) => this.props.onDropReady(...p);
-    }
-
-    if (this.props.getGhostParent) {
-      functionProps.getGhostParent = (...p) => this.props.getGhostParent(...p);
-    }
-
-    return Object.assign({}, this.props, functionProps);
+    return { ...this.props, ...functionProps };
   }
 }
 

client/src/components/trello-board/dnd/Draggable.jsx

@@ -1,26 +1,35 @@
-import React, {Component} from 'react'
-import PropTypes from 'prop-types'
-import {constants} from 'kuika-smooth-dnd'
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { constants } from "kuika-smooth-dnd";
 
-const {wrapperClass} = constants
+const { wrapperClass } = constants;
 
 class Draggable extends Component {
   render() {
-    if (this.props.render) {
-      return React.cloneElement(this.props.render(), {className: wrapperClass})
-    }
+    const { render, className, children, ...restProps } = this.props;
 
-    const clsName = `${this.props.className ? this.props.className + ' ' : ''}`
-    return (
-      <div {...this.props} className={`${clsName}${wrapperClass}`}>
-        {this.props.children}
-      </div>
-    )
+    try {
+      if (render) {
+        return React.cloneElement(render(), { className: wrapperClass });
+      }
+
+      const clsName = className ? `${className} ` : "";
+      return (
+        <div {...restProps} className={`${clsName}${wrapperClass}`}>
+          {children}
+        </div>
+      );
+    } catch (error) {
+      console.error("Error rendering Draggable component:", error);
+      return null; // Return null if an error occurs to prevent crashing
+    }
   }
 }
 
 Draggable.propTypes = {
-  render: PropTypes.func
-}
+  render: PropTypes.func,
+  className: PropTypes.string,
+  children: PropTypes.node
+};
 
-export default Draggable
+export default Draggable;