auto refresh list

src/components/CreateScrapeRequest/CreateScrapeRequest.js

 import { useTranslation } from 'react-i18next';
 import Select from 'react-select'
 import { prices, beds, types, lifeStyles } from '../../constants/filters';
-import { createScrappes } from '../../request/scrappe';
 import './CreateScrapeRequest.scss'
+import PropTypes from 'prop-types';
 
-const CreateScrapeRequest = () => {
+
+const CreateScrapeRequest = ({ handleRequest }) => {
 
     const { t } = useTranslation();
-    const [inputLocation, setLocation] = useState('')
-    const [priceFilter, setPriceFilter] = useState('')
-    const [bedFilter, setBedFilter] = useState('')
-    const [typeFilter, setTypeFilter] = useState('')
-    const [lifeStyleFilter, setLifeStyleFilter] = useState('')
+    const [requestObject, setRequestObject] = useState({ location: '' })
 
     const handleChangePriceType = async selectedOption => {
-        setPriceFilter(selectedOption)
+        setRequestObject(s => ({ ...s, price: selectedOption.value }))
     };
     const handleChangeBedType = async selectedOption => {
-        setBedFilter(selectedOption)
+        setRequestObject(s => ({ ...s, beds: selectedOption.value }))
     };
     const handleChangeFilterType = async selectedOption => {
-        setTypeFilter(selectedOption)
+        setRequestObject(s => ({ ...s, type: selectedOption.value }))
     };
 
     const handleChangeLifeStyleType = async selectedOption => {
-        setLifeStyleFilter(selectedOption)
+        setRequestObject(s => ({ ...s, lifestyle: selectedOption.value }))
     };
 
-    async function handleSubmit(event) {
-        event.preventDefault()
-        const res = await createScrappes({ location: inputLocation, price: priceFilter.value, beds: bedFilter.value, type: typeFilter.value, lifestyle: lifeStyleFilter.value })
-        console.log(res)
-    }
+    console.log("requestObject", requestObject)
     return (
         <div className="card card-primary">
             <div className="card-header">
                     <div className="row">
                         <div className="col-md-3">
                             <div className="form-group">
-                                <input type="text" className="form-control input-field cursor-pointer" value={inputLocation} placeholder={t('createScrapeRequest.LocationPlaceholder')} onChange={e => setLocation(e.target.value)} />
+                                <input type="text" className="form-control input-field cursor-pointer" value={requestObject.location} placeholder={t('createScrapeRequest.LocationPlaceholder')} onChange={e => setRequestObject(s => ({ ...s, location: e.target.value }))} />
                             </div>
                         </div>
                         <div className="col-md-2">
                             <div className="form-group">
-                                <Select options={prices} onChange={handleChangePriceType} />
+                                <Select options={prices} value={{ name: requestObject.price, label: requestObject.price }} onChange={handleChangePriceType} />
                             </div>
                         </div>
                         <div className="col-md-2">
                             <div className="form-group">
-                                <Select className="cursor-pointer" options={beds} onChange={handleChangeBedType} />
+                                <Select className="cursor-pointer" value={{ name: requestObject.beds, label: requestObject.beds }} options={beds} onChange={handleChangeBedType} />
                             </div>
                         </div>
                         <div className="col-md-2">
-                            <Select className="cursor-pointer" options={types} onChange={handleChangeFilterType} />
+                            <Select className="cursor-pointer" value={{ name: requestObject.type, label: requestObject.type }} options={types} onChange={handleChangeFilterType} />
                         </div>
                         <div className="col-md-2">
-                            <Select className="cursor-pointer" options={lifeStyles} onChange={handleChangeLifeStyleType} />
+                            <Select className="cursor-pointer" value={{ name: requestObject.lifestyle, label: requestObject.lifestyle }} options={lifeStyles} onChange={handleChangeLifeStyleType} />
                         </div>
                         <div className="col-md-1">
-                            <button type="submit" onClick={handleSubmit} className="btn btn-outline-primary cursor-pointer">Request</button>
+                            <button type="button" onClick={() => { handleRequest(requestObject); setRequestObject({ location: '' }) }} className="btn btn-outline-primary cursor-pointer">Request</button>
                         </div>
                     </div>
                 </div>
     );
 };
 
-CreateScrapeRequest.propTypes = {};
+CreateScrapeRequest.propTypes = {
+    handleRequest: PropTypes.func
+};
 
 export default CreateScrapeRequest;

src/components/ScrapeRequest/ScrapeRequest.js

 import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
 import ScrappeStatus from './ScrappeStatus';
-import { executeScrappes } from '../../request/scrappe';
 import { SCRAPE_RESULTS_PAGE } from '../../constants/pages'
 import { Link } from 'react-router-dom';
 
-const ScrapeRequest = ({ scrape, index }) => {
+const ScrapeRequest = ({ scrape, index, handleExecute }) => {
     const { t } = useTranslation();
 
-    console.log("In req", scrape)
-
-    async function handleSubmit(event) {
-        event.preventDefault();
-        const res = await executeScrappes(scrape._id)
-        console.log("Execut", res)
-    }
     return (
         <tr>
             <td>
                 ))}
             </td>
             <td>
-                <ScrappeStatus status={scrape.status} handleSubmit={handleSubmit} />
+                <ScrappeStatus status={scrape.status} id={scrape._id} handleExecute={handleExecute} />
             </td>
         </tr>
     );
 
 ScrapeRequest.propTypes = {
     scrape: PropTypes.object,
-    index: PropTypes.number
+    index: PropTypes.number,
+    handleExecute: PropTypes.func
 };
 
 export default ScrapeRequest;

