env, launch, getall

.env

-
-REACT_APP_BASE_API_URL=https://portalgatewayapi-q1.bullioninternational.info/
+REACT_APP_BASE_API_URL=http://localhost:3333/

.vscode/launch.json

+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Debug in Chrome",
+      "url": "http://localhost:3000",
+      "webRoot": "${workspaceRoot}",
+      "runtimeArgs": [
+        "--disable-web-security",
+        "--ignore-certificate-errors"
+      ],
+      "sourceMaps": true,
+      "sourceMapPathOverrides": {
+        "webpack:///./dist/applications/*": "${workspaceRoot}/src/*"
+      }
+    },
+  ]
+}

src/components/ScrapeRequest/ScrapeRequest.js

 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import PropTypes from 'prop-types';
+import ScrappeStatus from '../ScrappeStatus/ScrappeStatus';
 
-const ScrapeRequest = ({ scrape }) => {
+const ScrapeRequest = ({ scrape, index }) => {
     const { t } = useTranslation();
 
+    console.log("In req", scrape)
+
     function handleSubmit(event) {
         event.preventDefault();
     }
         <tr>
             <td>
                 <p>
-                </p><h3>{scrape.Title}</h3>
-                <span className="text-muted">Count {scrape.Count} +</span>
+                </p><h3>#{index} {scrape.location}</h3>
+                <span className="text-muted">Count {scrape.count} +</span>
                 <span> | </span>
-                <span className="text-muted">{t('scrapeRequest.EstimatedTime')} {scrape.EstimatedTime}</span>
+                <span className="text-muted">{t('scrapeRequest.EstimatedTime')} {(new Date(scrape.estimate)).toLocaleString()}</span>
                 <span> | </span>
-                {t('scrapeRequest.ViewScrape')} <a href="scrappe.html"> {scrape.Url}</a>
+                {t('scrapeRequest.ViewScrape')} <a href="scrappe.html"> {scrape.sourceUrl}</a>
                 <p></p>
                 <p>
                 </p>
             </td>
             <td>
-                {scrape.Filters.map(element => (
-                    <span key={element.id} className="badge bg-primary m-1">{element.type}</span>
+                {scrape.filters.map(element => (
+                    <span key={element.value} className="badge bg-primary m-1">{element.name}</span>
                 ))}
             </td>
-            <td><button type="submit" className="btn btn-xs btn-block btn-primary" onClick={handleSubmit}><i className="fa fa-bell"></i>{t('common.execute')}</button>
+            <td>
+                <ScrappeStatus status={scrape.status} handleSubmit={handleSubmit} />
             </td>
         </tr>
     );
 }
 
 ScrapeRequest.propTypes = {
-    scrape: PropTypes.object
+    scrape: PropTypes.object,
+    index: PropTypes.number
 };
 
 export default ScrapeRequest;

src/components/ScrapeRequests/ScrapeRequests.js

-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { getAllScrappes } from '../../request/scrappe';
 import ScrapeRequest from '../ScrapeRequest/ScrapeRequest';
 
-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 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 { t } = useTranslation();
-  return (
 
+  useEffect(() => {
+    getAllScrappes().then(res => setScrappes(res.data))
+  }, [setScrappes])
+
+  console.log(scrappes)
+  return (
     <div className="card">
       <div className="card-header">
         <h3 className="card-title">{t('scrapeRequests.Title')}</h3>
             </tr>
           </thead>
           <tbody>
-            <ScrapeRequest scrape={scrape} />
-            {/* <tr>
-                      <td>
-                        <p>
-                          </p><h3> </h3>
-                          <span className="text-muted">Count 200+</span>
-                          <span> | </span>
-                          <span className="text-muted">Estimated time 20/7/2021 20:30AM</span>
-                          <span> | </span>
-                          view scrape origin <a href="scrappe.html">https://www.apartments.com/chicago-il/</a>
-                        <p></p>
-                        <p>
-                        </p>
-                      </td>
-                      <td>
-                        <span className="badge bg-primary">price</span>
-                        <span className="badge bg-primary">beds</span>
-                        <span className="badge bg-primary">type</span>
-                        <span className="badge bg-primary">lifestyle</span>
-                      </td>
-                      <td><button className="btn btn-xs btn-block btn-primary"><i className="fa fa-bell"></i>Execute</button>
-                      </td>
-                    </tr>
-                    <tr>
-                      <td>
-                        <h3>#2 New York, NY </h3>
-                        <span className="text-muted">Count 200+</span>
-                        <span> | </span>
-                        <span className="text-muted">Estimated time 20/7/2021 20:30AM</span>
-                        <span> | </span>
-                        view scrape origin <a href="scrappe.html">https://www.apartments.com/chicago-il/</a>
-                      </td>
-                      <td>
-                        <span className="badge bg-primary">price</span>
-                        <span className="badge bg-primary">beds</span>
-                        <span className="badge bg-primary">type</span>
-                        <span className="badge bg-primary">lifestyle</span>
-                      </td>
-                      <td><span className="badge bg-warning">Pending</span></td>
-                    </tr>
-                    
-                     <tr>
-                      <td>
-                        <h3>#3 New York, NY </h3>
-                        <span className="text-muted">Count 200+</span>
-                        <span> | </span>
-                        <span className="text-muted">Estimated time 20/7/2021 20:30AM</span>
-                        <span> | </span>
-                        view scrape origin <a href="scrappe.html">https://www.apartments.com/chicago-il/</a>
-                      </td>
-                      <td>
-                        <span className="badge bg-primary">price</span>
-                        <span className="badge bg-primary">beds</span>
-                        <span className="badge bg-primary">type</span>
-                        <span className="badge bg-primary">lifestyle</span>
-                      </td>
-                      <td><span className="badge bg-success">Done</span></td>
-                    </tr>
-                     */}
+            {scrappes.map((scrape, i) => <ScrapeRequest index={i + 1} key={scrape.id} scrape={scrape} />)}
           </tbody>
         </table>
       </div>

src/components/ScrappeStatus/ScrappeStatus.jsx

+import React from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+
+
+const ScrappeStatus = ({ status, handleSubmit }) => {
+  const { t } = useTranslation();
+
+  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>
+  else
+    return <div>Pending</div>
+
+}
+
+ScrappeStatus.propTypes = {
+  status: PropTypes.string,
+  handleSubmit: PropTypes.func
+};
+export default ScrappeStatus;

src/request/apiEndpoints.js

 export default {
+  scrappe: {
+    getAll: 'scrapes'
+  },
   accounts: {
     get: 'accounts/{accountUid}',
     getCurrentUserPermissions:

src/request/index.js

   headers: {
     'Content-Type': 'application/json',
   },
-  withCredentials: true,
   paramsSerializer: (params) =>
     queryString.stringify(params, { arrayFormat: 'comma' }),
 });

src/request/scrappe.js

+import { getRequest } 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
+}