batuhan-basoglu/Kene-s-Cribs-Website
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

search

Browse source
This commit is contained in:
ruchi 2021-04-03 15:59:25 -04:00
parent 50e33ee4d4
commit e8006ba473
2 changed files with 82 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

89
src/listings-page/ListingsPage.js
View file

@ -4,12 +4,17 @@ import {
withScriptjs, withScriptjs,
withGoogleMap, withGoogleMap,
Marker, Marker,
InfoWindow InfoWindow,
useLoadScript
} from "react-google-maps"; } from "react-google-maps";
import * as listingData from "./data/property-data.json"; import * as listingData from "./data/property-data.json";
import mapStyles from "./mapStyles"; import mapStyles from "./mapStyles";
import "./ListingsPage.css"; import "./ListingsPage.css";
function Map(){ function Map(){
const [selectedProperty, setSelectedProperty] = useState(null); const [selectedProperty, setSelectedProperty] = useState(null);
@ -17,6 +22,8 @@ function Map(){
return ( return (
<GoogleMap <GoogleMap
defaultZoom={10} defaultZoom={10}
defaultCenter={{lat: 45.4231, lng:-75.6931}} defaultCenter={{lat: 45.4231, lng:-75.6931}}
@ -24,8 +31,10 @@ function Map(){
defaultOptions={{styles: mapStyles}} defaultOptions={{styles: mapStyles}}
> >
{listingData.Properties.map(house => ( {
listingData.Properties.map(house => {
<Marker <Marker
key={house.LISTING_ID} key={house.LISTING_ID}
position={{ position={{
@ -46,10 +55,9 @@ function Map(){
/> />
})
}
))}
{selectedProperty && ( {selectedProperty && (
@ -95,10 +103,6 @@ function Map(){
)} )}
</GoogleMap> </GoogleMap>
@ -117,6 +121,70 @@ class ListingsPage extends Component {
<section class="colored-section2" id="cta"> <section class="colored-section2" id="cta">
<div className="row">
<div className="col-4">
<div class="input-group rounded">
<input type="search" class="form-control rounded" placeholder="Search" aria-label="Search"
aria-describedby="search-addon" />
<span class="input-group-text border-0" id="search-addon">
<i class="fas fa-search"></i>
</span>
</div>
</div>
<div className="col-4">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<div className="col-4">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Beds
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
<div className="col-4">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Beds
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton3">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>
{/* {/*
@ -158,7 +226,6 @@ class ListingsPage extends Component {
<div class="col-12"> <div class="col-12">
<h2> Map </h2>
<div style={{ width: "100vm", height: "800px" }}> <div style={{ width: "100vm", height: "800px" }}>
<MapWrapped <MapWrapped

8
src/listings-page/data/property-data.json
View file

@ -5,7 +5,7 @@
{ {
"LISTING_ID": 1, "LISTING_ID": 1,
"ADDRESS": "8720 Russell Road", "ADDRESS": "8720 Russell Road",
"PRICE": "$500000", "PRICE": 400000,
"IMAGES":[ "IMAGES":[
], ],
@ -24,7 +24,7 @@
"LISTING_ID": 2, "LISTING_ID": 2,
"ADDRESS": "1490 Youville Drive", "ADDRESS": "1490 Youville Drive",
"PRICE": "$500000", "PRICE": 100000,
"IMAGES":[ "IMAGES":[
], ],
@ -44,7 +44,7 @@
"LISTING_ID": 3, "LISTING_ID": 3,
"ADDRESS": "100 Charlie Rogers Place", "ADDRESS": "100 Charlie Rogers Place",
"PRICE": "$500000", "PRICE": 200000,
"IMAGES":[ "IMAGES":[
], ],
@ -65,7 +65,7 @@
"LISTING_ID": 4, "LISTING_ID": 4,
"ADDRESS": "2785 8th Line Road", "ADDRESS": "2785 8th Line Road",
"PRICE": "$500000", "PRICE": 300000,
"IMAGES":[ "IMAGES":[
], ],