chore(examples): cleanup save restore

example/package.json

@@ -3,13 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@craco/craco": "^5.7.0",
+    "@craco/craco": "^6.0.0",
     "dagre": "^0.8.5",
     "localforage": "^1.9.0",
     "react-dom": "^17.0.1",
     "react-flow-renderer": "file:..",
     "react-router-dom": "^5.2.0",
-    "react-scripts": "^3.4.4"
+    "react-scripts": "^4.0.1"
   },
   "scripts": {
     "start": "craco start",

example/src/SaveRestore/Controls.js

@@ -0,0 +1,56 @@
+import React, { memo, useCallback } from 'react';
+import { useZoomPanHelper } from 'react-flow-renderer';
+import localforage from 'localforage';
+
+localforage.config({
+  name: 'react-flow',
+  storeName: 'flows',
+});
+
+const flowKey = 'example-flow';
+
+const getNodeId = () => `randomnode_${+new Date()}`;
+
+const Controls = memo(({ rfInstance, setElements }) => {
+  const { transform } = useZoomPanHelper();
+
+  const onSave = useCallback(() => {
+    if (rfInstance) {
+      const flow = rfInstance.toObject();
+      localforage.setItem(flowKey, flow);
+    }
+  }, [rfInstance]);
+
+  const onRestore = useCallback(() => {
+    const restoreFlow = async () => {
+      const flow = await localforage.getItem(flowKey);
+
+      if (flow) {
+        const [x = 0, y = 0] = flow.position;
+        setElements(flow.elements || []);
+        transform({ x, y, zoom: flow.zoom || 0 });
+      }
+    };
+
+    restoreFlow();
+  }, [setElements, transform]);
+
+  const onAdd = useCallback(() => {
+    const newNode = {
+      id: `random_node-${getNodeId()}`,
+      data: { label: 'Added node' },
+      position: { x: Math.random() * window.innerWidth - 100, y: Math.random() * window.innerHeight },
+    };
+    setElements((els) => els.concat(newNode));
+  }, [setElements]);
+
+  return (
+    <div className="save__controls">
+      <button onClick={onSave}>save</button>
+      <button onClick={onRestore}>restore</button>
+      <button onClick={onAdd}>add node</button>
+    </div>
+  );
+});
+
+export default Controls;

example/src/SaveRestore/index.js

@@ -1,64 +1,16 @@
-import React, { memo, useCallback, useState } from 'react';
+import React, { memo, useState } from 'react';
-import localforage from 'localforage';
+import ReactFlow, { ReactFlowProvider, removeElements, addEdge } from 'react-flow-renderer';
-import ReactFlow, { ReactFlowProvider, useZoomPanHelper, removeElements, addEdge } from 'react-flow-renderer';
+
+import Controls from './Controls';
 
 import './save.css';
 
-localforage.config({
-  name: 'react-flow',
-  storeName: 'flow',
-});
-
-const flowKey = 'save-restore-key';
-
 const initialElements = [
   { id: '1', data: { label: 'Node 1' }, position: { x: 100, y: 100 } },
   { id: '2', data: { label: 'Node 2' }, position: { x: 100, y: 200 } },
   { id: 'e1-2', source: '1', target: '2' },
 ];
 
-const getNodeId = () => `randomnode_${+new Date()}`;
-
-const Controls = memo(({ rfInstance, setElements }) => {
-  const { transform } = useZoomPanHelper();
-
-  const onSave = useCallback(() => {
-    const flow = rfInstance.toObject();
-    localforage.setItem(flowKey, flow);
-  }, [rfInstance]);
-
-  const onRestore = useCallback(() => {
-    const onRestoreFlow = async () => {
-      const flow = await localforage.getItem(flowKey);
-
-      if (flow) {
-        const [x = 0, y = 0] = flow.position;
-        setElements(flow.elements || []);
-        transform({ x, y, zoom: flow.zoom || 0 });
-      }
-    };
-
-    onRestoreFlow();
-  }, [setElements, transform]);
-
-  const onAdd = useCallback(() => {
-    const newNode = {
-      id: `random_node-${getNodeId()}`,
-      data: { label: 'Added node' },
-      position: { x: Math.random() * window.innerWidth - 100, y: Math.random() * window.innerHeight },
-    };
-    setElements((els) => els.concat(newNode));
-  }, [setElements]);
-
-  return (
-    <div className="save__controls">
-      <button onClick={onSave}>save</button>
-      <button onClick={onRestore}>restore</button>
-      <button onClick={onAdd}>add node</button>
-    </div>
-  );
-});
-
 const SaveRestore = () => {
   const [rfInstance, setRfInstance] = useState(null);
   const [elements, setElements] = useState(initialElements);
@@ -68,7 +20,7 @@ const SaveRestore = () => {
   return (
     <ReactFlowProvider>
       <ReactFlow elements={elements} onElementsRemove={onElementsRemove} onConnect={onConnect} onLoad={setRfInstance}>
-        {rfInstance && <Controls rfInstance={rfInstance} setElements={setElements} />}
+        <Controls rfInstance={rfInstance} setElements={setElements} />
       </ReactFlow>
     </ReactFlowProvider>
   );