Merge pull request #316 from uber/undefined_then_fix

Improved promise code for the node update

Author: ajbogh

package.json

@@ -98,6 +98,7 @@
  "opn-cli": "3.1.0",
  "prettier": "^1.19.1",
  "prop-types": "^15.6.0",
+ "react": "^16.14.0",
  "react-ace": "^6.1.4",
  "react-dom": "^16.12.0",
  "react-router-dom": "^5.0.0",

src/components/graph-view.js

@@ -990,16 +990,22 @@ class GraphView extends React.Component<IGraphViewProps, IGraphViewState> {
  }
  }
 
- handleNodeUpdate = (position: any, nodeId: string, shiftKey: boolean) => {
+ handleNodeUpdate = (
+ position: any,
+ nodeId: string,
+ shiftKey: boolean
+ ): Promise<any> => {
  const { onUpdateNode, readOnly, selected, nodeKey } = this.props;
  const { draggingEdge, hoveredNode, edgeEndNode } = this.state;
 
  if (readOnly) {
- return;
+ return Promise.resolve();
  }
 
  // Detect if edge is being drawn and link to hovered node
  // This will handle a new edge
+ let onUpdateNodePromise = Promise.resolve();
+
  if (shiftKey && hoveredNode && edgeEndNode) {
  this.createNewEdge();
  } else {
@@ -1033,7 +1039,8 @@ class GraphView extends React.Component<IGraphViewProps, IGraphViewState> {
  updatedNodes = selected?.nodes || new Map();
  }
 
- return onUpdateNode(nodeMap.node, updatedNodes);
+ onUpdateNodePromise =
+ onUpdateNode(nodeMap.node, updatedNodes) || Promise.resolve();
  }
  }
  }
@@ -1047,6 +1054,8 @@ class GraphView extends React.Component<IGraphViewProps, IGraphViewState> {
  hoveredNode: false,
  svgClicked: true,
  });
+
+ return onUpdateNodePromise;
  };
 
  handleNodeMouseEnter = (event: any, data: any) => {

src/components/node.js

@@ -100,7 +100,7 @@ function Node({
  onNodeMouseLeave = () => {},
  onNodeMove = () => {},
  onNodeSelected = () => {},
- onNodeUpdate = () => {},
+ onNodeUpdate = () => Promise.resolve(),
 }: INodeProps) {
  const [hovered, setHovered] = useState(false);
  const nodeRef = useRef();
@@ -178,15 +178,10 @@ function Node({
  shiftKey
  );
 
- if (nodeUpdate && nodeUpdate.then) {
- nodeUpdate
- .then(() => {
- onNodeSelected(data, data[nodeKey], shiftKey, sourceEvent);
- })
- .catch(() => {
- onNodeSelected(data, data[nodeKey], shiftKey, sourceEvent);
- });
- }
+ const onFinally = () =>
+ onNodeSelected(data, data[nodeKey], shiftKey, sourceEvent);
+
+ nodeUpdate.then(onFinally).catch(onFinally);
  },
  [onNodeUpdate, data, nodeKey, onNodeSelected]
  );