From efc44a965a326acbd68e55031e7832298b1aedc5 Mon Sep 17 00:00:00 2001 From: Edwin Francois Date: Tue, 11 Jul 2023 06:36:55 -0400 Subject: [PATCH] initial logic for 'use my current location' button --- .../AddResourceModal/AddForaging.jsx | 12 ++++++++-- .../AddResourceModal/AddResourceModal.js | 13 +++++++++++ .../ReactGoogleMaps/ReactGoogleMaps.js | 23 ++++++++++++++++++- 3 files changed, 45 insertions(+), 3 deletions(-) diff --git a/src/components/AddResourceModal/AddForaging.jsx b/src/components/AddResourceModal/AddForaging.jsx index 8eff5784..c2b6c474 100644 --- a/src/components/AddResourceModal/AddForaging.jsx +++ b/src/components/AddResourceModal/AddForaging.jsx @@ -60,6 +60,7 @@ function AddForaging({ onNameChange, address, onAddressChange, + onAddressClick, website, onWebsiteChange, description, @@ -115,6 +116,14 @@ function AddForaging({ } ]; + // const addressLinkOnClick = () => { + // const currAddress = getCurrentAddress(); + + // if (currAddress) { + // address = currAddress; + // } + // }; + const { register, handleSubmit, @@ -221,8 +230,7 @@ function AddForaging({ error={errors.address ? true : false} FormHelperTextProps={{ sx: { marginLeft: 'auto', marginRight: 0 }, - onClick: () => - alert('Use My Location onClick PlaceHolder!') + onClick: onAddressClick }} style={{ backgroundColor: 'white' }} InputLabelProps={{ shrink: true }} diff --git a/src/components/AddResourceModal/AddResourceModal.js b/src/components/AddResourceModal/AddResourceModal.js index 8ce39cb7..d92d6ceb 100644 --- a/src/components/AddResourceModal/AddResourceModal.js +++ b/src/components/AddResourceModal/AddResourceModal.js @@ -8,6 +8,8 @@ import { Popover, Accordion } from 'react-bootstrap'; + +import getCurrentAddress from '../ReactGoogleMaps/ReactGoogleMaps'; import Dialog from '@mui/material/Dialog'; import ImageUploader from 'react-images-upload'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; @@ -158,6 +160,15 @@ export class AddResourceModal extends Component { }); } + onClickAddress() { + const currAddressLocation = getCurrentAddress(); + if (currAddressLocation) { + this.setState({ + address: currAddressLocation + }); + } + } + onChangeWebsite(e) { this.setState({ website: e.target.value @@ -552,6 +563,7 @@ export class AddResourceModal extends Component { onNameChange={this.onNameChange} address={this.state.address} onAddressChange={this.onChangeAddress} + onAddressClick={this.onClickAddress} website={this.state.website} onWebsiteChange={this.onChangeWebsite} description={this.state.description} @@ -590,6 +602,7 @@ export class AddResourceModal extends Component { onNameChange={this.onNameChange} address={this.state.address} onAddressChange={this.onChangeAddress} + onAddressClick={this.onClickAddress} website={this.state.website} onWebsiteChange={this.onChangeWebsite} description={this.state.description} diff --git a/src/components/ReactGoogleMaps/ReactGoogleMaps.js b/src/components/ReactGoogleMaps/ReactGoogleMaps.js index 7dd441b1..ff60207c 100644 --- a/src/components/ReactGoogleMaps/ReactGoogleMaps.js +++ b/src/components/ReactGoogleMaps/ReactGoogleMaps.js @@ -1,4 +1,4 @@ -import { Map, GoogleApiWrapper, Marker } from 'google-maps-react'; +import { Map, GoogleApiWrapper, Marker, geocoder } from 'google-maps-react'; import React, { Component } from 'react'; import ReactTouchEvents from 'react-touch-events'; import SearchBar from '../SearchBar/SearchBar'; @@ -288,6 +288,27 @@ export class ReactGoogleMaps extends Component { })); }; + getCurrentAddress = () => { + let address = ''; + const coord = { + lat: this.state.currlat, + lng: this.state.currlon + }; + + geocoder + .geocode({ location: coord }) + .then(response => { + if (response.results[0]) { + address = response.results[0].formatted_address; + } else { + window.alert('No results found. Try typing the address instead'); + } + }) + .catch(error => window.alert('Geocoder failed due to: ' + error)); + + return address; + }; + render() { return (