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 983a64508e
commit 14c9fd95ca
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,
withGoogleMap,
Marker,
InfoWindow
InfoWindow,
useLoadScript
} from "react-google-maps";
import * as listingData from "./data/property-data.json";
import mapStyles from "./mapStyles";
import "./ListingsPage.css";
function Map(){
const [selectedProperty, setSelectedProperty] = useState(null);
@ -17,6 +22,8 @@ function Map(){
return (
<GoogleMap
defaultZoom={10}
defaultCenter={{lat: 45.4231, lng:-75.6931}}
@ -24,8 +31,10 @@ function Map(){
defaultOptions={{styles: mapStyles}}
>
{listingData.Properties.map(house => (
{
listingData.Properties.map(house => {
<Marker
key={house.LISTING_ID}
position={{
@ -46,10 +55,9 @@ function Map(){
/>
))}
})
}
{selectedProperty && (
@ -95,10 +103,6 @@ function Map(){
)}
</GoogleMap>
@ -117,6 +121,70 @@ class ListingsPage extends Component {
<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">
<h2> Map </h2>
<div style={{ width: "100vm", height: "800px" }}>
<MapWrapped

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

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