refactor(app): folder structure, components cleanup

src/hooks/useElementUpdater.js

@@ -0,0 +1,52 @@
+import { useEffect } from 'react';
+import { useStoreState, useStoreActions } from 'easy-peasy';
+import isEqual from 'fast-deep-equal';
+
+import { parseElement, isNode, isEdge } from '../graph-utils';
+
+const useElementUpdater = ({ elements }) => {
+  const state = useStoreState(s => ({
+    nodes: s.nodes,
+    edges: s.edges,
+    transform: s.transform
+  }));
+
+  const setNodes = useStoreActions(a => a.setNodes);
+  const setEdges = useStoreActions(a => a.setEdges);
+
+  useEffect(() => {
+    const nodes = elements.filter(isNode);
+    const edges = elements.filter(isEdge).map(parseElement);
+
+    const nextNodes = nodes.map(propNode => {
+      const existingNode = state.nodes.find(n => n.id === propNode.id);
+
+      if (existingNode) {
+        const data = !isEqual(existingNode.data, propNode.data) ?
+          { ...existingNode.data, ...propNode.data } : existingNode.data;
+
+        return {
+          ...existingNode,
+          data
+        };
+      }
+
+      return parseElement(propNode, state.transform);
+    });
+
+    const nodesChanged = !isEqual(state.nodes, nextNodes);
+    const edgesChanged = !isEqual(state.edges, edges);
+
+    if (nodesChanged) {
+      setNodes(nextNodes);
+    }
+
+    if (edgesChanged) {
+      setEdges(edges);
+    }
+  });
+
+  return null;
+};
+
+export default useElementUpdater;

src/hooks/useGlobalKeyHandler.js

@@ -0,0 +1,28 @@
+import { useEffect } from 'react';
+import { useStoreState, useStoreActions } from 'easy-peasy';
+
+import useKeyPress from './useKeyPress';
+import { isEdge, getConnectedEdges } from '../graph-utils';
+
+export default ({ deleteKeyCode, onElementsRemove }) => {
+  const state = useStoreState(s => ({ selectedElements: s.selectedElements, edges: s.edges }))
+  const setNodesSelection = useStoreActions(a => a.setNodesSelection);
+  const deleteKeyPressed = useKeyPress(deleteKeyCode);
+
+  useEffect(() => {
+    if (deleteKeyPressed && state.selectedElements.length) {
+      let elementsToRemove = state.selectedElements;
+
+      // we also want to remove the edges if only one node is selected
+      if (state.selectedElements.length === 1 && !isEdge(state.selectedElements[0])) {
+        const connectedEdges = getConnectedEdges(state.selectedElements, state.edges);
+        elementsToRemove = [...state.selectedElements, ...connectedEdges];
+      }
+
+      onElementsRemove(elementsToRemove);
+      setNodesSelection({ isActive: false });
+    }
+  }, [deleteKeyPressed])
+
+  return null;
+};