refactor(state): use useReducer

src/GraphView/index.js

@@ -6,6 +6,7 @@ import ReactSizeMe from 'react-sizeme';
 import { GraphContext } from '../GraphContext';
 import NodeRenderer from '../NodeRenderer';
 import EdgeRenderer from '../EdgeRenderer';
+import { updateTransform, updateSize, initD3, fitView } from '../state/actions';
 
 const GraphView = (props) => {
   const zoomNode = useRef(null);
@@ -19,42 +20,42 @@ const GraphView = (props) => {
           return false;
         }
 
-        graphContext.updateTransform(event.transform);
+        graphContext.dispatch(updateTransform(event.transform));
 
         props.onMove();
       });
 
     const selection = select(zoomNode.current).call(zoom);
 
-    graphContext.initD3ZoomState({ zoom, selection, initialised: true });
+    graphContext.dispatch(initD3({ zoom, selection }));
   }, []);
 
   useEffect(
-    () => graphContext.updateSize(props.size),
+    () => graphContext.dispatch(updateSize(props.size)),
     [props.size.width, props.size.height]
   );
 
   useEffect(() => {
-    if (graphContext.d3ZoomState.initialised) {
+    if (graphContext.state.d3Initialised) {
       props.onLoad({
-        nodes: graphContext.nodes,
-        edges: graphContext.edges,
-        fitView: graphContext.fitView
+        nodes: graphContext.state.nodes,
+        edges: graphContext.state.edges,
+        fitView: () => graphContext.dispatch(fitView())
       });
     }
-  }, [graphContext.d3ZoomState.initialised]);
+  }, [graphContext.state.d3Initialised]);
 
   useEffect(() => {
     props.onChange({
-      nodes: graphContext.nodes,
-      edges: graphContext.edges,
+      nodes: graphContext.state.nodes,
+      edges: graphContext.state.edges,
     });
   })
 
   return (
     <div className="react-graph__renderer">
       <NodeRenderer />
-      <EdgeRenderer width={graphContext.width} height={graphContext.height} />
+      <EdgeRenderer width={graphContext.state.width} height={graphContext.state.height} />
       <div className="react-graph__zoomnode" ref={zoomNode} />
     </div>
   );