From b4062e5a3e61bfe756a59c7db3e8a945eb9e9005 Mon Sep 17 00:00:00 2001
From: ruchi <ruchirawperera@gmail.com>
Date: Sat, 3 Apr 2021 15:59:25 -0400
Subject: [PATCH] search

---
 src/listings-page/ListingsPage.js         | 89 ++++++++++++++++++++---
 src/listings-page/data/property-data.json |  8 +-
 2 files changed, 82 insertions(+), 15 deletions(-)

diff --git a/src/listings-page/ListingsPage.js b/src/listings-page/ListingsPage.js
index 3aa80cf..4f03ce4 100644
--- a/src/listings-page/ListingsPage.js
+++ b/src/listings-page/ListingsPage.js
@@ -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
diff --git a/src/listings-page/data/property-data.json b/src/listings-page/data/property-data.json
index d6451e9..fea6ad5 100644
--- a/src/listings-page/data/property-data.json
+++ b/src/listings-page/data/property-data.json
@@ -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":[
 
             ],