Skip to content

Commit

Permalink
Added functionality that lets user fill the address field of crowdsou…
Browse files Browse the repository at this point in the history 
…rcing form with their current location
  • Loading branch information
Edwin Francois committed Sep 21, 2023
1 parent efc44a9 commit 4709450
Show file tree
Hide file tree
Showing 7 changed files with 23,027 additions and 17,036 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
"react-div-100vh": "^0.7.0",
"react-dom": "^17.0.0",
"react-ga4": "^2.0.0",
"react-geocode": "^1.0.0-alpha.0",
"react-hook-form": "^7.44.2",
"react-images-upload": "^1.2.8",
"react-location": "^3.3.4",
Expand Down
35 changes: 27 additions & 8 deletions src/components/AddResourceModal/AddBathroom.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
import React, { useEffect } from 'react';
import { useSelector } from 'react-redux';
import ImageUploader from 'react-images-upload';
import PlacesAutocomplete, {
geocodeByAddress,
geocodeByPlaceId,
getLatLng
} from 'react-places-autocomplete';
import PlacesAutocomplete from 'react-places-autocomplete';
import { geocode, setDefaults, RequestType } from 'react-geocode';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
import styles from './AddResourceModal.module.scss';
Expand Down Expand Up @@ -129,9 +127,21 @@ function AddBathroom({
}
];

const userLocation = useSelector(state => state.userLocation);

useEffect(() => {
setDefaults({
// Default values for 'react-geocode'. Used same API key as the one used for 'google-maps-react'
key: 'AIzaSyABw5Fg78SgvedyHr8tl-tPjcn5iFotB6I', // Your API key here.
language: 'en', // Default language for responses.
region: 'es' // Default region for responses.
});
}, []);

const {
register,
handleSubmit,
setValue,
formState: { errors }
} = useForm();

