initial logic for 'use my current location' button

phlask · Jul 11, 2023 · efc44a9 · efc44a9
1 parent 0799278
commit efc44a9
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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 (
       <div id="react-google-map" className={styles.mapContainer}>