import React, { useEffect, useState } from 'react';
import ReactFlow from 'reactflow';
import 'reactflow/dist/style.css';
import './styles.css';

const App = () => {
  const [elements, setElements] = useState([]);

  useEffect(() => {
    fetch('http://localhost:5000/api/data')
      .then(response => response.json())
      .then(data => {
        setElements(data.nodes.concat(data.edges));
      })
      .catch(error => console.error('Error:', error));
  }, []);

  return (
    <div className="app">
      <ReactFlow elements={elements} />
    </div>
  );
};

export default App;