diff --git a/src/components/StoreUpdater/index.tsx b/src/components/StoreUpdater/index.tsx index 4943aacd..4047b114 100644 --- a/src/components/StoreUpdater/index.tsx +++ b/src/components/StoreUpdater/index.tsx @@ -62,6 +62,14 @@ const selector = (s: ReactFlowState) => ({ setFitViewOnInit: s.setFitViewOnInit, }); +function useStoreUpdater(value: T | undefined, setStoreState: (param: T) => void) { + useEffect(() => { + if (typeof value !== 'undefined') { + setStoreState(value); + } + }, [value]); +} + const StoreUpdater = ({ nodes, edges, @@ -112,113 +120,26 @@ const StoreUpdater = ({ }; }, [reset]); - useEffect(() => { - setNodes(nodes); - }, [nodes]); - - useEffect(() => { - setEdges(edges); - }, [edges]); - - useEffect(() => { - if (onConnect) { - setOnConnect(onConnect); - } - }, [onConnect]); - - useEffect(() => { - if (onConnectStart) { - setOnConnectStart(onConnectStart); - } - }, [onConnectStart]); - - useEffect(() => { - if (onConnectStop) { - setOnConnectStop(onConnectStop); - } - }, [onConnectStop]); - - useEffect(() => { - if (onConnectEnd) { - setOnConnectEnd(onConnectEnd); - } - }, [onConnectEnd]); - - useEffect(() => { - if (typeof snapToGrid !== 'undefined') { - setSnapToGrid(snapToGrid); - } - }, [snapToGrid]); - - useEffect(() => { - if (typeof snapGrid !== 'undefined') { - setSnapGrid(snapGrid); - } - }, [snapGrid]); - - useEffect(() => { - if (typeof nodesDraggable !== 'undefined') { - setNodesDraggable(nodesDraggable); - } - }, [nodesDraggable]); - - useEffect(() => { - if (typeof nodesConnectable !== 'undefined') { - setNodesConnectable(nodesConnectable); - } - }, [nodesConnectable]); - - useEffect(() => { - if (typeof elementsSelectable !== 'undefined') { - setElementsSelectable(elementsSelectable); - } - }, [elementsSelectable]); - - useEffect(() => { - if (typeof minZoom !== 'undefined') { - setMinZoom(minZoom); - } - }, [minZoom]); - - useEffect(() => { - if (typeof maxZoom !== 'undefined') { - setMaxZoom(maxZoom); - } - }, [maxZoom]); - - useEffect(() => { - if (typeof translateExtent !== 'undefined') { - setTranslateExtent(translateExtent); - } - }, [translateExtent]); - - useEffect(() => { - if (typeof nodeExtent !== 'undefined') { - setNodeExtent(nodeExtent); - } - }, [nodeExtent]); - - useEffect(() => { - if (typeof connectionMode !== 'undefined') { - setConnectionMode(connectionMode); - } - }, [connectionMode]); - - useEffect(() => { - if (typeof onNodesChange !== 'undefined') { - setOnNodesChange(onNodesChange); - } - }, [onNodesChange]); - - useEffect(() => { - if (typeof onEdgesChange !== 'undefined') { - setOnEdgesChange(onEdgesChange); - } - }, [onEdgesChange]); - - useEffect(() => { - setFitViewOnInit(fitViewOnInit); - }, [fitViewOnInit]); + useStoreUpdater(nodes, setNodes); + useStoreUpdater(edges, setEdges); + useStoreUpdater(onConnect, setOnConnect); + useStoreUpdater(onConnect, setOnConnect); + useStoreUpdater(onConnectStart, setOnConnectStart); + useStoreUpdater(onConnectStop, setOnConnectStop); + useStoreUpdater(onConnectEnd, setOnConnectEnd); + useStoreUpdater(snapToGrid, setSnapToGrid); + useStoreUpdater(snapGrid, setSnapGrid); + useStoreUpdater(nodesDraggable, setNodesDraggable); + useStoreUpdater(nodesConnectable, setNodesConnectable); + useStoreUpdater(elementsSelectable, setElementsSelectable); + useStoreUpdater(minZoom, setMinZoom); + useStoreUpdater(maxZoom, setMaxZoom); + useStoreUpdater(translateExtent, setTranslateExtent); + useStoreUpdater(nodeExtent, setNodeExtent); + useStoreUpdater(connectionMode, setConnectionMode); + useStoreUpdater(onNodesChange, setOnNodesChange); + useStoreUpdater(onEdgesChange, setOnEdgesChange); + useStoreUpdater(fitViewOnInit, setFitViewOnInit); return null; };