refactor(state): use useReducer

src/NodeRenderer/NodeTypes/wrapNode.js

@@ -2,19 +2,20 @@ import React, { useEffect, useRef, useContext } from 'react';
 import ReactDraggable from 'react-draggable';
 
 import { GraphContext } from '../../GraphContext';
+import { updateNodeData, updateNodePos } from '../../state/actions';
 
 export default NodeComponent => (props) => {
   const { position, data, onNodeClick } = props;
   const { id, __width, __height } = data;
   const nodeElement = useRef(null);
   const graphContext = useContext(GraphContext);
-  const { x, y, k } = graphContext.transform;
+  const [ x, y, k ] = graphContext.state.transform;
 
   useEffect(() => {
     const bounds = nodeElement.current.getBoundingClientRect();
 
     if (__width !== bounds.width || __height !== bounds.height) {
-      graphContext.updateNodeData(id, { __width: bounds.width, __height: bounds.height });
+      graphContext.dispatch(updateNodeData(id, { __width: bounds.width, __height: bounds.height }));
     }
   }, []);
 
@@ -30,15 +31,15 @@ export default NodeComponent => (props) => {
         const offsetX = e.clientX - position.x - x;
         const offsetY = e.clientY - position.y - y;
 
-        graphContext.updateNodeData(id, { __offsetX: offsetX, __offsetY: offsetY });
+        graphContext.dispatch(updateNodeData(id, { __offsetX: offsetX, __offsetY: offsetY }));
       }}
       onDrag={(e, d) => {
         const { __offsetX = 0, __offsetY = 0 } = data;
 
-        graphContext.updateNodePos(id, {
+        graphContext.dispatch(updateNodePos(id, {
           x: e.clientX - x - __offsetX,
           y: e.clientY - y - __offsetY
-        });
+        }));
       }}
       scale={k}
     >
@@ -47,7 +48,6 @@ export default NodeComponent => (props) => {
         ref={nodeElement}
         style={{ transform: `translate(${position.x}px,${position.y}px)` }}
         onClick={() => onNodeClick(data)}
-        // style={{ transform: `translate(${nodePosition.x}px,${nodePosition.y}px) scale(${k})` }}
       >
         <NodeComponent {...props} />
       </div>

src/NodeRenderer/index.js

@@ -25,14 +25,14 @@ class NodeRenderer extends PureComponent {
   render() {
     return (
       <Consumer>
-        {({ transform, nodes, onNodeClick }) => (
+        {({ onNodeClick, state }) => (
           <div
             className="react-graph__nodes"
             style={{
-              transform: `translate(${transform.x}px,${transform.y}px) scale(${transform.k})`
+              transform: `translate(${state.transform[0]}px,${state.transform[1]}px) scale(${state.transform[2]})`
             }}
           >
-            {nodes.map(d => this.renderNode(d, onNodeClick))}
+            {state.nodes.map(d => this.renderNode(d, onNodeClick))}
           </div>
         )}
       </Consumer>