added description

src/components/CreateScrapeRequest/CreateScrapeRequest.js

@@ -38,15 +38,17 @@ const CreateScrapeRequest = ({ handleRequest }) => {
             <form >
                 <div className="card-body">
                     <div className="row">
-                        {/* <div className="col-md-3">
+                        <div className="col-md-3">
                             <div className="form-group">
-                                <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 }))} />
+                                <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="col-md-3">
                             <div className="form-group">
                                 <Autocomplete
                                     menuStyle={{
+                                        display: 'block',
+                                        margin: 0,
                                         padding: ".375rem .75rem",
                                         fontSize: '1rem',
                                         fontWeight: '400',
@@ -81,19 +83,19 @@ const CreateScrapeRequest = ({ handleRequest }) => {
                         </div>
                         <div className="col-md-2">
                             <div className="form-group">
-                                <Select options={prices}  onChange={handleChangePriceType} placeholder={t('createScrapeRequest.PricePlaceholder')} />
+                                <Select options={prices} onChange={handleChangePriceType} placeholder={t('createScrapeRequest.PricePlaceholder')} />
                             </div>
                         </div>
                         <div className="col-md-2">
                             <div className="form-group">
-                                <Select   className="cursor-pointer" options={beds}  onChange={handleChangeBedType} placeholder={t('createScrapeRequest.BedsPlaceholder')}/>
+                                <Select className="cursor-pointer" options={beds} onChange={handleChangeBedType} placeholder={t('createScrapeRequest.BedsPlaceholder')} />
                             </div>
                         </div>
                         <div className="col-md-2">
-                            <Select  className="cursor-pointer"  options={types} onChange={handleChangeFilterType} placeholder={t('createScrapeRequest.TypePlaceholder')}  />
+                            <Select className="cursor-pointer" options={types} onChange={handleChangeFilterType} placeholder={t('createScrapeRequest.TypePlaceholder')} />
                         </div>
                         <div className="col-md-2">
-                            <Select  className="cursor-pointer"  options={lifeStyles} onChange={handleChangeLifeStyleType} placeholder={t('createScrapeRequest.LifestylePlaceholder')}/>
+                            <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>

src/constants/filters.js

@@ -1,29 +1,33 @@
 export const prices = [
-    { value: '$1000', label: '$1000' },
-    { value: '$1100', label: '$1100' },
-    { value: '$1300', label: '$1300' },
-    { value: '$1500', label: '$1500' },
-    { value: '$1800', label: '$1800' },
-    { value: '$2000', label: '$2000' }
-  ];
-  
- export const beds = [
-    { value: '1', label: '1' },
-    { value: '2', label: '2' },
-    { value: '3', label: '3' },
-    { value: '4+', label: '4+' }    
-  ];
+  { value: '$1000', label: '$1000' },
+  { value: '$1100', label: '$1100' },
+  { value: '$1300', label: '$1300' },
+  { value: '$1500', label: '$1500' },
+  { value: '$1800', label: '$1800' },
+  { value: '$2000', label: '$2000' }
+];
+
+export const beds = [
+  { value: '1', label: '1' },
+  { value: '2', label: '2' },
+  { value: '3', label: '3' },
+  { value: '4+', label: '4+' }
+];
 
 export const types = [
-    { value: 'apartments', label: 'apartments' },
-    { value: 'houses', label: 'houses' },
-    { value: 'condos', label: 'condos' },
-    { value: 'townhomes', label: 'townhomes' },    
-  ];
-export  const lifeStyles = [
-    { value: 'student-housing', label: 'Student' },
-    { value: 'senior-housing', label: 'Senior Housing' },
-    { value: 'short-term', label: 'Short Term' },
-    { value: 'military', label: 'Military Housing'},
-    {value:'corporate' , label: 'Corporate Housing'}
-];
+  { value: 'apartments', label: 'apartments' },
+  { value: 'houses', label: 'houses' },
+  { value: 'condos', label: 'condos' },
+  { value: 'townhomes', label: 'townhomes' },
+];
+export const lifeStyles = [
+  { value: 'student-housing', label: 'Student' },
+  { value: 'senior-housing', label: 'Senior Housing' },
+  { value: 'short-term', label: 'Short Term' },
+  { value: 'military', label: 'Military Housing' },
+  { value: 'corporate', label: 'Corporate Housing' }
+];
+
+export const scrapeFrom = [
+  { value: 'www.apartments.com', label: 'www.apartments.com' },
+]

src/i18n/resources/en.js

@@ -26,7 +26,7 @@ export default {
     remove: 'Remove',
     invite: 'Invite',
     save: 'Save',
-    execute:'Execute',
+    execute: 'Execute',
     complete: 'Complete',
     download: 'Download',
     yes: 'Yes',
@@ -53,7 +53,7 @@ export default {
     usernameRequired: 'Username is required.',
     passwordRequired: 'A Password is required.',
     forgotYourPassword: 'Forgot your password?',
-    forgotPasswordEmail:'Email',
+    forgotPasswordEmail: 'Email',
     useDifferentEmail: 'Use different email address or username',
   },
   password: {
@@ -82,29 +82,30 @@ export default {
     goBack: 'Go back to homepage',
     logout: 'Logout',
   },
-  apiErrors:{
-    ClientIpAddressIsNullOrEmpty:"Client Ip address is null or empty"
+  apiErrors: {
+    ClientIpAddressIsNullOrEmpty: "Client Ip address is null or empty"
   },
   createScrapeRequest: {
     Title: "Request new scrappe",
-    LocationPlaceholder : "Location or Point of Interest",
+    LocationPlaceholder: "Location or Point of Interest",
     PricePlaceholder: "price",
-    BedsPlaceholder:"beds",
-    LifestylePlaceholder :"lifestyle",
-    TypePlaceholder: "type"
+    BedsPlaceholder: "beds",
+    LifestylePlaceholder: "lifestyle",
+    TypePlaceholder: "type",
+    DescriptionPlaceholder: "Project description"
 
   },
   scrapeRequests: {
     Title: "Scrappes",
     Columns: {
-      Scrape:"Scrappe",
-      Filters:"Filters",
-      Status:"Status"
+      Scrape: "Data Consolidator",
+      Filters: "Filters",
+      Status: "Status"
     }
   },
-  scrapeRequest:{
+  scrapeRequest: {
     EstimatedTime: "Estimated time:",
-    ViewScrape:"view scrape origin"
+    ViewScrape: "view scrape origin"
   }
 
 };

src/pages/HomePage/HomePage.js

@@ -3,6 +3,8 @@ import CreateScrapeRequest from '../../components/CreateScrapeRequest/CreateScra
 import ScrapeRequests from '../../components/ScrapeRequests/ScrapeRequests';
 import { createScrappes, executeScrappes, getAllScrappes } from '../../request/scrappe';
 import { useTranslation } from 'react-i18next';
+import Select from 'react-select'
+import { scrapeFrom } from '../../constants/filters';
 
 const HomePage = () => {
   const [scrappes, setScrappes] = useState([])
@@ -37,7 +39,8 @@ const HomePage = () => {
         <div className="container">
           <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>
+          {/* <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>
           <br></br>
           <CreateScrapeRequest handleRequest={handleRequest} />
           <ScrapeRequests scrappes={scrappes} handleExecute={handleExecute} />