refactor(state): use easy-peasy

src/GraphView/index.js

@@ -1,25 +1,33 @@
-import React, { useEffect, useContext, useRef, memo } from 'react';
+import React, { useEffect, useRef, memo } from 'react';
+import { useStoreState, useStoreActions } from 'easy-peasy';
 
-import { Provider } from '../ConnectionContext';
-import { GraphContext } from '../GraphContext';
 import NodeRenderer from '../NodeRenderer';
 import EdgeRenderer from '../EdgeRenderer';
 import UserSelection from '../UserSelection';
 import NodesSelection from '../NodesSelection';
-import { setNodesSelection } from '../state/actions';
-import { updateSize, fitView, zoomIn, zoomOut } from '../state/view-actions';
 import useKeyPress from '../hooks/useKeyPress';
 import useD3Zoom from '../hooks/useD3Zoom';
 import { getDimensions } from '../utils';
+import { fitView, zoomIn, zoomOut } from '../graph-utils';
 
 const GraphView = memo((props) => {
   const zoomPane = useRef();
   const rendererNode = useRef();
-  const { state, dispatch } = useContext(GraphContext);
+  const state = useStoreState(s => ({
+    width: s.width,
+    height: s.height,
+    nodes: s.nodes,
+    edges: s.edges,
+    d3Initialised: s.d3Initialised,
+    nodesSelectionActive: s.nodesSelectionActive
+  }));
+  const updateSize = useStoreActions(actions => actions.updateSize);
+  const setNodesSelection = useStoreActions(actions => actions.setNodesSelection);
+
   const shiftPressed = useKeyPress('Shift');
   const updateDimensions = () => {
     const size = getDimensions(rendererNode.current);
-    dispatch(updateSize(size));
+    updateSize(size);
   };
 
   useEffect(() => {
@@ -36,37 +44,33 @@ const GraphView = memo((props) => {
   useEffect(() => {
     if (state.d3Initialised) {
       props.onLoad({
-        nodes: state.nodes,
-        edges: state.edges,
-        fitView: opts => dispatch(fitView(opts)),
-        zoomIn: () => dispatch(zoomIn()),
-        zoomOut: () => dispatch(zoomOut())
+        fitView,
+        zoomIn,
+        zoomOut
       });
     }
   }, [state.d3Initialised]);
 
   return (
     <div className="react-graph__renderer" ref={rendererNode}>
-      <Provider onConnect={props.onConnect}>
-        <NodeRenderer
-          nodeTypes={props.nodeTypes}
-          onElementClick={props.onElementClick}
-          onNodeDragStop={props.onNodeDragStop}
-        />
-        <EdgeRenderer
-          width={state.width}
-          height={state.height}
-          edgeTypes={props.edgeTypes}
-          onElementClick={props.onElementClick}
-          connectionLineType={props.connectionLineType}
-          connectionLineStyle={props.connectionLineStyle}
-        />
-      </Provider>
+      <NodeRenderer
+        nodeTypes={props.nodeTypes}
+        onElementClick={props.onElementClick}
+        onNodeDragStop={props.onNodeDragStop}
+      />
+      <EdgeRenderer
+        width={state.width}
+        height={state.height}
+        edgeTypes={props.edgeTypes}
+        onElementClick={props.onElementClick}
+        connectionLineType={props.connectionLineType}
+        connectionLineStyle={props.connectionLineStyle}
+      />
       {shiftPressed && <UserSelection />}
       {state.nodesSelectionActive && <NodesSelection />}
       <div
         className="react-graph__zoompane"
-        onClick={() => dispatch(setNodesSelection({ isActive: false }))}
+        onClick={() => setNodesSelection({ isActive: false })}
         ref={zoomPane}
       />
     </div>