refactor(store): use redux instead of easy-peasy

src/container/EdgeRenderer/index.tsx

@@ -2,7 +2,7 @@ import React, { memo, CSSProperties, useCallback } from 'react';
 
 import { useStoreState } from '../../store/hooks';
 import ConnectionLine from '../../components/ConnectionLine/index';
-import { isEdge } from '../../utils/graph';
+import { isEdge, isNode } from '../../utils/graph';
 import MarkerDefinitions from './MarkerDefinitions';
 import { getEdgePositions, getHandle, isEdgeVisible, getSourceTargetNodes } from './utils';
 import {
@@ -169,7 +169,7 @@ const Edge = ({
 
 const EdgeRenderer = (props: EdgeRendererProps) => {
   const transform = useStoreState((state) => state.transform);
-  const edges = useStoreState((state) => state.edges);
+  const elements = useStoreState((state) => state.elements);
   const connectionNodeId = useStoreState((state) => state.connectionNodeId);
   const connectionHandleId = useStoreState((state) => state.connectionHandleId);
   const connectionHandleType = useStoreState((state) => state.connectionHandleType);
@@ -179,7 +179,9 @@ const EdgeRenderer = (props: EdgeRendererProps) => {
   const elementsSelectable = useStoreState((state) => state.elementsSelectable);
   const width = useStoreState((state) => state.width);
   const height = useStoreState((state) => state.height);
-  const nodes = useStoreState((state) => state.nodes);
+
+  const edges = elements.filter(isEdge);
+  const nodes = elements.filter(isNode);
 
   if (!width) {
     return null;

src/container/NodeRenderer/index.tsx

@@ -1,6 +1,6 @@
 import React, { memo, useMemo, ComponentType, MouseEvent } from 'react';
 
-import { getNodesInside } from '../../utils/graph';
+import { getNodesInside, isNode } from '../../utils/graph';
 import { useStoreState, useStoreActions } from '../../store/hooks';
 import { Node, NodeTypesType, WrapNodeProps, Edge } from '../../types';
 
@@ -25,10 +25,13 @@ const NodeRenderer = (props: NodeRendererProps) => {
   const nodesDraggable = useStoreState((state) => state.nodesDraggable);
   const nodesConnectable = useStoreState((state) => state.nodesConnectable);
   const elementsSelectable = useStoreState((state) => state.elementsSelectable);
-  const viewportBox = useStoreState((state) => state.viewportBox);
-  const nodes = useStoreState((state) => state.nodes);
+  const width = useStoreState((state) => state.width);
+  const height = useStoreState((state) => state.height);
+  const elements = useStoreState((state) => state.elements);
   const batchUpdateNodeDimensions = useStoreActions((actions) => actions.batchUpdateNodeDimensions);
 
+  const viewportBox = { x: 0, y: 0, width, height };
+  const nodes = elements.filter(isNode);
   const visibleNodes = props.onlyRenderVisibleElements ? getNodesInside(nodes, viewportBox, transform, true) : nodes;
 
   const transformStyle = useMemo(

src/container/ReactFlow/Wrapper.tsx

@@ -1,20 +1,22 @@
 import React, { FC } from 'react';
-import { StoreProvider } from 'easy-peasy';
+import { Provider } from 'react-redux';
 
 import store from '../../store';
-import { useStore } from '../../store/hooks';
+// import { useStore } from '../../store/hooks';
 
 const Wrapper: FC = ({ children }) => {
-  const easyPeasyStore = useStore();
-  const isWrapepdWithReactFlowProvider = easyPeasyStore?.getState()?.reactFlowVersion;
+  // const reactFlowStore = useStore();
+  // const isWrapepdWithReactFlowProvider = reactFlowStore?.getState()?.reactFlowVersion;
 
-  if (isWrapepdWithReactFlowProvider) {
-    // we need to wrap it with a fragment because t's not allowed for children to be a ReactNode
-    // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18051
-    return <>{children}</>;
-  }
+  // console.log(isWrapepdWithReactFlowProvider);
 
-  return <StoreProvider store={store}>{children}</StoreProvider>;
+  // if (isWrapepdWithReactFlowProvider) {
+  //   // we need to wrap it with a fragment because t's not allowed for children to be a ReactNode
+  //   // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/18051
+  //   return <>{children}</>;
+  // }
+
+  return <Provider store={store}>{children}</Provider>;
 };
 
 Wrapper.displayName = 'ReactFlowWrapper';