nikoladiligent
/
scraper-react
Следить 1
В избранное 0
Форкнуть 0
Код Задачи 0 Pull Request'ы 0 Релизы 0 Вики Активность
Просмотр исходного кода

Cleanup on details page

master
diligent 4 лет назад
Родитель
79f18a168f
Сommit
b7c5526e2b
6 измененных файлов: 79 добавлений и 73 удалений
Единый вид Показать статистику Diff
  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 Просмотреть файл

</head> </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;"> <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> <noscript>You need to enable JavaScript to run this app.</noscript>
<div class="wrapper">
<div id="root"></div>
<div id="root" class="wrapper">
</div> </div>
<!-- <!--
This HTML file is a template. This HTML file is a template.

+ 1
- 1
src/AppRoutes.js Просмотреть файл

//import PrivateRoute from './components/Router/PrivateRoute'; //import PrivateRoute from './components/Router/PrivateRoute';


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

+ 4
- 8
src/components/CardApartments/CardApartments.js Просмотреть файл

import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import getHours from '../../helpers/GetTodaysWorkingHours';
import CardPrice from '../CardPrice/CardPrice'; import CardPrice from '../CardPrice/CardPrice';
import './CardApartments.scss'; import './CardApartments.scss';


</div> </div>
</div> </div>
<div className="col-md-8"> <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>: ''} </h2>: ''}
{result.address != undefined ? {result.address != undefined ?
<p className="lead"> <p className="lead">
{result.description !== undefined ? result.description.substr(0,100) + "..." : ''} {result.description !== undefined ? result.description.substr(0,100) + "..." : ''}
</p> </p>
<div className="row"> <div className="row">
<div className="col-md-8">
<div className="col-md-9">
<div className="row"> <div className="row">
<div className="col"> <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> </div>
<div className="row"> <div className="row">

+ 36
- 33
src/components/ScrappeDetails/ScrappeDetails.js Просмотреть файл

import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import ScrappeStatus from '../../components/ScrapeRequest/ScrappeStatus' import ScrappeStatus from '../../components/ScrapeRequest/ScrappeStatus'
const ScrappeDetails = ({details}) => {
const {t} = useTranslation();
const ScrappeDetails = ({ details }) => {
const { t } = useTranslation();
return ( 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>
</div> </div>
</section>
: ''
</div>
</div>
: ''
); );


} }

+ 10
- 6
src/pages/HomePage/HomePage.js Просмотреть файл



return ( 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 Просмотреть файл



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

if (res.data.status === 'done')
setScrappeResults(res.data.result)
})
}, [setScrappeResults]) }, [setScrappeResults])
console.log("scrappeDetails", scrappeDetails) console.log("scrappeDetails", scrappeDetails)
return ( return (
<> <>
<nav className="main-header navbar navbar-expand-md navbar-light navbar-white"> <nav className="main-header navbar navbar-expand-md navbar-light navbar-white">
<div className="container"> <div className="container">
<Link to="/" className="navbar-brand">
<Link to="/" className="navbar-brand">
<span className="brand-text font-weight-light">Back to Scrape</span> <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> </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>
</div>
</>
); );
}; };



Редактирование Предпросмотр
Загрузка…
Отмена
Сохранить