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

developing Price card

scraperSetails
Nikola Ignjatovic 4 years ago
parent
1f534270a0
commit
561a5fcd51
8 changed files with 186 additions and 112 deletions
Split View Show Diff Stats
  1. 4
    2
      public/index.html
  2. 111
    90
      src/components/CardApartments/CardApartments.js
  3. 4
    0
      src/components/CardApartments/CardApartments.scss
  4. 3
    0
      src/components/CardHouses/CardHouses.js
  5. 37
    0
      src/components/CardPrice/CardPrice.js
  6. 6
    3
      src/components/CardTownHouses/CardTownHouses.js
  7. 10
    9
      src/components/ScrappeResult/ScrappeResult.js
  8. 11
    8
      src/pages/ScrapeResults/ScrapeResultsPage.js

+ 4
- 2
public/index.html View File

@@ -46,9 +46,11 @@
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
<title>React App</title>
</head>
<body class="hold-transition sidebar-mini layout-fixed">
<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 id="root"></div>
<div class="wrapper">
<div id="root"></div>
</div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.

+ 111
- 90
src/components/CardApartments/CardApartments.js View File

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

const CardApartments = ({result, index}) => {
const carouselId = "carouselExampleIndicators".concat(index);
const carouselIndicator = "#".concat(carouselId);
const pricesId = "prices".concat(index);
const pricesIndicatord = "#".concat(pricesId);
return(
<>
{
console.log(result)
}
<div className="card">
<div className="card-body">
{result.lastUpdate !=undefined ?
@@ -17,106 +23,121 @@ const CardApartments = ({result, index}) => {
</div>
</div> :''
}
<div className="row">
<div className="col-md-4">
<div id={carouselId} className="carousel slide" data-ride="carousel">
<ol className="carousel-indicators">
{result.images.map((image, i) =>
(image !== undefined && image.src !==undefined ?
i === 1 ?
<li data-target={carouselIndicator} data-slide-to={i} className="active"></li>
:
<li data-target={carouselIndicator} data-slide-to={i} className=""></li>
:""
))}
</ol>
<div className="carousel-inner">
{
result.images.map((image, i) =>
(image !== undefined && image.src !== undefined ?
i === 0 ?
<div className="carousel-item active" key={i} >
<img height="269px" className="d-block w-100"
src={image.src}
alt= {i} />
</div>
:
<div className="carousel-item" key={i} >
<img height="269px" className="d-block w-100"
src={image.src}
alt= {i} />
</div>
:'')
)
}
<div className="row">
<div className="col-md-4">
<div id={carouselId} className="carousel slide" data-ride="carousel">
<ol className="carousel-indicators">
{result.images.map((image, i) =>
(image !== undefined && image.src !==undefined ?
i === 1 ?
<li data-target={carouselIndicator} data-slide-to={i} className="active"></li>
:
<li data-target={carouselIndicator} data-slide-to={i} className=""></li>
:""
))}
</ol>
<div className="carousel-inner">
{
result.images.map((image, i) =>
(image !== undefined && image.src !== undefined ?
i === 0 ?
<div className="carousel-item active" key={i} >
<img height="269px" className="d-block w-100"
src={image.src}
alt= {i} />
</div>
:
<div className="carousel-item" key={i} >
<img height="269px" className="d-block w-100"
src={image.src}
alt= {i} />
</div>
:'')
)
}
</div>
<a className="carousel-control-prev" href={carouselIndicator} role="button"
data-slide="prev">
<span className="carousel-control-custom-icon" aria-hidden="true">
<i className="fas fa-chevron-left"></i>
</span>
<span className="sr-only">Previous</span>
</a>
<a className="carousel-control-next" href={carouselIndicator} role="button"
data-slide="next">
<span className="carousel-control-custom-icon" aria-hidden="true">
<i className="fas fa-chevron-right"></i>
</span>
<span className="sr-only">Next</span>
</a>
</div>
<a className="carousel-control-prev" href={carouselIndicator} role="button"
data-slide="prev">
<span className="carousel-control-custom-icon" aria-hidden="true">
<i className="fas fa-chevron-left"></i>
</span>
<span className="sr-only">Previous</span>
</a>
<a className="carousel-control-next" href={carouselIndicator} role="button"
data-slide="next">
<span className="carousel-control-custom-icon" aria-hidden="true">
<i className="fas fa-chevron-right"></i>
</span>
<span className="sr-only">Next</span>
</a>
</div>
</div>
<div className="col-md-8">
{result.name !== undefined ? <h2><a>{result.name}
<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>: '' }
</h2>: ''}
{result.address != undefined ?
<p className="lead">
{result.address.street !== undefined ? <span> {result.address.street}, </span>:''}
{result.address.city !== undefined ? <span> {result.address.city}, </span>:''}
{result.address.zip !== undefined ? <span> {result.address.zip.code} {result.address.zip.state}</span>:''}
</p>
: ''}
{result.rentInfo !=undefined ? <h3 className="strong">{result.rentInfo}</h3>:'' }
<p className="card-text mb-1">
{result.description !== undefined ? result.description.substr(0,100) + "..." : ''}
</p>
<div className="row">
<div className="col-md-8">
<div className="row">
<div className="col">
{
result.features.map((feature, i) => <p key={i} className="badge badge-primary">{feature}</p>)
}
</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>: '' }
</h2>: ''}
{result.address != undefined ?
<p className="lead">
{result.address.street !== undefined ? <span> {result.address.street}, </span>:''}
{result.address.city !== undefined ? <span> {result.address.city}, </span>:''}
{result.address.zip !== undefined ? <span> {result.address.zip.code} {result.address.zip.state}</span>:''}
</p>
: ''}
<h3 className="strong">
<span>{result.rentInfo !=undefined ? result.rentInfo:'' } </span>
<a className="text-sm" data-toggle="collapse" href={pricesIndicatord} role="button" aria-expanded="true" aria-controls="collapseExample">
view all prices
</a>
</h3>
<p className="card-text mb-1">
{result.description !== undefined ? result.description.substr(0,100) + "..." : ''}
</p>
<div className="row">
<div className="col-md-8">
<div className="row">
<div className="col">
{
result.features.map((feature, i) => <p key={i} className="badge badge-primary">{feature}</p>)
}
</div>
</div>
<div className="row">
{ result.contact !== undefined && result.contact.phone != undefined ? <span className="mr-3 lead"><i className="fas fa-phone">{result.contact.phone}</i></span> : ''}
{ result.contact !== undefined && result.contact.url !== undefined ? <span className="mr-3 lead"><a href={result.contact.url}><i className="fas fa-external-link-square-alt"></i> View property site</a></span>: '' }
</div>
</div>
<div className="row">
{ result.contact !== undefined && result.contact.phone != undefined ? <span className="mr-3 lead"><i className="fas fa-phone">{result.contact.phone}</i></span> : ''}
{ result.contact !== undefined && result.contact.url !== undefined ? <span className="mr-3 lead"><a href={result.contact.url}><i className="fas fa-external-link-square-alt"></i> View property site</a></span>: '' }
</div>
</div>
<div className="col-md-3">
<div className="info-box mb-0">
<span className="info-box-icon bg-danger"><i className="far fa-star"></i></span>
{result.review != undefined ?
<div className="info-box-content">
<span className="info-box-text">Review</span>
<span className="info-box-number">{result.review} stars</span>
</div>
:''}
<div className="col-md-3">
<div className="info-box mb-0">
<span className="info-box-icon bg-danger"><i className="far fa-star"></i></span>
{result.review != undefined ?
<div className="info-box-content">
<span className="info-box-text">Review</span>
<span className="info-box-number">{result.review} stars</span>
</div>
:''}
</div>
</div>
</div>
</div>

