nikoladiligent
/
scraper-react
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Cleanup on details page

master
diligent 4 years ago
parent
79f18a168f
commit
b7c5526e2b
6 changed files with 79 additions and 73 deletions
Split View Show Diff Stats
  1. 1
    2
      public/index.html
  2. 1
    1
      src/AppRoutes.js
  3. 4
    8
      src/components/CardApartments/CardApartments.js
  4. 36
    33
      src/components/ScrappeDetails/ScrappeDetails.js
  5. 10
    6
      src/pages/HomePage/HomePage.js
  6. 27
    23
      src/pages/ScrapeResults/ScrapeResultsPage.js

+ 1
- 2
public/index.html View File

@@ -48,8 +48,7 @@
</head>
<body class="sidebar-collapse layout-top-nav" data-new-gr-c-s-check-loaded="14.1020.0" data-gr-ext-installed="" style="height: auto;">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div class="wrapper">
<div id="root"></div>
<div id="root" class="wrapper">
</div>
<!--
This HTML file is a template.

+ 1
- 1
src/AppRoutes.js View File

@@ -20,7 +20,7 @@ import ErrorPage from './pages/ErrorPages/ErrorPage';
//import PrivateRoute from './components/Router/PrivateRoute';

const AppRoutes = () => (
<div className="container content">
<div>
<Switch>
<Route exact path={BASE_PAGE} component={HomePage} />
<Route exact path={HOME_PAGE} component={HomePage} />

+ 4
- 8
src/components/CardApartments/CardApartments.js View File

@@ -1,6 +1,5 @@
import React from 'react';
import PropTypes from 'prop-types';
import getHours from '../../helpers/GetTodaysWorkingHours';
import CardPrice from '../CardPrice/CardPrice';
import './CardApartments.scss';

@@ -76,10 +75,8 @@ const CardApartments = ({result, index}) => {
</div>
</div>
<div className="col-md-8">
{result.name !== undefined ? <h2><a>{result.name}

</a>
{result.contact != undefined && result.contact.officeHours && getHours(result.contact.officeHours) !== null ? <span className="text-black-50 text-sm"><i className="fas fa-clock"></i> Open { getHours(result.contact.officeHours)} Today</span>: '' }
{result.name !== undefined ? <h2><a href={result.url}>{result.name}
</a> <span className="text-black-50 text-sm"><i className="fas fa-clock"></i> {result.contact.todayHours}</span>
</h2>: ''}
{result.address != undefined ?
<p className="lead">
@@ -98,13 +95,12 @@ const CardApartments = ({result, index}) => {
{result.description !== undefined ? result.description.substr(0,100) + "..." : ''}
</p>
<div className="row">
<div className="col-md-8">
<div className="col-md-9">
<div className="row">
<div className="col">
{
result.features.map((feature, i) => <p key={i} className="badge badge-primary">{feature}</p>)
result.features.slice(0, 8).map((feature, i) => <p key={i} className="badge badge-primary ml-1">{feature}</p>)
}
</div>
</div>
<div className="row">

+ 36
- 33
src/components/ScrappeDetails/ScrappeDetails.js View File

@@ -2,42 +2,45 @@ 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();
const ScrappeDetails = ({ details }) => {
const { t } = useTranslation();
return (
(details) ?
<section>
<h2>Scrappe Details</h2>
<br/>
<div className="row">
<div className="com-md-4">
{
(details.location) ?
<h3>{details.location}</h3>
: ''}
{
(details.estimate) ?
<span className="text-muted">{t('scrapeRequest.EstimatedTime')} {(new Date(details.estimate)).toLocaleString()}</span>
: ''}
</div>
<div className="col-md-4">
{
(details.filters && details.filters.length > 0) ?
<div className="filters-cont">
<h3>Filters</h3>
{details.filters.map((filter,i) => <span className="badge bg-primary m-1" key={i}>{filter.name}:{filter.value}</span>) }
</div>
:'' }
</div>
<div className="col-md-1">
{details.status ? <ScrappeStatus status = {details.status} /> : '' }
(details) ?
<div className='container'>
<div className="row mb-2">
<div className="col-sm-10">
<h2 className="m-0"> Scrappe <a href={details.sourceUrl} className='text-sm'> {details.sourceUrl} </a></h2>
<br />
<div className="row m-0">
<div className="com-md-4">
{
(details.location) ?
<h3>{details.location}</h3>
: ''}
{
(details.estimate) ?
<span className="text-muted">{t('scrapeRequest.EstimatedTime')} {(new Date(details.estimate)).toLocaleString()}</span>
: ''}
</div>
<div className="col-md-4">
{
(details.filters && details.filters.length > 0) ?
<div className="filters-cont">
<h3>Filters</h3>
{details.filters.filter((i) => i.value != null).map((filter, i) => <span className="badge bg-primary m-1" key={i}>{filter.name}: {filter.value}</span>)}
</div>
: ''}
</div>
<div className="col-md-1">
{details.status ? <ScrappeStatus status={details.status} /> : ''}
</div>
</div>
</div>
</section>
: ''
</div>
</div>
: ''
);

}

+ 10
- 6
src/pages/HomePage/HomePage.js View File

@@ -33,12 +33,16 @@ 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} />
<div className='content' >
<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>
<br></br>
<CreateScrapeRequest handleRequest={handleRequest} />
<ScrapeRequests scrappes={scrappes} handleExecute={handleExecute} />
</div>
</div>
</>
);
};

+ 27
- 23
src/pages/ScrapeResults/ScrapeResultsPage.js View File

@@ -10,41 +10,45 @@ const ScrapeResultsPage = ({ location }) => {

const [scrappeResults, setScrappeResults] = useState()
const [scrappeDetails, setScrappeDetails] = useState()
useEffect(() => {
getByIdScrappe(location.id)
.then(res => {
.then(res => {
setScrappeDetails(res.data)
if(res.data.status==='done')
setScrappeResults(res.data.result)})

if (res.data.status === 'done')
setScrappeResults(res.data.result)
})
}, [setScrappeResults])
console.log("scrappeDetails", scrappeDetails)
return (
<>
<nav className="main-header navbar navbar-expand-md navbar-light navbar-white">
<div className="container">
<Link to="/" className="navbar-brand">
<Link to="/" className="navbar-brand">
<span className="brand-text font-weight-light">Back to Scrape</span>
</Link>
</Link>
</div>
</nav>
<div className='content-wrapper'>
<div className='content-header'>
<ScrappeDetails details={scrappeDetails} />
</div>
</nav>
<ScrappeDetails details = {scrappeDetails} />
<div className ='content' >
<div className="container">
<div className="row">
{(scrappeResults !== undefined) ?
scrappeResults.map((result, i) => <ScrappeResult key={i} index={i} type={scrappeDetails.filters.find(el => el.name=="type" && el.value !== null)} result = {result} />)
:''
}
</div>
</div>
<div className='content mt-1' >
<div className="container">
<div className="row">
{(scrappeResults !== undefined) ?
scrappeResults.map((result, i) => <ScrappeResult key={i} index={i} type={scrappeDetails.filters.find(el => el.name == "type" && el.value !== null)} result={result} />)
: ''
}
</div>
</div>
</>
</div>
</div>
</>
);
};


Write Preview
Loading…
Cancel
Save