minor fixes

src/components/ScrapeRequest/ScrapeRequest.js

@@ -1,39 +1,40 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import PropTypes from 'prop-types';
 
-const ScrapeRequest = (scrape) => {
-
+const ScrapeRequest = ({ scrape }) => {
     const { t } = useTranslation();
 
-    function handleSubmit(event)
-    {
+    function handleSubmit(event) {
         event.preventDefault();
-
     }
     return (
         <tr>
             <td>
                 <p>
-                    </p><h3>{scrape.Title}</h3>
-                    <span className="text-muted">Count {scrape.Count} +</span>
-                    <span> | </span>
-                    <span className="text-muted">{t('scrapeRequest.EstimatedTime')} {scrape.EstimatedTime}</span>
-                    <span> | </span>
-                    {t('scrapeRequest.ViewScrape')} <a href="scrappe.html"> {scrape.Url}</a>
+                </p><h3>{scrape.Title}</h3>
+                <span className="text-muted">Count {scrape.Count} +</span>
+                <span> | </span>
+                <span className="text-muted">{t('scrapeRequest.EstimatedTime')} {scrape.EstimatedTime}</span>
+                <span> | </span>
+                {t('scrapeRequest.ViewScrape')} <a href="scrappe.html"> {scrape.Url}</a>
                 <p></p>
                 <p>
                 </p>
-                </td>
-                <td>
-                {/* {scrape.Filters.map(element => (
-                     <span key={element.id} className="badge bg-primary">{element.type}</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>
+            <td>
+                {scrape.Filters.map(element => (
+                    <span key={element.id} className="badge bg-primary m-1">{element.type}</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>
         </tr>
     );
 }
 
+ScrapeRequest.propTypes = {
+    scrape: PropTypes.object
+};
+
 export default ScrapeRequest;

src/components/ScrapeRequests/ScrapeRequests.js

@@ -2,29 +2,29 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 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 ScrapeRequests = () => {
 
-    const { t } = useTranslation();
-    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"}] };
-    return (
-    
-            <div className="card">
-              <div className="card-header">
-                <h3 className="card-title">{t('scrapeRequests.Title')}</h3>
-              </div>
-             
-              <div classNameName="card-body p-0">
-                <table className="table table-sm">
-                  <thead>
-                    <tr>
-                      <th>{t('scrapeRequests.Columns.Scrape')}</th>
-                      <th>{t('scrapeRequests.Columns.Filters')}</th>
-                      <th>{t('scrapeRequests.Columns.Status')}</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                      <ScrapeRequest scrape = {scrape} />
-                    {/* <tr>
+  const { t } = useTranslation();
+  return (
+
+    <div className="card">
+      <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>
+            <ScrapeRequest scrape={scrape} />
+            {/* <tr>
                       <td>
                         <p>
                           </p><h3> </h3>
@@ -82,14 +82,11 @@ const ScrapeRequests = () => {
                       <td><span className="badge bg-success">Done</span></td>
                     </tr>
                      */}
-                  </tbody>
-                </table>
-              </div>
-              
-            </div>
-        
-    );
-
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
 }
 
 export default ScrapeRequests;

src/pages/HomePage/HomePage.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+// import { Link } from 'react-router-dom';
 import CreateScrapeRequest from '../../components/CreateScrapeRequest/CreateScrapeRequest';
 import ScrapeRequests from '../../components/ScrapeRequests/ScrapeRequests';
 
@@ -7,10 +7,10 @@ const HomePage = () => {
 
   return (
     <>
-      <CreateScrapeRequest />   
-      <ScrapeRequests />           
-      <Link to='/scrape-results' >See results</Link>
-    </>       
+      <CreateScrapeRequest />
+      <ScrapeRequests />
+      {/* <Link to='/scrape-results' >See results</Link> */}
+    </>
   );
 };