endpoints

src/components/CreateScrapeRequest/CreateScrapeRequest.js

-import React, {useState} from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import Select from 'react-select'
-import { prices, beds, types, lifeStyles  } from '../../constants/filters';
+import { prices, beds, types, lifeStyles } from '../../constants/filters';
+import { createScrappes } from '../../request/scrappe';
 import './CreateScrapeRequest.scss'
 
 const CreateScrapeRequest = () => {
 
-    const { t } = useTranslation();  
+    const { t } = useTranslation();
     const [inputLocation, setLocation] = useState('')
     const [priceFilter, setPriceFilter] = useState('')
     const [bedFilter, setBedFilter] = useState('')
     const [typeFilter, setTypeFilter] = useState('')
     const [lifeStyleFilter, setLifeStyleFilter] = useState('')
-   
+
     const handleChangePriceType = async selectedOption => {
         setPriceFilter(selectedOption)
     };
         setLifeStyleFilter(selectedOption)
     };
 
-    function handleSubmit (event){
+    async function handleSubmit(event) {
         event.preventDefault()
-        console.log(inputLocation);
-        console.log(priceFilter);
-        console.log(bedFilter);
-        console.log(typeFilter);
-        console.log(lifeStyleFilter);
-        
+        const res = await createScrappes({ location: inputLocation, price: priceFilter.value, beds: bedFilter.value, type: typeFilter.value, lifestyle: lifeStyleFilter.value })
+        console.log(res)
     }
-  return (
-    <div className="card card-primary">
-        <div className="card-header">
-        <h3 className="card-title">{t('createScrapeRequest.Title')}</h3>
-        </div>      
-        <form >
-        <div className="card-body">
-            <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)}/>
-                </div>
+    return (
+        <div className="card card-primary">
+            <div className="card-header">
+                <h3 className="card-title">{t('createScrapeRequest.Title')}</h3>
             </div>
-            <div className="col-md-2">
-                <div className="form-group">
-                    <Select options={prices} onChange={handleChangePriceType} />
+            <form >
+                <div className="card-body">
+                    <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)} />
+                            </div>
+                        </div>
+                        <div className="col-md-2">
+                            <div className="form-group">
+                                <Select options={prices} onChange={handleChangePriceType} />
+                            </div>
+                        </div>
+                        <div className="col-md-2">
+                            <div className="form-group">
+                                <Select className="cursor-pointer" options={beds} onChange={handleChangeBedType} />
+                            </div>
+                        </div>
+                        <div className="col-md-2">
+                            <Select className="cursor-pointer" options={types} onChange={handleChangeFilterType} />
+                        </div>
+                        <div className="col-md-2">
+                            <Select className="cursor-pointer" options={lifeStyles} onChange={handleChangeLifeStyleType} />
+                        </div>
+                        <div className="col-md-1">
+                            <button type="submit" onClick={handleSubmit} className="btn btn-outline-primary cursor-pointer">Request</button>
+                        </div>
+                    </div>
                 </div>
-            </div>
-            <div className="col-md-2">
-                <div className="form-group">
-                <Select className="cursor-pointer"  options={beds} onChange={handleChangeBedType}/>                    
-                </div>
-            </div>
-            <div className="col-md-2">               
-                <Select  className="cursor-pointer" options={types} onChange={handleChangeFilterType}/>                                  
-            </div>
-            <div className="col-md-2">                
-                <Select  className="cursor-pointer" options={lifeStyles} onChange={handleChangeLifeStyleType}/>
-            </div>
-            <div className="col-md-1">
-                <button   type="submit" onClick={handleSubmit} className="btn btn-outline-primary cursor-pointer">Request</button>
-            </div>
-            </div>
+            </form>
         </div>
-        </form>
-    </div>
-          
-  );
+
+    );
 };
 
 CreateScrapeRequest.propTypes = {};

src/components/ScrapeRequest/ScrapeRequest.js

 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
-import ScrappeStatus from '../ScrappeStatus/ScrappeStatus';
+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 { t } = useTranslation();
 
     console.log("In req", scrape)
 
