diff --git a/package-lock.json b/package-lock.json index 9d3e383..c73b774 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1682,6 +1682,15 @@ "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.8.0.tgz", "integrity": "sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==" }, + "axios": { + "version": "0.18.0", + "resolved": "http://registry.npmjs.org/axios/-/axios-0.18.0.tgz", + "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=", + "requires": { + "follow-redirects": "^1.3.0", + "is-buffer": "^1.1.5" + } + }, "axobject-query": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.0.2.tgz", @@ -11438,6 +11447,11 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-5.1.1.tgz", "integrity": "sha512-gJcOyak5ri9mzhpFObSAkCqNNBCVZE8LaR/mX37agULgSL0dobgX11NVSIetvNzhHMkr6CIqV0xiutvvcjBtkw==" }, + "react-geocode": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/react-geocode/-/react-geocode-0.1.2.tgz", + "integrity": "sha512-XEJkEPmwufeGykul/eqJyA1WduXa3IGxJam5BA0jzYfs/KMjCrtQjJl1FcH9Cybn05oQnRVUsRW8OGwEmTER5g==" + }, "react-scripts": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-2.1.2.tgz", diff --git a/package.json b/package.json index bcf4347..2e19821 100644 --- a/package.json +++ b/package.json @@ -3,9 +3,11 @@ "version": "0.1.0", "private": true, "dependencies": { + "axios": "^0.18.0", "google-maps-react": "^2.0.2", "react": "^16.7.0", "react-dom": "^16.7.0", + "react-geocode": "^0.1.2", "react-scripts": "2.1.2" }, "scripts": { diff --git a/src/App.js b/src/App.js index 2ae50d8..c6f94fb 100644 --- a/src/App.js +++ b/src/App.js @@ -5,6 +5,9 @@ import enter from './images/enter.png'; import './App.css'; import {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react'; +import axios from 'axios'; +import Geocode from "react-geocode"; +Geocode.setApiKey("AIzaSyBLYp4CH1DV_xZHvxtQ5GjaQU4A6gaUzSE"); const initialState = { @@ -28,10 +31,32 @@ class App extends Component { // Look for person's lat and lng in imported dataset search = (e) => { - var newLoc = this.state; - newLoc['lat'] = 0; - newLoc['lng'] = 0; - this.setState(newLoc); + // get request to backend REST API + axios.get(`http://localhost:3000/physicianloc`, { + params: { + name: this.state.name + } + }) + .then(res => { + // received data + const physician = res.data; + console.log(physician); + const address = physician.address + ', ' + physician.city + ' ' + physician.state + ' ' + physician.zip_code.toString(); + // convert address to lat and lng for our frontend map API + Geocode.fromAddress(address).then( + response => { + const { lat, lng } = response.results[0].geometry.location; + console.log(lat, lng); + this.setState({ + lat: lat, + lng: lng + }); + }, + error => { + console.error(error); + } + ); + }); } render() {