Expand Down Expand Up @@ -212,7 +222,7 @@ function AddBathroom({
helperText={
<Stack>
{errors.address && requiredFieldMsg}
<Link>
<Link onClick={() => {}}>
{'Use my location instead '}
<MyLocationIcon sx={{ fontSize: 10 }} />
</Link>
Expand All @@ -225,8 +235,17 @@ function AddBathroom({
error={errors.address ? true : false}
FormHelperTextProps={{
sx: { marginLeft: 'auto', marginRight: 0 },
onClick: () =>
alert('Use My Location onClick PlaceHolder!')
onClick: () => {
// Will autofill the street address textbox with user's current address,
// after clicking 'use my address instead'
const { lat, lng } = userLocation;
geocode(RequestType.LATLNG, `${lat},${lng}`)
.then(({ results }) => {
const addr = results[0].formatted_address;
setValue('address', addr); //react-hook-form setValue
})
.catch(console.error);
}
}}
style={{ backgroundColor: 'white' }}
InputLabelProps={{ shrink: true }}
Expand Down
33 changes: 26 additions & 7 deletions src/components/AddResourceModal/AddFood.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
import React, { useEffect } from 'react';
import { useSelector } from 'react-redux';
import ImageUploader from 'react-images-upload';
import PlacesAutocomplete, {
geocodeByAddress,
geocodeByPlaceId,
getLatLng
} from 'react-places-autocomplete';
import PlacesAutocomplete from 'react-places-autocomplete';
import { geocode, setDefaults, RequestType } from 'react-geocode';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
import styles from './AddResourceModal.module.scss';
Expand Down Expand Up @@ -127,9 +125,21 @@ function AddFood({
}
];

const userLocation = useSelector(state => state.userLocation);

useEffect(() => {
setDefaults({
// Default values for 'react-geocode'. Used same API key as the one used for 'google-maps-react'
key: 'AIzaSyABw5Fg78SgvedyHr8tl-tPjcn5iFotB6I', // Your API key here.
language: 'en', // Default language for responses.
region: 'es' // Default region for responses.
});
}, []);

const {
register,
handleSubmit,
setValue,
formState: { errors }
} = useForm();

Expand Down Expand Up @@ -232,8 +242,17 @@ function AddFood({
error={errors.address ? true : false}
FormHelperTextProps={{
sx: { marginLeft: 'auto', marginRight: 0 },
onClick: () =>
alert('Use My Location onClick PlaceHolder!')
onClick: () => {
// Will autofill the street address textbox with user's current address,
// after clicking 'use my address instead'
const { lat, lng } = userLocation;
geocode(RequestType.LATLNG, `${lat},${lng}`)
.then(({ results }) => {
const addr = results[0].formatted_address;
setValue('address', addr); //react-hook-form setValue
})
.catch(console.error);
}
}}
style={{ backgroundColor: 'white' }}
InputLabelProps={{ shrink: true }}
Expand Down
36 changes: 24 additions & 12 deletions src/components/AddResourceModal/AddForaging.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
import React, { useEffect } from 'react';
import { useSelector } from 'react-redux';
import ImageUploader from 'react-images-upload';
import PlacesAutocomplete, {
geocodeByAddress,
geocodeByPlaceId,
getLatLng
} from 'react-places-autocomplete';
import PlacesAutocomplete from 'react-places-autocomplete';
import { geocode, setDefaults, RequestType } from 'react-geocode';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
import styles from './AddResourceModal.module.scss';
Expand Down Expand Up @@ -116,17 +114,21 @@ function AddForaging({
}
];

// const addressLinkOnClick = () => {
// const currAddress = getCurrentAddress();
const userLocation = useSelector(state => state.userLocation);

// if (currAddress) {
// address = currAddress;
// }
// };
useEffect(() => {
setDefaults({
// Default values for 'react-geocode'. Used same API key as the one used for 'google-maps-react'
key: 'AIzaSyABw5Fg78SgvedyHr8tl-tPjcn5iFotB6I', // Your API key here.
language: 'en', // Default language for responses.
region: 'es' // Default region for responses.
});
}, []);

const {
register,
handleSubmit,
setValue,
formState: { errors }
} = useForm();

Expand Down Expand Up @@ -230,7 +232,17 @@ function AddForaging({
error={errors.address ? true : false}
FormHelperTextProps={{
sx: { marginLeft: 'auto', marginRight: 0 },
onClick: onAddressClick
onClick: () => {
// Will autofill the street address textbox with user's current address,
// after clicking 'use my address instead'
const { lat, lng } = userLocation;
geocode(RequestType.LATLNG, `${lat},${lng}`)
.then(({ results }) => {
const addr = results[0].formatted_address;
setValue('address', addr); //react-hook-form setValue
})
.catch(console.error);
}
}}
style={{ backgroundColor: 'white' }}
InputLabelProps={{ shrink: true }}
Expand Down
33 changes: 26 additions & 7 deletions src/components/AddResourceModal/AddWaterTap.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
import React, { useEffect } from 'react';
import { useSelector } from 'react-redux';
import ImageUploader from 'react-images-upload';
import PlacesAutocomplete, {
geocodeByAddress,
geocodeByPlaceId,
getLatLng
} from 'react-places-autocomplete';
import PlacesAutocomplete from 'react-places-autocomplete';
import { geocode, setDefaults, RequestType } from 'react-geocode';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faChevronDown } from '@fortawesome/free-solid-svg-icons';
import styles from './AddResourceModal.module.scss';
Expand Down Expand Up @@ -134,9 +132,21 @@ function AddWaterTap({
}
];

const userLocation = useSelector(state => state.userLocation);

useEffect(() => {
setDefaults({
// Default values for 'react-geocode'. Used same API key as the one used for 'google-maps-react'
key: 'AIzaSyABw5Fg78SgvedyHr8tl-tPjcn5iFotB6I', // Your API key here.
language: 'en', // Default language for responses.
region: 'es' // Default region for responses.
});
}, []);

const {
register,
handleSubmit,
setValue,
formState: { errors }
} = useForm();

Expand Down Expand Up @@ -239,8 +249,17 @@ function AddWaterTap({
error={errors.address ? true : false}
FormHelperTextProps={{
sx: { marginLeft: 'auto', marginRight: 0 },
onClick: () =>
alert('Use My Location onClick PlaceHolder!')
onClick: () => {
// Will autofill the street address textbox with user's current address,
// after clicking 'use my address instead'
const { lat, lng } = userLocation;
geocode(RequestType.LATLNG, `${lat},${lng}`)
.then(({ results }) => {
const addr = results[0].formatted_address;
setValue('address', addr); //react-hook-form setValue
})
.catch(console.error);
}
}}
style={{ backgroundColor: 'white' }}
InputLabelProps={{ shrink: true }}
Expand Down
42 changes: 21 additions & 21 deletions src/components/ReactGoogleMaps/ReactGoogleMaps.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Map, GoogleApiWrapper, Marker, geocoder } from 'google-maps-react';
import { Map, GoogleApiWrapper, Marker } from 'google-maps-react';
import React, { Component } from 'react';
import ReactTouchEvents from 'react-touch-events';
import SearchBar from '../SearchBar/SearchBar';
Expand Down Expand Up @@ -288,26 +288,26 @@ 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;
};
// 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 (
Expand Down
Loading

0 comments on commit 4709450

Please sign in to comment.