-    function handleSubmit(event) {
+    async function handleSubmit(event) {
         event.preventDefault();
+        const res = await executeScrappes(scrape._id)
+        console.log("Execut", res)
     }
     return (
         <tr>
                 <span> | </span>
                 <span className="text-muted">{t('scrapeRequest.EstimatedTime')} {(new Date(scrape.estimate)).toLocaleString()}</span>
                 <span> | </span>
-                {t('scrapeRequest.ViewScrape')} <a href="scrappe.html"> {scrape.sourceUrl}</a>
+                {t('scrapeRequest.ViewScrape')} <Link to={{
+                    pathname: SCRAPE_RESULTS_PAGE,
+                    id: scrape._id
+                }}>{scrape.sourceUrl}</Link>
                 <p></p>
                 <p>
                 </p>
             </td>
             <td>
                 {scrape.filters.map(element => (
-                    <span key={element.value} className="badge bg-primary m-1">{element.name}</span>
+                    element.value && <span key={element.name} className="badge bg-primary m-1">{element.name}</span>
                 ))}
             </td>
             <td>

src/components/ScrappeStatus/ScrappeStatus.jsx → src/components/ScrapeRequest/ScrappeStatus.jsx

   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>
   else if (status === 'done')
-    return <div>DONEEE</div>
+    return <span className='badge bg-success'>Done</span>
   else
-    return <div>Pending</div>
+    return <span className='badge bg-warning'>Pending</span>
 
 }
 

src/components/ScrapeRequests/ScrapeRequests.js

 import { useTranslation } from 'react-i18next';
 import { getAllScrappes } from '../../request/scrappe';
 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 = () => {
       <div className="card-header">
         <h3 className="card-title">{t('scrapeRequests.Title')}</h3>
       </div>
-
-      <div className="card-body p-0">
-        <table className="table table-sm">
-          <thead>
-            <tr>
-              <th className='font-weight-bold'>{t('scrapeRequests.Columns.Scrape')}</th>
-              <th>{t('scrapeRequests.Columns.Filters')}</th>
-              <th>{t('scrapeRequests.Columns.Status')}</th>
-            </tr>
-          </thead>
-          <tbody>
-            {scrappes.map((scrape, i) => <ScrapeRequest index={i + 1} key={scrape.id} scrape={scrape} />)}
-          </tbody>
-        </table>
-      </div>
+      {scrappes.length === 0 ? <tbody><tr><td><span className='center-align'>Nothing to show</span></td></tr></tbody> :
+        <div className="card-body p-0">
+          <table className="table table-sm">
+            <thead>
+              <tr>
+                <th className='font-weight-bold'>{t('scrapeRequests.Columns.Scrape')}</th>
+                <th>{t('scrapeRequests.Columns.Filters')}</th>
+                <th>{t('scrapeRequests.Columns.Status')}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {scrappes.map((scrape, i) => <ScrapeRequest index={i + 1} key={scrape.id} scrape={scrape} />)}
+            </tbody>
+          </table>
+        </div>}
     </div>
   );
 }

src/components/ScrapeRequests/ScrappeRequests.scss

+.center-align {
+  text-align: center;
+  align-items: center;
+  justify-content: center;
+}

src/pages/ScrapeResults/ScrapeResultsPage.js

-import React from 'react';
+import React, { useEffect, useState } from 'react';
+import { getByIdScrappe } from '../../request/scrappe';
+import PropTypes from 'prop-types';
 
-const ScrapeResultsPage = () => {
+const ScrapeResultsPage = ({ location }) => {
+
+  const [scrappeResults, setScrappeResults] = useState()
+  useEffect(() => {
+    getByIdScrappe(location.id).then(res => res.data.status === 'done' ? setScrappeResults(res.data.result) : setScrappeResults(res.data))
+  }, [setScrappeResults])
+  console.log("scrappeResults", scrappeResults)
   return (
     <div className="c-error-page">
-        <div className="c-error-page__content">
-        Scrape results page
-        </div>
+      <div className="c-error-page__content">
+        {scrappeResults.count}
+      </div>
     </div>
   );
 };
 
-ScrapeResultsPage.propTypes = {};
+ScrapeResultsPage.propTypes = {
+  location: PropTypes.object
+};
 
 export default ScrapeResultsPage;

src/request/apiEndpoints.js

 export default {
   scrappe: {
-    getAll: 'scrapes'
+    getAll: 'scrapes',
+    getById: 'scrapes/{id}',
+    create: 'scrapes/',
+    execute: 'scrapes/{id}/execute'
   },
   accounts: {
     get: 'accounts/{accountUid}',

src/request/scrappe.js

-import { getRequest } from './index';
+import { getRequest, patchRequest, postRequest, replaceInUrl } from './index';
 import apiEndpoints from './apiEndpoints';
 
-
-export const getAllScrappes = () => {
-  console.log("API", apiEndpoints.scrappe.getAll)
-  const res = getRequest(apiEndpoints.scrappe.getAll);
-  console.log("Res", res)
-  return res
-}
+export const getAllScrappes = () => getRequest(apiEndpoints.scrappe.getAll)
+export const getByIdScrappe = (id) => getRequest(replaceInUrl(apiEndpoints.scrappe.getById, { id }))
+export const createScrappes = (scrappe) => postRequest(apiEndpoints.scrappe.create, scrappe)
+export const executeScrappes = (id) => patchRequest(replaceInUrl(apiEndpoints.scrappe.execute, { id }))