fixies for demo

src/components/CreateScrapeRequest/CreateScrapeRequest.js

 import React, { useState } from 'react';
 import Select from 'react-select'
-import { prices, beds, types, lifeStyles } from '../../constants/filters';
+import { baths, beds, types, lifeStyles } from '../../constants/filters';
 import './CreateScrapeRequest.scss'
 import PropTypes from 'prop-types';
 import { states } from '../../constants/states'
     const { t } = useTranslation();
 
 
-    const handleChangePriceType = async selectedOption => {
-        setRequestObject(s => ({ ...s, price: selectedOption.value }))
+    const handleChangeBathType = async selectedOption => {
+        setRequestObject(s => ({ ...s, baths: selectedOption.value }))
     };
     const handleChangeBedType = async selectedOption => {
         setRequestObject(s => ({ ...s, beds: selectedOption.value }))
     console.log("requestObject", requestObject)
     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="col-md-12">
                             <div className="form-group">
                                 <input type="text" className="form-control input-field" value={requestObject.description} placeholder={t('createScrapeRequest.DescriptionPlaceholder')} onChange={e => setRequestObject(s => ({ ...s, description: e.target.value }))} />
                             </div>
                         </div>
+                    </div>
+                    <div className="row">
                         <div className="col-md-3">
                             <div className="form-group">
                                 <Autocomplete
                         </div>
                         <div className="col-md-2">
                             <div className="form-group">
-                                <Select options={prices} onChange={handleChangePriceType} placeholder={t('createScrapeRequest.PricePlaceholder')} />
+                                <Select className="cursor-pointer" options={beds} onChange={handleChangeBedType} placeholder={t('createScrapeRequest.BedsPlaceholder')} />
                             </div>
                         </div>
                         <div className="col-md-2">
                             <div className="form-group">
-                                <Select className="cursor-pointer" options={beds} onChange={handleChangeBedType} placeholder={t('createScrapeRequest.BedsPlaceholder')} />
+                                <Select options={baths} onChange={handleChangeBathType} placeholder={t('createScrapeRequest.BathsPlaceholder')} />
                             </div>
                         </div>
                         <div className="col-md-2">
                             <Select className="cursor-pointer" options={lifeStyles} onChange={handleChangeLifeStyleType} placeholder={t('createScrapeRequest.LifestylePlaceholder')} />
                         </div>
                         <div className="col-md-1">
-                            <button type="button" onClick={() => { handleRequest(requestObject); setRequestObject({ location: '' }) }} className="btn btn-outline-primary cursor-pointer">Request</button>
+                            <button type="button" onClick={() => { handleRequest(requestObject); setRequestObject({ location: '', description: '' }) }} className="btn btn-outline-primary cursor-pointer">Request</button>
                         </div>
                     </div>
                 </div>

src/components/ScrapeRequest/ScrapeRequest.js

 import { SCRAPE_RESULTS_PAGE } from '../../constants/pages'
 import { Link } from 'react-router-dom';
 
-const ScrapeRequest = ({ scrape, index, handleExecute }) => {
+const ScrapeRequest = ({ scrape, handleExecute }) => {
     const { t } = useTranslation();
 
     return (
         <tr>
             <td>
                 <p>
-                  {console.log(scrape)}
+                    {console.log(scrape)}
                 </p><h3><Link to={{
                     pathname: SCRAPE_RESULTS_PAGE.replace(':id', scrape._id),
                     id: scrape._id
-                }}>#{index} {scrape.location}</Link></h3>               
+                }}
+                    target="_blank" rel="noopener noreferrer">{scrape.description || 'No name given'}</Link></h3>
                 <p>
-                    <a className='text-sm mr-3' href={scrape.sourceUrl}><i className="fas fa-external-link-square-alt"></i> https://www.apartments.com</a>
-                    <span className="lead mr-2">Count : <span className='text-info'>{scrape.count}</span></span>
-                    { (scrape.startDate !== undefined && scrape.startDate !== null) ?
-                        <span className="lead mr-2">Time:  <span className="text-info">{(new Date(scrape.startDate)).toLocaleString() } - {(scrape.endDate != undefined && scrape.endDate!==null) ? (new Date(scrape.endDate)).toLocaleString():''}</span> </span>
-                        :<span className="lead mr-2">{t('scrapeRequest.EstimatedTime')} <span className='text-info'>{(new Date(scrape.estimate)).toLocaleString()}</span></span>
+                    {scrape.location && <span className="mr-2">Location: <span className='text-info'>{scrape.location}</span></span>}
+                    <a className='mr-1' href={scrape.sourceUrl} target="_blank" rel="noopener noreferrer"><i className="fas fa-external-link-square-alt"></i> https://www.apartments.com</a>
+                    {/* <span className="text-lg">Id: {scrape._id}</span> */}
+                </p>
+                <p>
+                    <span className="mr-1">Count: <span className='text-info'>{scrape.count}</span></span>
+                    {scrape.createDate && <span className="mr-1">Creation time: <span className='text-info'>{(new Date(scrape.createDate)).toLocaleString()}</span></span>}
+                    {(scrape.startDate !== undefined && scrape.startDate !== null) ?
+                        <span className="mr-1">Time:  <span className="text-info">{(new Date(scrape.startDate)).toLocaleString()} - {(scrape.endDate != undefined && scrape.endDate !== null) ? (new Date(scrape.endDate)).toLocaleString() : ''}</span> </span>
+                        : <span className="mr-1">{t('scrapeRequest.EstimatedTime')} <span className='text-info'>{(new Date(scrape.estimate)).toLocaleString()}</span></span>
                     }
                 </p>
             </td>
             <td>
                 {scrape.filters.map(element => (
-                    element.value && <span key={element.value} className="badge bg-primary m-1">{element.value}</span>
+                    element.value && <span key={element.value} className="badge bg-primary m-1"><span>{element.name}:</span> <br></br> <span>{element.name === 'baths' ? element.value + '+' : element.value}</span></span>
                 ))}
             </td>
             <td>
 
 ScrapeRequest.propTypes = {
     scrape: PropTypes.object,
-    index: PropTypes.number,
     handleExecute: PropTypes.func
 };
 

src/constants/filters.js

   { value: '4+', label: '4+' }
 ];
 
+export const baths = [
+  { value: '1', label: '1+' },
+  { value: '2', label: '2+' },
+  { value: '3', label: '3+' }
+];
+
 export const types = [
   { value: 'apartments', label: 'apartments' },
   { value: 'houses', label: 'houses' },

src/i18n/resources/en.js

     ClientIpAddressIsNullOrEmpty: "Client Ip address is null or empty"
   },
   createScrapeRequest: {
-    Title: "Request new scrappe",
+    Title: "Search criteria",
     LocationPlaceholder: "Location or Point of Interest",
     PricePlaceholder: "price",
+    BathsPlaceholder: "baths",
     BedsPlaceholder: "beds",
     LifestylePlaceholder: "lifestyle",
     TypePlaceholder: "type",

src/pages/HomePage/HomePage.js

           <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> */}
-          <Select className="cursor-pointer" isDisabled defaultValue={scrapeFrom[0]} options={scrapeFrom}></Select>
+          <Select className="cursor-pointer" defaultValue={scrapeFrom[0]} options={scrapeFrom}></Select>
           <br></br>
           <CreateScrapeRequest handleRequest={handleRequest} />
           <ScrapeRequests scrappes={scrappes} handleExecute={handleExecute} />