import React, {useState, useEffect} from 'react';
import Button from './Button';
import HubList from './HubList';
import HubMap from './HubList';
import './App.css';
import Banner from './Banner';



function SECAPIData() {
    const [displayData, setDisplayData] = useState({});

    const sendToBackend = () => {
        console.log(dataToBackend);

        fetch("http://localhost:4567/data", {
            method: "POST",
            body: JSON.stringify({ 
               "data" : dataToBackend
              }),
              headers: {
                "Content-Type": "application/json",
              },
              credentials: "same-origin"
        })
        
        .then(response  => response.json().then(data => setDisplayData(data)))
        .catch(error => console.log(error));
    }

    useEffect(() => sendToBackend(), []);
  
    return (
      <div className="mainGrid">
          <Banner></Banner>
          <HubList data={displayData}></HubList>
          <HubMap></HubMap>
      </div>
    );
}
  
export default SECAPIData;