added validation for description, fixed style

src/components/CreateScrapeRequest/CreateScrapeRequest.js

@@ -15,6 +15,7 @@ export function matchStateToTerm(state, value) {
 const CreateScrapeRequest = ({ handleRequest }) => {
 
     const [requestObject, setRequestObject] = useState({ location: '' })
+    const [showError, setShowError] = useState(false)
     const { t } = useTranslation();
 
 
@@ -32,23 +33,32 @@ const CreateScrapeRequest = ({ handleRequest }) => {
     //     setRequestObject(s => ({ ...s, lifestyle: selectedOption.value }))
     // };
 
+    const handleOnClick = () => {
+        if (requestObject.description) {
+            handleRequest(requestObject);
+            setRequestObject({ location: '', description: '' })
+        }
+        setShowError(true)
+    }
+
     console.log("requestObject", requestObject)
     return (
         <div className="card card-primary">
             <div className="card-header">
                 <h3 className="card-title">{t('createScrapeRequest.Title')}</h3>
             </div>
-            <form >
+            <form>
                 <div className="card-body">
                     <div className="row">
                         <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 }))} />
+                                {showError && !requestObject.description && <span style={{ color: "red" }}>This field is required!</span>}
                             </div>
                         </div>
                     </div>
                     <div className="row">
-                        <div className="col-md-3">
+                        <div className="col-md-5">
                             <div className="form-group">
                                 <Autocomplete
                                     wrapperProps={{ style: {} }}
@@ -104,7 +114,7 @@ const CreateScrapeRequest = ({ handleRequest }) => {
                             <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: '', description: '' }) }} className="btn btn-outline-primary cursor-pointer">Request</button>
+                            <button type="button" onClick={handleOnClick} className="btn btn-outline-primary cursor-pointer">Request</button>
                         </div>
                     </div>
                 </div>

src/components/ScrapeRequest/ScrapeRequest.js

@@ -13,12 +13,12 @@ const ScrapeRequest = ({ scrape, handleExecute }) => {
             <tr>
                 <td>
                     <p>
-                    </p><h3><Link to={{
+                    </p> <div className='row'><h3><Link to={{
                         pathname: SCRAPE_RESULTS_PAGE.replace(':id', scrape._id),
                         id: scrape._id
                     }}
-                        target="_blank" rel="noopener noreferrer">{scrape.description || 'No name given'}</Link></h3>
-                    <div className='row'>
+                        target="_blank" rel="noopener noreferrer">{scrape.description || 'No name given'}</Link></h3></div>
+                    <div className='row mb-2'>
                         {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> */}
@@ -34,7 +34,7 @@ const ScrapeRequest = ({ scrape, handleExecute }) => {
                 </td>
                 <td>
                     {scrape.filters.map(element => (
-                        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>
+                        element.value && <span key={element.name} className="badge bg-primary m-1"><span>{element.name}:</span> <br></br> <span>{element.name === 'baths' ? element.value + '+' : element.value}</span></span>
                     ))}
                 </td>
                 <td>

src/components/ScrapeRequest/ScrappeStatus.jsx

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