scraper-react/src/pages/HomePage/HomePage.js

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';
import { useTranslation } from 'react-i18next';

const HomePage = () => {
  const [scrappes, setScrappes] = useState([])
  const { t } = useTranslation();
  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" style={{ fontSize: '80px' }}>{t('scrapeRequests.Columns.Scrape')} </h1>
      <hr></hr>
      <h2 className="lead text-center text-muted" style={{ fontSize: '40px' }}>https://www.apartments.com/</h2>
      <br></br>
      <CreateScrapeRequest handleRequest={handleRequest} />
      <ScrapeRequests scrappes={scrappes} handleExecute={handleExecute} />
    </>
  );
};

HomePage.propTypes = {};

export default HomePage;