refactor(easy-peasy): return single values from useStoreState

src/hooks/useD3Zoom.ts

@@ -1,5 +1,5 @@
 import { useEffect, MutableRefObject } from 'react';
-import * as d3Zoom from 'd3-zoom';
+import { zoom, zoomIdentity } from 'd3-zoom';
 import { select, event } from 'd3-selection';
 
 import { useStoreState, useStoreActions } from '../store/hooks';
@@ -10,17 +10,14 @@ interface UseD3ZoomParams {
   onMove?: () => void;
 }
 
-const d3ZoomInstance = d3Zoom
-  .zoom()
+const d3ZoomInstance = zoom()
   .scaleExtent([0.5, 2])
   .filter(() => !event.button);
 
 export default ({ zoomPane, onMove, selectionKeyPressed }: UseD3ZoomParams): void => {
-  const state = useStoreState((s) => ({
-    transform: s.transform,
-    d3Selection: s.d3Selection,
-    d3Zoom: s.d3Zoom,
-  }));
+  const transform = useStoreState((s) => s.transform);
+  const d3Selection = useStoreState((s) => s.d3Selection);
+  const d3Zoom = useStoreState((s) => s.d3Zoom);
 
   const initD3 = useStoreActions((actions) => actions.initD3);
   const updateTransform = useStoreActions((actions) => actions.updateTransform);
@@ -48,13 +45,10 @@ export default ({ zoomPane, onMove, selectionKeyPressed }: UseD3ZoomParams): voi
         }
       });
 
-      if (state.d3Selection && state.d3Zoom) {
+      if (d3Selection && d3Zoom) {
         // we need to restore the graph transform otherwise d3 zoom transform and graph transform are not synced
-        const graphTransform = d3Zoom.zoomIdentity
-          .translate(state.transform[0], state.transform[1])
-          .scale(state.transform[2]);
-
-        state.d3Selection.call(state.d3Zoom.transform, graphTransform);
+        const graphTransform = zoomIdentity.translate(transform[0], transform[1]).scale(transform[2]);
+        d3Selection.call(d3Zoom.transform, graphTransform);
       }
     }
 

src/hooks/useElementUpdater.ts

@@ -6,13 +6,8 @@ import { parseElement, isNode, isEdge } from '../utils/graph';
 import { Elements, Node, Edge } from '../types';
 
 const useElementUpdater = (elements: Elements): void => {
-  const state = useStoreState((s) => ({
-    nodes: s.nodes,
-    edges: s.edges,
-    transform: s.transform,
-    snapToGrid: s.snapToGrid,
-    snapGrid: s.snapGrid,
-  }));
+  const stateNodes = useStoreState((s) => s.nodes);
+  const stateEdges = useStoreState((s) => s.edges);
 
   const setNodes = useStoreActions((a) => a.setNodes);
   const setEdges = useStoreActions((a) => a.setEdges);
@@ -22,7 +17,7 @@ const useElementUpdater = (elements: Elements): void => {
     const edges: Edge[] = elements.filter(isEdge).map((e) => parseElement(e) as Edge);
 
     const nextNodes: Node[] = nodes.map((propNode) => {
-      const existingNode = state.nodes.find((n) => n.id === propNode.id);
+      const existingNode = stateNodes.find((n) => n.id === propNode.id);
 
       if (existingNode) {
         const data = !isEqual(existingNode.data, propNode.data)
@@ -59,8 +54,8 @@ const useElementUpdater = (elements: Elements): void => {
       return parseElement(propNode) as Node;
     });
 
-    const nodesChanged: boolean = !isEqual(state.nodes, nextNodes);
-    const edgesChanged: boolean = !isEqual(state.edges, edges);
+    const nodesChanged: boolean = !isEqual(stateNodes, nextNodes);
+    const edgesChanged: boolean = !isEqual(stateEdges, edges);
 
     if (nodesChanged) {
       setNodes(nextNodes);
@@ -69,7 +64,7 @@ const useElementUpdater = (elements: Elements): void => {
     if (edgesChanged) {
       setEdges(edges);
     }
-  }, [elements, state.nodes, state.edges]);
+  }, [elements, stateNodes, stateEdges]);
 };
 
 export default useElementUpdater;

src/hooks/useGlobalKeyHandler.ts

@@ -2,8 +2,8 @@ import { useEffect } from 'react';
 
 import { useStoreState, useStoreActions } from '../store/hooks';
 import useKeyPress from './useKeyPress';
-import { isEdge, getConnectedEdges } from '../utils/graph';
-import { Elements, Node } from '../types';
+import { isNode, getConnectedEdges } from '../utils/graph';
+import { Elements } from '../types';
 
 interface HookParams {
   deleteKeyCode: number;
@@ -11,22 +11,21 @@ interface HookParams {
 }
 
 export default ({ deleteKeyCode, onElementsRemove }: HookParams): void => {
-  const state = useStoreState((s) => ({
-    selectedElements: s.selectedElements,
-    edges: s.edges,
-  }));
+  const selectedElements = useStoreState((s) => s.selectedElements);
+  const edges = useStoreState((s) => s.edges);
+
   const setNodesSelection = useStoreActions((a) => a.setNodesSelection);
   const deleteKeyPressed = useKeyPress(deleteKeyCode);
 
   useEffect(() => {
-    if (onElementsRemove && deleteKeyPressed && state.selectedElements) {
-      let elementsToRemove = state.selectedElements;
+    if (onElementsRemove && deleteKeyPressed && selectedElements) {
+      let elementsToRemove = selectedElements;
 
       // we also want to remove the edges if only one node is selected
-      if (state.selectedElements.length === 1 && !isEdge(state.selectedElements[0])) {
-        const node = (state.selectedElements[0] as unknown) as Node;
-        const connectedEdges = getConnectedEdges([node], state.edges);
-        elementsToRemove = [...state.selectedElements, ...connectedEdges];
+      if (selectedElements.length === 1 && isNode(selectedElements[0])) {
+        const node = selectedElements[0];
+        const connectedEdges = getConnectedEdges([node], edges);
+        elementsToRemove = [...selectedElements, ...connectedEdges];
       }
 
       onElementsRemove(elementsToRemove);