refactor(state): use easy-peasy

src/NodeRenderer/HandleTypes/SourceHandle.js

@@ -1,12 +1,16 @@
 import React, { memo, useContext } from 'react';
+import { useStoreActions, useStoreState } from 'easy-peasy';
 
 import BaseHandle from './BaseHandle';
 import NodeIdContext from '../NodeIdContext'
-import { ConnectionContext } from '../../ConnectionContext';
 
-export default memo((props) => {
+const SourceHandle = memo((props) => {
   const nodeId = useContext(NodeIdContext);
-  const { setPosition, setSourceId, onConnect } = useContext(ConnectionContext);
+  const { setPosition, setSourceId } = useStoreActions(a => ({
+    setPosition: a.setConnectionPosition,
+    setSourceId: a.setConnectionSourceId
+  }));
+  const onConnect = useStoreState(s => s.onConnect);
 
   return (
     <BaseHandle
@@ -19,3 +23,7 @@ export default memo((props) => {
     />
   );
 });
+
+SourceHandle.displayName = 'SourceHandle';
+
+export default SourceHandle;

src/NodeRenderer/HandleTypes/TargetHandle.js

@@ -1,12 +1,16 @@
 import React, { memo, useContext } from 'react';
+import { useStoreActions, useStoreState } from 'easy-peasy';
 
 import BaseHandle from './BaseHandle';
-import { ConnectionContext } from '../../ConnectionContext';
 import NodeIdContext from '../NodeIdContext'
 
 const TargetHandle = memo((props) => {
   const nodeId = useContext(NodeIdContext);
-  const { setPosition, setSourceId, onConnect } = useContext(ConnectionContext);
+  const { setPosition, setSourceId } = useStoreActions(a => ({
+    setPosition: a.setConnectionPosition,
+    setSourceId: a.setConnectionSourceId
+  }));
+  const onConnect = useStoreState(s => s.onConnect);
 
   return (
     <BaseHandle

src/NodeRenderer/NodeTypes/wrapNode.js

@@ -2,9 +2,9 @@ import React, { useEffect, useRef, useState, memo } from 'react';
 import ReactDraggable from 'react-draggable';
 import cx from 'classnames';
 
-import { updateNodeData, updateNodePos, setSelectedElements } from '../../state/actions';
 import { getDimensions, isInputNode } from '../../utils';
 import { Provider } from '../NodeIdContext';
+import store from '../../store';
 
 const isHandle = e => (
   e.target.className &&
@@ -29,7 +29,7 @@ const getHandleBounds = (sel, nodeElement, parentBounds, k) => {
   };
 };
 
-const onStart = (evt, { dispatch, setOffset, onClick, id, type, data, position, transform }) => {
+const onStart = (evt, { setOffset, onClick, id, type, data, position, transform }) => {
   if (isInputNode(evt) || isHandle(evt)) {
     return false;
   }
@@ -42,22 +42,22 @@ const onStart = (evt, { dispatch, setOffset, onClick, id, type, data, position,
   const offsetY = scaledClient.y - position.y - transform[1];
   const node = { id, type, position, data };
 
-  dispatch(setSelectedElements({ id, type }));
+  store.dispatch.setSelectedElements({ id, type });
   setOffset({ x: offsetX, y: offsetY });
   onClick(node);
 };
 
-const onDrag = (evt, { dispatch, setDragging, id, offset, transform }) => {
+const onDrag = (evt, { setDragging, id, offset, transform }) => {
   const scaledClient = {
     x: evt.clientX * (1 / transform[2]),
     y: evt.clientY * (1 / transform[2])
   };
 
   setDragging(true);
-  dispatch(updateNodePos(id, {
+  store.dispatch.updateNodePos({ id, pos: {
     x: scaledClient.x - transform[0] - offset.x,
     y: scaledClient.y - transform[1] - offset.y
-  }));
+  }});
 };
 
 const onStop = ({ onNodeDragStop, setDragging, isDragging, id, type, position, data }) => {
@@ -78,7 +78,7 @@ export default NodeComponent => {
     const [isDragging, setDragging] = useState(false);
     const {
       id, type, data, transform, xPos, yPos, selected,
-      dispatch, onClick, onNodeDragStop, style
+      onClick, onNodeDragStop, style
     } = props;
 
     const position = { x: xPos, y: yPos };
@@ -93,13 +93,13 @@ export default NodeComponent => {
         target: getHandleBounds('.target', nodeElement.current, bounds, transform[2])
       };
 
-      dispatch(updateNodeData(id, { ...dimensions, handleBounds }));
+      store.dispatch.updateNodeData({ id, ...dimensions, handleBounds });
     }, []);
 
     return (
       <ReactDraggable.DraggableCore
-        onStart={evt => onStart(evt, { dispatch, onClick, id, type, data, setOffset, transform, position })}
-        onDrag={evt => onDrag(evt, { dispatch, setDragging, id, offset, transform })}
+        onStart={evt => onStart(evt, { onClick, id, type, data, setOffset, transform, position })}
+        onDrag={evt => onDrag(evt, { setDragging, id, offset, transform })}
         onStop={() => onStop({ onNodeDragStop, isDragging, setDragging, id, type, position, data })}
         scale={transform[2]}
       >

src/NodeRenderer/index.js

@@ -1,9 +1,9 @@
-import React, { memo, useContext } from 'react';
+import React, { memo } from 'react';
+import { useStoreState } from 'easy-peasy';
 
-import { GraphContext } from '../GraphContext';
 import { isNode } from '../graph-utils';
 
-function renderNode(d, props, graphContext) {
+function renderNode(d, props, state) {
   const nodeType = d.type || 'default';
 
   if (!props.nodeTypes[nodeType]) {
@@ -11,7 +11,7 @@ function renderNode(d, props, graphContext) {
   }
 
   const NodeComponent = props.nodeTypes[nodeType] || props.nodeTypes.default;
-  const selected = graphContext.state.selectedElements
+  const selected = state.selectedElements
     .filter(isNode)
     .map(e => e.id)
     .includes(d.id);
@@ -26,9 +26,7 @@ function renderNode(d, props, graphContext) {
       yPos={d.__rg.position.y}
       onClick={props.onElementClick}
       onNodeDragStop={props.onNodeDragStop}
-      dispatch={graphContext.dispatch}
-      transform={graphContext.state.transform}
-      getNodeById={graphContext.getNodeById}
+      transform={state.transform}
       selected={selected}
       style={d.style}
     />
@@ -36,8 +34,13 @@ function renderNode(d, props, graphContext) {
 }
 
 const NodeRenderer = memo((props) => {
-  const graphContext = useContext(GraphContext);
-  const { transform, nodes } = graphContext.state;
+  const state = useStoreState(s => ({
+    nodes: s.nodes,
+    transform: s.transform,
+    selectedElements: s.selectedElements
+  }));
+
+  const { transform, nodes } = state;
   const transformStyle = { transform : `translate(${transform[0]}px,${transform[1]}px) scale(${transform[2]})` };
 
   return (
@@ -45,7 +48,7 @@ const NodeRenderer = memo((props) => {
       className="react-graph__nodes"
       style={transformStyle}
     >
-      {nodes.map(d => renderNode(d, props, graphContext))}
+      {nodes.map(d => renderNode(d, props, state))}
     </div>
   );
 });