refactor(state): use easy-peasy

package.json

@@ -10,6 +10,7 @@
     "classnames": "^2.2.6",
     "d3-selection": "^1.4.0",
     "d3-zoom": "^1.7.3",
+    "easy-peasy": "^3.0.2",
     "fast-deep-equal": "^3.0.0-beta.1",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",

src/EdgeRenderer/EdgeTypes/wrapEdge.js

@@ -1,22 +1,22 @@
 import React, {  memo } from 'react';
 import cx from 'classnames';
 
-import { setSelectedElements } from '../../state/actions';
 import { isInputNode } from '../../utils';
+import store from '../../store';
 
 export default EdgeComponent => {
   const EdgeWrapper = memo((props) => {
     const {
       source, target, animated, type,
-      dispatch, selected, onClick
+      selected, onClick
     } = props;
     const edgeClasses = cx('react-graph__edge', { selected, animated });
     const onEdgeClick = (evt) => {
       if (isInputNode(evt)) {
         return false;
       }
 
-      dispatch(setSelectedElements({ source, target }));
+      store.dispatch.setSelectedElements({ source, target });
       onClick({ source, target, type });
     };
 

src/EdgeRenderer/index.js

@@ -1,7 +1,6 @@
-import React, { memo, useContext } from 'react';
+import React, { memo } from 'react';
+import { useStoreState } from 'easy-peasy';
 
-import { GraphContext } from '../GraphContext';
-import { ConnectionContext } from '../ConnectionContext';
 import ConnectionLine from '../ConnectionLine';
 import { isEdge } from '../graph-utils';
 
@@ -36,10 +35,10 @@ function getEdgePositions(sourceNode, targetNode) {
   };
 }
 
-function renderEdge(e, props, graphContext) {
+function renderEdge(e, props, state) {
   const edgeType = e.type || 'default';
-  const sourceNode = graphContext.state.nodes.find(n => n.id === e.source);
-  const targetNode = graphContext.state.nodes.find(n => n.id === e.target);
+  const sourceNode = state.nodes.find(n => n.id === e.source);
+  const targetNode = state.nodes.find(n => n.id === e.target);
 
   if (!sourceNode) {
     throw new Error(`couldn't create edge for source id: ${e.source}`);
@@ -51,7 +50,7 @@ function renderEdge(e, props, graphContext) {
 
   const EdgeComponent = props.edgeTypes[edgeType] || props.edgeTypes.default;
   const { sourceX, sourceY, targetX, targetY } = getEdgePositions(sourceNode, targetNode);
-  const selected = graphContext.state.selectedElements
+  const selected = state.selectedElements
     .filter(isEdge)
     .find(elm => elm.source === e.source && elm.target === e.target);
 
@@ -62,7 +61,6 @@ function renderEdge(e, props, graphContext) {
       type={e.type}
       onClick={props.onElementClick}
       selected={selected}
-      dispatch={graphContext.dispatch}
       animated={e.animated}
       style={e.style}
       source={e.source}
@@ -76,8 +74,14 @@ function renderEdge(e, props, graphContext) {
 }
 
 const EdgeRenderer = memo((props) => {
-  const graphContext = useContext(GraphContext);
-  const { position, sourceId : connectionSourceId } = useContext(ConnectionContext);
+  const state = useStoreState(s => ({
+    nodes: s.nodes,
+    edges: s.edges,
+    transform: s.transform,
+    selectedElements: s.selectedElements,
+    connectionSourceId: s.connectionSourceId,
+    position: s.connectionPosition
+  }));
   const {
     width, height, connectionLineStyle, connectionLineType
   } = props;
@@ -86,7 +90,7 @@ const EdgeRenderer = memo((props) => {
     return null;
   }
 
-  const { transform, edges, nodes } = graphContext.state;
+  const { transform, edges, nodes, connectionSourceId, position } = state;
   const transformStyle = `translate(${transform[0]},${transform[1]}) scale(${transform[2]})`;
 
   return (
@@ -96,7 +100,7 @@ const EdgeRenderer = memo((props) => {
       className="react-graph__edges"
     >
       <g transform={transformStyle}>
-        {edges.map(e => renderEdge(e, props, graphContext))}
+        {edges.map(e => renderEdge(e, props, state))}
         {connectionSourceId && (
           <ConnectionLine
             nodes={nodes}
@@ -113,4 +117,6 @@ const EdgeRenderer = memo((props) => {
   );
 });
 
+EdgeRenderer.displayName = 'EdgeRenderer';
+
 export default EdgeRenderer;

src/GlobalKeyHandler/index.js

@@ -1,12 +1,12 @@
-import { useEffect, useContext, memo } from 'react';
+import { useEffect, memo } from 'react';
+import { useStoreState, useStoreActions } from 'easy-peasy';
 
 import useKeyPress from '../hooks/useKeyPress';
-import { setNodesSelection } from '../state/actions';
-import { GraphContext } from '../GraphContext';
 import { isEdge, getConnectedEdges } from '../graph-utils';
 
 export default memo((props) => {
-  const { state, dispatch } = useContext(GraphContext);
+  const state = useStoreState(s => ({ selectedElements: s.selectedElements, edges: s.edges }))
+  const setNodesSelection = useStoreActions(a => a.setNodesSelection);
   const removePressed = useKeyPress('Backspace');
 
   useEffect(() => {
@@ -20,7 +20,7 @@ export default memo((props) => {
       }
 
       props.onElementsRemove(elementsToRemove);
-      dispatch(setNodesSelection({ isActive: false }));
+      setNodesSelection({ isActive: false });
     }
   }, [removePressed])