import React, { useEffect, useState } from 'react';
import CreateScrapeRequest from '../../components/CreateScrapeRequest/CreateScrapeRequest';
import ScrapeRequests from '../../components/ScrapeRequests/ScrapeRequests';
import { createScrappes, executeScrappes, getAllScrappes } from '../../request/scrappe';
const HomePage = () => {
  const [scrappes, setScrappes] = useState([])

  useEffect(() => {
    getAllScrappes().then(res => setScrappes(res.data))
    const interval = setInterval(() => {
      getAllScrappes().then(res => setScrappes(res.data))
    }, 10000);
    return () => clearInterval(interval)
  }, [])


  async function handleRequest(reqObj) {
    console.log(reqObj)
    const res = await createScrappes(reqObj)
    if (res.status === 200) {
      getAllScrappes().then(res => setScrappes(res.data))
    }
  }

  async function handleExecute(id) {
    const res = await executeScrappes(id)
    if (res.status === 204) {
      getAllScrappes().then(res => setScrappes(res.data))
    }
  }

  return (
    <>
      <h1 className="lead text-center" >Scrapper </h1>     

    
      <CreateScrapeRequest handleRequest={handleRequest} />
      <ScrapeRequests scrappes={scrappes} handleExecute={handleExecute} />
    </>
  );
};

HomePage.propTypes = {};

export default HomePage;
