search, style minor changed

src/components/CreateScrapeRequest/CreateScrapeRequest.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import Select from 'react-select'
-import { baths, beds, types, lifeStyles } from '../../constants/filters';
+import { baths, beds, types } from '../../constants/filters';
 import './CreateScrapeRequest.scss'
 import PropTypes from 'prop-types';
 import { states } from '../../constants/states'
@@ -28,9 +28,9 @@ const CreateScrapeRequest = ({ handleRequest }) => {
         setRequestObject(s => ({ ...s, type: selectedOption.value }))
     };
 
-    const handleChangeLifeStyleType = async selectedOption => {
-        setRequestObject(s => ({ ...s, lifestyle: selectedOption.value }))
-    };
+    // const handleChangeLifeStyleType = async selectedOption => {
+    //     setRequestObject(s => ({ ...s, lifestyle: selectedOption.value }))
+    // };
 
     console.log("requestObject", requestObject)
     return (
@@ -51,6 +51,7 @@ const CreateScrapeRequest = ({ handleRequest }) => {
                         <div className="col-md-3">
                             <div className="form-group">
                                 <Autocomplete
+                                    wrapperProps={{ style: {} }}
                                     menuStyle={{
                                         display: 'block',
                                         margin: 0,
@@ -99,9 +100,9 @@ const CreateScrapeRequest = ({ handleRequest }) => {
                         <div className="col-md-2">
                             <Select className="cursor-pointer" options={types} onChange={handleChangeFilterType} placeholder={t('createScrapeRequest.TypePlaceholder')} />
                         </div>
-                        <div className="col-md-2">
+                        {/* <div className="col-md-2">
                             <Select className="cursor-pointer" options={lifeStyles} onChange={handleChangeLifeStyleType} placeholder={t('createScrapeRequest.LifestylePlaceholder')} />
-                        </div>
+                        </div> */}
                         <div className="col-md-1">
                             <button type="button" onClick={() => { handleRequest(requestObject); setRequestObject({ location: '', description: '' }) }} className="btn btn-outline-primary cursor-pointer">Request</button>
                         </div>

src/components/ScrapeRequest/ScrapeRequest.js

@@ -18,19 +18,19 @@ const ScrapeRequest = ({ scrape, handleExecute }) => {
                         id: scrape._id
                     }}
                         target="_blank" rel="noopener noreferrer">{scrape.description || 'No name given'}</Link></h3>
-                    <p>
+                    <div className='row'>
                         {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>
+                    </div>
+                    <div className='row'>
                         <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>
+                    </div>
                 </td>
                 <td>
                     {scrape.filters.map(element => (

src/components/SearchScrapes/SearchScrapes.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+import PropTypes from 'prop-types';
+
+
+const SearchScrapes = ({ handleSearch }) => {
+  return (
+    <input className='form-control input-field mb-3' placeholder='Search' onChange={(e) => handleSearch(e.target.value)}></input>
+  )
+}
+SearchScrapes.propTypes = {
+  handleSearch: PropTypes.func
+};
+
+export default SearchScrapes

src/pages/HomePage/HomePage.js

@@ -3,14 +3,16 @@ import CreateScrapeRequest from '../../components/CreateScrapeRequest/CreateScra
 import ScrapeRequests from '../../components/ScrapeRequests/ScrapeRequests';
 import { createScrappes, estimateScrappes, executeScrappes, getAllScrappes } from '../../request/scrappe';
 import { useTranslation } from 'react-i18next';
-import Select from 'react-select'
-import { scrapeFrom } from '../../constants/filters';
+// import Select from 'react-select'
+// import { scrapeFrom } from '../../constants/filters';
 import CustomModal from '../../components/Modals/Modal';
+import SearchScrapes from '../../components/SearchScrapes/SearchScrapes';
 
 const HomePage = () => {
   const [scrappes, setScrappes] = useState([])
   const [showModal, setShowModal] = useState(false)
   const [request, setRequest] = useState()
+  const [searchQuery, setSearchQuery] = useState('')
   const { t } = useTranslation();
 
   useEffect(() => {
@@ -55,6 +57,10 @@ const HomePage = () => {
     }
   }
 
+  function handleSearch(query) {
+    setSearchQuery(query)
+  }
+
   return (
     <>
       <CustomModal showModal={showModal} handleClose={() => setShowModal(false)} handleConfirm={handleConfirm} />
@@ -63,10 +69,15 @@ const HomePage = () => {
           <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" defaultValue={scrapeFrom[0]} options={scrapeFrom}></Select>
+          {/* <Select className="cursor-pointer" defaultValue={scrapeFrom[0]} options={scrapeFrom}></Select> */}
+          <div className="form-check" >
+            <input type="checkbox" disabled checked className="form-check-input" />
+            <label className="form-check-label text-md">www.apartments.com</label>
+          </div>
           <br></br>
           <CreateScrapeRequest handleRequest={handleRequest} />
-          <ScrapeRequests scrappes={scrappes} handleExecute={handleExecute} />
+          <SearchScrapes handleSearch={handleSearch} />
+          <ScrapeRequests scrappes={scrappes.filter(a => a.description?.toLowerCase()?.includes(searchQuery.toLowerCase()) || !a.description)} handleExecute={handleExecute} />
         </div>
       </div>
     </>