refactor(state): replace redux with zustand

src/components/Nodes/DefaultNode.tsx

@@ -8,13 +8,15 @@ const DefaultNode = ({
   isConnectable,
   targetPosition = Position.Top,
   sourcePosition = Position.Bottom,
-}: NodeProps) => (
-  <>
-    <Handle type="target" position={targetPosition} isConnectable={isConnectable} />
-    {data.label}
-    <Handle type="source" position={sourcePosition} isConnectable={isConnectable} />
-  </>
-);
+}: NodeProps) => {
+  return (
+    <>
+      <Handle type="target" position={targetPosition} isConnectable={isConnectable} />
+      {data.label}
+      <Handle type="source" position={sourcePosition} isConnectable={isConnectable} />
+    </>
+  );
+};
 
 DefaultNode.displayName = 'DefaultNode';
 

src/components/Nodes/utils.ts

@@ -13,7 +13,7 @@ export const getHandleBounds = (nodeElement: HTMLDivElement, scale: number) => {
 export const getHandleBoundsByHandleType = (
   selector: string,
   nodeElement: HTMLDivElement,
-  parentBounds: ClientRect | DOMRect,
+  parentBounds: DOMRect,
   k: number
 ): HandleElement[] | null => {
   const handles = nodeElement.querySelectorAll(selector);
@@ -24,20 +24,18 @@ export const getHandleBoundsByHandleType = (
 
   const handlesArray = Array.from(handles) as HTMLDivElement[];
 
-  return handlesArray.map(
-    (handle): HandleElement => {
-      const bounds = handle.getBoundingClientRect();
-      const dimensions = getDimensions(handle);
-      const handleId = handle.getAttribute('data-handleid');
-      const handlePosition = (handle.getAttribute('data-handlepos') as unknown) as Position;
+  return handlesArray.map((handle): HandleElement => {
+    const bounds = handle.getBoundingClientRect();
+    const dimensions = getDimensions(handle);
+    const handleId = handle.getAttribute('data-handleid');
+    const handlePosition = handle.getAttribute('data-handlepos') as unknown as Position;
 
-      return {
-        id: handleId,
-        position: handlePosition,
-        x: (bounds.left - parentBounds.left) / k,
-        y: (bounds.top - parentBounds.top) / k,
-        ...dimensions,
-      };
-    }
-  );
+    return {
+      id: handleId,
+      position: handlePosition,
+      x: (bounds.left - parentBounds.left) / k,
+      y: (bounds.top - parentBounds.top) / k,
+      ...dimensions,
+    };
+  });
 };

src/components/Nodes/wrapNode.tsx

@@ -2,9 +2,15 @@ import React, { useEffect, useRef, memo, ComponentType, CSSProperties, useMemo,
 import { DraggableCore, DraggableData, DraggableEvent } from 'react-draggable';
 import cc from 'classcat';
 
-import { useStoreActions, useStoreState } from '../../store/hooks';
+import { useStore } from '../../store';
 import { Provider } from '../../contexts/NodeIdContext';
-import { NodeComponentProps, WrapNodeProps } from '../../types';
+import { NodeComponentProps, WrapNodeProps, ReactFlowState } from '../../types';
+
+const selector = (s: ReactFlowState) => ({
+  addSelectedElements: s.addSelectedElements,
+  onNodesChange: s.onNodesChange,
+  unsetNodesSelection: s.unsetNodesSelection,
+});
 
 export default (NodeComponent: ComponentType<NodeComponentProps>) => {
   const NodeWrapper = ({
@@ -41,10 +47,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
     dragHandle,
   }: WrapNodeProps) => {
     // const updateNodeDimensions = useStoreActions((actions) => actions.updateNodeDimensions);
-    const addSelectedElements = useStoreActions((actions) => actions.addSelectedElements);
-    const onNodesChange = useStoreState((state) => state.onNodesChange);
-    const unsetNodesSelection = useStoreActions((actions) => actions.unsetNodesSelection);
-
+    const { addSelectedElements, onNodesChange, unsetNodesSelection } = useStore(selector);
     const nodeElement = useRef<HTMLDivElement>(null);
 
     const node = useMemo(() => ({ id, type, position: { x: xPos, y: yPos }, data }), [id, type, xPos, yPos, data]);
@@ -114,7 +117,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
             unsetNodesSelection();
 
             if (!selected) {
-              addSelectedElements(node);
+              addSelectedElements([node]);
             }
           }
 
@@ -132,7 +135,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
           unsetNodesSelection();
 
           if (!selected) {
-            addSelectedElements(node);
+            addSelectedElements([node]);
           }
         } else if (!selectNodesOnDrag && !selected && isSelectable) {
           unsetNodesSelection();
@@ -173,7 +176,7 @@ export default (NodeComponent: ComponentType<NodeComponentProps>) => {
         // Because of that we set dragging to true inside the onDrag handler and handle the click here
         if (!isDragging) {
           if (isSelectable && !selectNodesOnDrag && !selected) {
-            addSelectedElements(node);
+            addSelectedElements([node]);
           }
 
           onClick?.(event as MouseEvent, node);