import React, { useEffect, useState } from 'react';
import ReactFlow from 'reactflow';

import 'reactflow/dist/style.css';

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

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch("/api/data");
        const data = await response.json();
        setElements([...data.nodes, ...data.edges]);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();
  }, []);

  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <ReactFlow elements={elements} />
    </div>
  );
};

export default App;