src/components/ScrapeRequest/ScrappeStatus.jsx

 import { useTranslation } from 'react-i18next';
 
 
-const ScrappeStatus = ({ status, handleSubmit }) => {
+const ScrappeStatus = ({ status, handleExecute, id }) => {
   const { t } = useTranslation();
-
+  console.log("id", id)
   if (status === 'requested')
-    return <button type="submit" className="btn btn-xs btn-block btn-primary" onClick={handleSubmit}><i className="fa fa-bell"></i>{t('common.execute')}</button>
+    return <button type="submit" className="btn btn-xs btn-block btn-primary" onClick={() => handleExecute(id)}><i className="fa fa-bell"></i>{t('common.execute')}</button>
   else if (status === 'done')
     return <span className='badge bg-success'>Done</span>
   else
 
 ScrappeStatus.propTypes = {
   status: PropTypes.string,
-  handleSubmit: PropTypes.func
+  id: PropTypes.string,
+  handleExecute: PropTypes.func
 };
 export default ScrappeStatus;

src/components/ScrapeRequests/ScrapeRequests.js

-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { getAllScrappes } from '../../request/scrappe';
+import PropTypes from 'prop-types';
 import ScrapeRequest from '../ScrapeRequest/ScrapeRequest';
 import './ScrappeRequests.scss'
 
 // const scrape = { Title: "#1 Chicago, IL", Count: "200", EstimatedTime: "20/7/2021 20:30AM", Url: "https://www.apartments.com/chicago-il/", Filters: [{ id: 1, type: "prices" }, { id: 2, type: "beds" }, { id: 3, type: "type" }, { id: 4, type: "lifestyle" }] };
-const ScrapeRequests = () => {
-  const [scrappes, setScrappes] = useState([])
+const ScrapeRequests = ({ scrappes, handleExecute }) => {
   const { t } = useTranslation();
 
-  useEffect(() => {
-    getAllScrappes().then(res => setScrappes(res.data))
-  }, [setScrappes])
-
-  console.log(scrappes)
   return (
     <div className="card">
       <div className="card-header">
               </tr>
             </thead>
             <tbody>
-              {scrappes.map((scrape, i) => <ScrapeRequest index={i + 1} key={scrape.id} scrape={scrape} />)}
+              {scrappes.map((scrape, i) => <ScrapeRequest handleExecute={handleExecute} index={i + 1} key={scrape._id} scrape={scrape} />)}
             </tbody>
           </table>
         </div>}
   );
 }
 
+ScrapeRequests.propTypes = {
+  handleExecute: PropTypes.func,
+  scrappes: PropTypes.array
+};
 export default ScrapeRequests;

src/pages/HomePage/HomePage.js

-import React from 'react';
-// import { Link } from 'react-router-dom';
+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))
+    setInterval(() => {
+      getAllScrappes().then(res => setScrappes(res.data))
+    }, 10000);
+    return () => clearInterval()
+  }, [])
+
+
+  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 (
     <>
-      <CreateScrapeRequest />
-      <ScrapeRequests />
-      {/* <Link to='/scrape-results' >See results</Link> */}
+      <CreateScrapeRequest handleRequest={handleRequest} />
+      <ScrapeRequests scrappes={scrappes} handleExecute={handleExecute} />
     </>
   );
 };