🐞 On Node Delete bug fixes

frontend/src/components/Nodes/Custom.js

@@ -67,7 +67,7 @@ export default function CustomNodeIframe({id, data}){
       <div className={` flex ${!collapsed ? '' : 'w-0 hidden'}`}>
                       <div title="Adjust Node Size" className="duration-300 cursor-pointer shadow-xl border-2 dark:border-white border-white h-10 w-10 mr-2 -mt-3 bg-Warm-Violet rounded-xl" onClick={() => {setSizeAdjuster((size) => !size)}}><TbResize className="h-full w-full text-white p-1"/></div>
                       <a href={data.host} target="_blank" rel="noopener noreferrer"><div title="Gradio Host Site" className="duration-300 cursor-pointer shadow-xl border-2 dark:border-white border-white h-10 w-10 mr-2 -mt-3 bg-Warm-Pink rounded-xl"><BiCube className="h-full w-full text-white p-1"/></div></a>
-                      <div title="Delete Node" className="duration-300 cursor-pointer shadow-xl border-2 dark:border-white border-white h-10 w-10 mr-2 -mt-3 bg-Warm-Red rounded-xl" onClick={() => data.delete([{id : id}])}><BsTrash className="h-full w-full text-white p-1"/></div>
+                      <div title="Delete Node" className="duration-300 cursor-pointer shadow-xl border-2 dark:border-white border-white h-10 w-10 mr-2 -mt-3 bg-Warm-Red rounded-xl" onClick={() => {data.delete([{id}])}}><BsTrash className="h-full w-full text-white p-1"/></div>
                       <div title="Refresh Node" className="duration-300 cursor-pointer shadow-xl border-2 dark:border-white border-white h-10 w-10 mr-2 -mt-3 bg-Warm-Orange rounded-xl" onClick={() => {setRefresh((old) => old++)}}><BiRefresh className="h-full w-full text-white p-1"/></div>
         </div>
       </div>

frontend/src/components/ReactFlow/ReactFlowEnv.js

@@ -36,6 +36,13 @@ export default function ReactEnviorment() {
     const reactFlowWrapper = useRef(null);
     const [tool, setTool] = useState(false)
 
+    const deleteNodeContains = (id) =>{setNodes((nds) => nds.filter(n => !n.id.includes(`${id}-`) ))}
+    const deleteEdge = useCallback((id) => setEdges((eds) => eds.filter(e => e.id !== id)), [setEdges])
+    const deleteNode = useCallback((id) =>{
+      setNodes(() => nodes.filter(n => n.id !== id ))
+    }, [setNodes, nodes])
+
+
     useEffect(() => {
       const restore = () => {
       const flow = JSON.parse(localStorage.getItem('flowkey'));
@@ -49,9 +56,8 @@ export default function ReactEnviorment() {
         }
       }
       restore()
-    },[])
+    },[deleteNode, deleteEdge])
 
-    const deleteEdge = (id) => setEdges((eds) => eds.filter(e => e.id !== id))
 
 
     const onNodesChange = useCallback(
@@ -79,7 +85,7 @@ export default function ReactEnviorment() {
           console.log(error)
         })
       },
-      [setEdges]
+      [setEdges, deleteEdge]
     );
 
 
@@ -89,8 +95,6 @@ export default function ReactEnviorment() {
       event.dataTransfer.dropEffect = 'move';
     }, []);
 
-    const deleteNodeContains = (id) =>{setNodes((nds) => nds.filter(n => !n.id.includes(`${id}-`) ))}
-    const deleteNode = (id) =>{setNodes((nds) => nds.filter(n => n.id !== id ))}
 
     const onSave = useCallback(() => {
       if (reactFlowInstance) {
@@ -152,7 +156,7 @@ export default function ReactEnviorment() {
           setNodes((nds) => nds.concat(newNode));
       }
       },
-      [reactFlowInstance, nodes]);
+      [reactFlowInstance, nodes, deleteNode]);
 
     return (
       <div className={`${theme ? "dark" : ""}`}>