autocomplete done

src/App.js

@@ -3,7 +3,7 @@ import { Router } from 'react-router-dom';
 import { Helmet } from 'react-helmet-async';
 import i18next from 'i18next';
 import history from './store/utils/history';
-import Header from './components/Header/Header';
+// import Header from './components/Header/Header';
 // import Sidebar from './components/Sidebar/Sidebar';
 import AppRoutes from './AppRoutes';
 
@@ -15,13 +15,13 @@ const App = () => (
         {i18next.t('app.title')}
       </title>
     </Helmet>
-        <>
-            <Header />
-            {/* <Sidebar /> */}
-            <AppRoutes />
-        </>
+    <>
+      {/* <Header /> */}
+      {/* <Sidebar /> */}
+      <AppRoutes />
+    </>
   </Router>
 
-  );
+);
 
 export default App;

src/components/CreateScrapeRequest/CreateScrapeRequest.js

@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
 import Select from 'react-select'
 import { prices, beds, types, lifeStyles } from '../../constants/filters';
 import './CreateScrapeRequest.scss'
 import PropTypes from 'prop-types';
 import { states } from '../../constants/states'
 import Autocomplete from 'react-autocomplete';
+import { useTranslation } from 'react-i18next';
 
 export function matchStateToTerm(state, value) {
     return (
@@ -14,8 +14,9 @@ export function matchStateToTerm(state, value) {
 }
 const CreateScrapeRequest = ({ handleRequest }) => {
 
-    const { t } = useTranslation();
     const [requestObject, setRequestObject] = useState({ location: '' })
+    const { t } = useTranslation();
+
 
     const handleChangePriceType = async selectedOption => {
         setRequestObject(s => ({ ...s, price: selectedOption.value }))
@@ -34,9 +35,6 @@ const CreateScrapeRequest = ({ handleRequest }) => {
     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">
@@ -45,19 +43,42 @@ const CreateScrapeRequest = ({ handleRequest }) => {
                                 <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 }))} />
                             </div>
                         </div> */}
-                        <Autocomplete
-                            getItemValue={(item) => item.label}
-                            items={states.map(s => ({ label: s }))}
-                            renderItem={(item, isHighlighted) =>
-                                <div style={{ background: isHighlighted ? 'lightgray' : 'white' }}>
-                                    {item.label}
-                                </div>
-                            }
-                            shouldItemRender={matchStateToTerm}
-                            value={requestObject.location}
-                            onChange={(e, val) => setRequestObject(s => ({ ...s, location: val }))}
-                            onSelect={(val) => setRequestObject(s => ({ ...s, location: val }))}
-                        />
+                        <div className="col-md-3">
+                            <div className="form-group">
+                                <Autocomplete
+                                    menuStyle={{
+                                        padding: ".375rem .75rem",
+                                        fontSize: '1rem',
+                                        fontWeight: '400',
+                                        lineHeight: 1.5,
+                                        color: "#495057",
+                                        backgroundColor: '#fff',
+                                        backgroundClip: "padding-box",
+                                        border: "1px solid #ced4da",
+                                        borderRadius: ".25rem",
+                                        boxShadow: "inset 0 0 0 transparent",
+                                        transition: " border-color .15s ease-in-out,box-shadow .15s ease-in-out",
+                                        background: 'rgba(255, 255, 255, 0.9)',
+                                        position: 'fixed',
+                                        overflow: 'auto',
+                                        maxHeight: '50%',
+                                        zIndex: 2001
+                                    }}
+                                    renderInput={(props) => <input {...props} type="text" className="form-control input-field cursor-pointer" placeholder={t('createScrapeRequest.LocationPlaceholder')} />}
+                                    getItemValue={(item) => item.label}
+                                    items={states.map(s => ({ label: s }))}
+                                    renderItem={(item, isHighlighted) =>
+                                        <div style={{ background: isHighlighted ? 'lightgray' : 'white', }}>
+                                            {item.label}
+                                        </div>
+                                    }
+                                    shouldItemRender={matchStateToTerm}
+                                    value={requestObject.location}
+                                    onChange={(e, val) => setRequestObject(s => ({ ...s, location: val }))}
+                                    onSelect={(val) => setRequestObject(s => ({ ...s, location: val }))}
+                                />
+                            </div>
+                        </div>
                         <div className="col-md-2">
                             <div className="form-group">
                                 <Select options={prices} value={{ name: requestObject.price, label: requestObject.price }} onChange={handleChangePriceType} />

src/components/ScrapeRequest/ScrappeStatus.jsx

@@ -7,11 +7,11 @@ const ScrappeStatus = ({ status, handleExecute, id }) => {
   const { t } = useTranslation();
   console.log("id", id)
   if (status === 'requested')
-    return <button type="submit" className="btn btn-xs btn-block btn-primary" onClick={() => handleExecute(id)}><i className="fa fa-bell"></i>{t('common.execute')}</button>
+    return <button type="submit" className="btn btn-sm btn-block btn-primary" onClick={() => handleExecute(id)}><i className="fa fa-bell"></i>{t('common.execute')}</button>
   else if (status === 'done')
-    return <span className='badge bg-success'>Done</span>
+    return <span className='badge bg-success text-lg'>Done</span>
   else
-    return <span className='badge bg-warning'>Pending</span>
+    return <span className='badge bg-danger text-lg'>Pending</span>
 
 }
 

src/components/ScrapeRequests/ScrapeRequests.js

@@ -10,17 +10,15 @@ const ScrapeRequests = ({ scrappes, handleExecute }) => {
 
   return (
     <div className="card">
-      <div className="card-header">
-        <h3 className="card-title">{t('scrapeRequests.Title')}</h3>
-      </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>
+                <th className='text-black-50 font-weight-bold'>{t('scrapeRequests.Columns.Scrape')}</th>
+                <th className='text-black-50 font-weight-bold'>{t('scrapeRequests.Columns.Filters')}</th>
+                <th className='text-black-50 font-weight-bold'>{t('scrapeRequests.Columns.Status')}</th>
               </tr>
             </thead>
             <tbody>

src/pages/HomePage/HomePage.js

@@ -2,10 +2,11 @@ import React, { useEffect, useState } from 'react';
 import CreateScrapeRequest from '../../components/CreateScrapeRequest/CreateScrapeRequest';
 import ScrapeRequests from '../../components/ScrapeRequests/ScrapeRequests';
 import { createScrappes, executeScrappes, getAllScrappes } from '../../request/scrappe';
+import { useTranslation } from 'react-i18next';
 
 const HomePage = () => {
   const [scrappes, setScrappes] = useState([])
-
+  const { t } = useTranslation();
   useEffect(() => {
     getAllScrappes().then(res => setScrappes(res.data))
     const interval = setInterval(() => {
@@ -32,6 +33,10 @@ const HomePage = () => {
 
   return (
     <>
+      <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>
+      <br></br>
       <CreateScrapeRequest handleRequest={handleRequest} />
       <ScrapeRequests scrappes={scrappes} handleExecute={handleExecute} />
     </>