</div>
</div>
</div>
{/* { (result.prices !== undefined && result.prices.length > 0) ? */}
<div className="collapse" id={pricesId} >
<hr />
<div className="row">
{ result.prices.map((price,index) => <CardPrice key={index} info={price} />) }
</div>
</div>
{/* :'' */}
</div>
</div>
</>

+ 4
- 0
src/components/CardApartments/CardApartments.scss View File

@@ -1,4 +1,8 @@
.image-height
{
height: 269px;
}
.card-body
{
position: relative;
}

+ 3
- 0
src/components/CardHouses/CardHouses.js View File

@@ -7,6 +7,9 @@ const CardHouses = ({result, index}) => {

return(
<>
{
console.log("houses or condo")
}
<div className="card">
<div className="card-body">
{result.lastUpdate !=undefined ?

+ 37
- 0
src/components/CardPrice/CardPrice.js View File

@@ -0,0 +1,37 @@

import React from 'react';
import PropTypes from 'prop-types';

const CardPrice = ({info}) =>
{
return (
<div className="col-md-6">
{console.log(info)}
<div className="card card-body">
<div className="row">
<div className="col-md-5">
{info.url !==undefined ? <img className="w-100" src={info.url} /> :''}
</div>
<div className="col-md-7">
<h2 className="">{(info.name != undefined? info.name:'') }</h2>
<p className="lead mb-0">{(info.rent != undefined? info.rent:'') }</p><br />
<p className="text-muted">
<span>{info.details.rooms}, </span>
<span>{info.details.baths}, </span>
<span>{info.details.area}, </span>
<span>{info.details.available}, </span>
</p>
</div>
</div>
</div>
</div>
);
}

CardPrice.propTypes = {
info: PropTypes.object,
}

export default CardPrice;

src/components/CardCondos/CardCondos.js → src/components/CardTownHouses/CardTownHouses.js View File

@@ -1,12 +1,15 @@
import React from 'react';
import PropTypes from 'prop-types';

const CardCondos = ({result, index}) => {
const CardTownHouses = ({result, index}) => {
const carouselId = "carouselExampleIndicators".concat(index);
const carouselIndicator = "#".concat(carouselId);

return(
<>
{
console.log("town houses")
}
<div className="card">
<div className="card-body">
{result.lastUpdate !=undefined ?
@@ -114,9 +117,9 @@ const CardCondos = ({result, index}) => {

}

CardCondos.propTypes = {
CardTownHouses.propTypes = {
result: PropTypes.object,
index : PropTypes.string
}

export default CardCondos;
export default CardTownHouses;

+ 10
- 9
src/components/ScrappeResult/ScrappeResult.js View File

@@ -1,18 +1,19 @@
import React from 'react';
import PropTypes from 'prop-types';
//import CardApartments from '../CardApartments/CardApartments'
import CardApartments from '../CardApartments/CardApartments'
import CardHouses from '../CardHouses/CardHouses';
import CardTownHouses from '../CardTownHouses/CardTownHouses';
const ScrappeResult = ({result, type, index}) => {
return (
<>
{console.log(type)}
{
//if(type="aparments")
// <CardApartments index = {index} result={result} />

//else if(type="houses")
<CardHouses index ={index} result={result} />
<>
<div className='col-lg-12'>
{ (type !== undefined && type !== null) ?
(type.value === "apartments") ? <CardApartments index = {index} result={result} />
: (type.value === "houses") ? <CardHouses index ={index} result={result} />
: <CardTownHouses index={index} result={result} />
:''
}
</div>
</>
);


+ 11
- 8
src/pages/ScrapeResults/ScrapeResultsPage.js View File

@@ -20,20 +20,23 @@ const ScrapeResultsPage = ({ location }) => {
setScrappeResults(res.data.result)})
}, [setScrappeResults])
console.log("scrappeDetails", scrappeDetails)
console.log("scrappeResults", scrappeResults)
return (
<>
<Link to="/" className="navbar-brand">
<span className="brand-text font-weight-light">Back</span>
</Link>
<ScrappeDetails details = {scrappeDetails} />
</Link>
<ScrappeDetails details = {scrappeDetails} />
<div className ='content' >
{(scrappeResults !== undefined) ?
scrappeResults.map((result, i) => <ScrappeResult key={i} index={i} type ={scrappeDetails.filters.find(el => el.name="type")} result = {result} />)
:''
}
<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>
</>
);

Write Preview
Loading…
Cancel
Save