import React, {useState, useEffect} from 'react';
import Button from './Button';
import HubList from './HubList';
import DateInput from './DateInput';



function SECAPIData() {
    const [displayData, setDisplayData] = useState({});
    const [startDate, setStartDate] = useState("");
    const [endDate, setEndDate] = useState("");

    const toEpochMilli = date => Date.parse(date);

    const getLinks = () => {
        fetch("http://localhost:4567/data", {
            method: "POST",
            body: JSON.stringify(
                { 
                    "start" : toEpochMilli(startDate), 
                    "end" : toEpochMilli(endDate)
                }),
              headers: {
                "Content-Type": "application/json",
              },
              credentials: "same-origin"
        })
        .then(res  => res.json())
        .then(data => setDisplayData(data))
        .catch(err => console.log(err));
    }
  
    return (
      <div>
          <h1>SECAPIData</h1>
          <DateInput setStart={setStartDate} setEnd={setEndDate}></DateInput>
          <Button onPress={getLinks}></Button>
          <HubList data={displayData}></HubList>
      </div>
    );
}
  
export default SECAPIData;