Search Feature: Update map on prediction selection

client/src/components/Search/index.js

@@ -2,20 +2,22 @@ import { h , Component, cloneElement } from 'preact';
 import style from './style';
 import axios from 'axios';
 import {API_SERVER} from '../../../config';
-const OK_Status = 'OK';
-
+const OK_STATUS = 'OK';
+let marker;
 export default class Search extends Component {
   constructor(props) {
     super(props);
     this.state = {
       value: '',
       predictions: [],
       placeIDs: [],
+      marker: null,
+      position: null,
     };
 
     this.handleChange = this.handleChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
-    this.onPlaceFound = this.onPlaceFound.bind(this);
+    this.handleSelectedPlace = this.handleSelectedPlace.bind(this);
   }
 
   handleChange(event) {
@@ -42,14 +44,13 @@ export default class Search extends Component {
       lat: this.props.position.lat,
       lng: this.props.position.lng,
       }).then((response) => { 
-        if(response.data.status == OK_Status)
+        if(response.data.status == OK_STATUS)
         {
-          let [searchResult] = response.data.results;
-          this.onPlaceFound(searchResult);
+          const [searchResult] = response.data.results;
+          this.handleSelectedPlace(searchResult);
         }          
         else
-          alert(response.data.status);
-
+          alert(response.data.status);      
       });
 
   }
@@ -59,29 +60,32 @@ export default class Search extends Component {
    *
    * @param {*} placeDetail 
    */
-  onPlaceFound(placeDetail) {
+
+  handleSelectedPlace(placeDetail) {
     this.props.map.setZoom(16);
-    const location = placeDetail.geometry.location;
-    const userMarker = L.marker(location).addTo(this.props.map)
-    .bindPopup(`<b>${placeDetail.name} </b>${placeDetail.formatted_address}`);
-    this.props.map.setView(location, 16);
-    //ToDO : add to state , this location should be separate to user location
+    console.log(placeDetail)
+    if (this.state.marker) 
+      this.props.map.removeLayer(this.state.marker); 
+    this.setState({
+      marker : L.marker(placeDetail.geometry.location).addTo(this.props.map),
+      position: placeDetail.geometry.location
+    })
 
-    }
-
-  handleSelection(data,event) {
-    // TODO - hookup to map instance and add marker for given location
-    //      - get geolocation details based on prediction
-    console.log(data);
+    //TO DO: Customize the marker popup
+    this.state.marker.bindPopup(`<b>${placeDetail.name || ''} </b>${placeDetail.formatted_address}`)
 
+    this.props.map.setView(this.state.position, 16);
+
     }
 
+    handleMarkerPopupContent
+
   render() {
     // pass props to children components
     const childWithProps = this.props.children.map((child) => {
       return cloneElement(child, {
         predictions: this.state.predictions,
-        onClicked: this.handleSelection
+        onClicked: this.handleSelectedPlace
       });
     });
 

client/src/components/SearchResults/index.js

@@ -1,16 +1,44 @@
 import { h, Component } from 'preact';
 import style from './style.css';
+import axios from 'axios';
+import {API_SERVER} from '../../../config';
+const OK_STATUS = 'OK'
 
 export default class UnorderedList extends Component {
   constructor(props) {
     super(props);
+    this.handleClick = this.handleClick.bind(this);
   }
 
+  /**
+   * On search prediction selection , fetch the geolocation details and 
+   * update the map with a marker on that location
+   *
+   * @param {*} prediction 
+   */
+  handleClick(prediction) {
+    event.preventDefault();
+    axios.post(`${API_SERVER}/map/geocode`, {
+      input: prediction     
+      }).then((response) => { 
+        console.log(response);
+        if(response.data.status == OK_STATUS)
+        {
+          const [searchResult] = response.data.results;
+          this.props.onClicked(searchResult);
+        }          
+        else
+          alert(response.data.status);
+
+      });
+    }
+
+
   render() {
     return (
       <ul>
         {this.props.predictions.map((prediction, index) => {
-          return <div key={index} onClick={this.props.onClicked.bind(null,prediction)} >{prediction}</div>
+          return <div key={index} onClick={() => this.handleClick(prediction)} >{prediction}</div>
         })}
       </ul>
     )

controllers/google-api-controller.js

@@ -415,7 +415,8 @@ exports.geocode = (appReq, appRes) => {
 * @api {POST} /search/textSearch
 * @apiSuccess 200 {JSON} With two root elements:
 * - status: a string identifier of the request outcome
-* - predictions: an array query predictions
+* - results: An array, each element of the results array
+* contains a single result from the specified area (location and radius)
 * @apiError 400 {request error} Google api request error.
 *
 * @param {string} appReq.body.input - The text string on which to search.