diff --git a/resq/frontend/src/components/Request/RequestAddress.js b/resq/frontend/src/components/Request/RequestAddress.js index 43a481e7..d6df2681 100644 --- a/resq/frontend/src/components/Request/RequestAddress.js +++ b/resq/frontend/src/components/Request/RequestAddress.js @@ -20,30 +20,49 @@ const customTheme = createTheme({ }, }); -export default function CreateRequestForm() { - const [request, setRequest] = useState({ - type: '', - status: '', - urgency: '', - location: '', - quantity: '', - description: '', - }); +export default function CreateRequestForm({requestData, setRequestData}) { + const [address1, setAddress1] = useState("") + const [address2, setAddress2] = useState("") + const [city, setCity] = useState("") + const [state, setState] = useState("") + const [country, setCountry] = useState("") + const [zip, setZip] = useState("") + const [fname, setFname] = useState("") + const [lname, setLname] = useState("") - const handleChange = (event) => { - const { name, value } = event.target; - setRequest(prevState => ({ - ...prevState, - [name]: value - })); - }; + const handleGeocode = async () => { + const address = `${address1}, ${address2}, ${city}, ${state}, ${country}`; + const apiKey = 'AIzaSyCehlfJwJ-V_xOWZ9JK3s0rcjkV2ga0DVg'; + + try { + const response = await fetch( + `https://maps.googleapis.com/maps/api/geocode/json?address=${encodeURIComponent( + address + )}&key=${apiKey}` + ); - const handleSubmit = (event) => { - event.preventDefault(); - console.log(request); - //send this data to a backend server + if (response.ok) { + const data = await response.json(); + if (data.results && data.results.length > 0) { + const location = data.results[0].geometry.location; + setRequestData( + {...requestData, latitude: location.lat, longitude: location.lng} + ) + } else { + console.error('Geocoding failed: No results found'); + } + } else { + console.error('Geocoding request failed'); + } + } catch (error) { + console.error('Geocoding error:', error); + } }; + useEffect(() => { + handleGeocode(); + }, [address1, address2, city, state, country, nop]); + return ( @@ -61,99 +80,117 @@ export default function CreateRequestForm() { Create Request - - - - - - - - - - - - - - - - - - - - - - - - - - - } - label="Use this address for my request" - /> +
+ + + setFname(e.target.value)} + /> + + + setLname(e.target.value)} + /> + + + setAddress1(e.target.value)} + /> + + + setAddress2(e.target.value)} + /> + + + setCity(e.target.value)} + /> + + + setState(e.target.value)} + /> + + + setZip(e.target.value)} + /> + + + setCountry(e.target.value)} + /> + + + } + label="Use this address for my request" + /> + - +