Create scrapeDetails page

src/components/ScrappeDetails/ScrappeDetails.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import { useTranslation } from 'react-i18next';
+import ScrappeStatus from '../../components/ScrapeRequest/ScrappeStatus'
+const ScrappeDetails = (details) => {
+    const {t} = useTranslation();
+    return (
+            (details.details) ? 
+                <section>
+                    <h2>Scrappe Details</h2>                    
+                    <br/>
+                    <div className="row">
+                        <div className="com-md-4">
+                            {
+                                (details.details.location) ?
+                                    <h3>{details.details.location}</h3>
+                                    : ''}
+                            {
+                                (details.details.estimate) ?
+                                    <span className="text-muted">{t('scrapeRequest.EstimatedTime')} {(new Date(details.details.estimate)).toLocaleString()}</span>
+                                    : ''}
+                        </div>
+                        <div className="col-md-4">
+                            {
+                                (details.details.filters && details.details.filters.length > 0) ?
+                                    <div className="filters-cont">
+                                        <h3>Filters</h3>
+                                        {details.details.filters.map((filter,i) => <span className="badge bg-primary m-1" key={i}>{filter.name}</span>) }
+                                    </div>
+                                    :'' }
+                        </div>
+                        <div className="col-md-1">
+                                {details.details.status ? <ScrappeStatus status = {details.details.status} /> : '' }
+                        </div>
+                    </div>
+                    
+                </section>
+                : ''
+            
+        
+    );
+
+}
+
+ScrappeDetails.propTypes = {
+    details: PropTypes.object
+};
+
+export default ScrappeDetails;

src/components/ScrappeResult/ScrapeResult.js

+import React from 'react';
+import PropTypes from 'prop-types';
+
+const ScrappeResult = (result) => {
+
+    return (
+        <div>
+            Result
+        </div>
+    );
+
+}
+
+ScrappeResult.propTypes = {
+    result: PropTypes.object
+};
+
+export default ScrappeResult;

src/helpers/CheckProperty.js

+export default function checkProperty(data){
+    (data !== undefined && data !==null)? true: false
+}

src/pages/ScrapeResults/ScrapeResultsPage.js

 import React, { useEffect, useState } from 'react';
 import { getByIdScrappe } from '../../request/scrappe';
+import ScrappeDetails from '../../components/ScrappeDetails/ScrappeDetails'
+//import ScrappeResult from '../../components/ScrappeResult/ScrappeResult'
 import PropTypes from 'prop-types';
 
 const ScrapeResultsPage = ({ location }) => {
 
   const [scrappeResults, setScrappeResults] = useState()
+  const [scrappeDetails, setScrappeDetails] = useState()
   useEffect(() => {
-    getByIdScrappe(location.id).then(res => res.data.status === 'done' ? setScrappeResults(res.data.result) : setScrappeResults(res.data))
+    getByIdScrappe(location.id)
+    .then(res => {
+        setScrappeDetails(res.data)
+    if(res.data.status==='done')
+    setScrappeResults(res.data.result)})
   }, [setScrappeResults])
+  console.log("scrappeDetails", scrappeDetails)
   console.log("scrappeResults", scrappeResults)
-  if (!scrappeResults)
-    return null
+ 
   return (
-    <div className="c-error-page">
-      <div className="c-error-page__content">
-        {scrappeResults.count}
-      </div>
-    </div>
+    <>
+        {/* ScrappeDetail */}
+        {console.log(scrappeDetails)}
+     
+        <ScrappeDetails details = {scrappeDetails} />
+        {/* {(scrappeResults !==undefined) 
+                    ? scrappeResults.map((result, i) => <ScrappeResult key={i} result = {result} />) 
+                    :''
+        */}
+     </> 
   );
 };