Skip to content

Commit

Permalink
backend integration implemented for request adress
Browse files Browse the repository at this point in the history
  • Loading branch information
@kubraaksux
kubraaksux committed Dec 15, 2023
1 parent 16f8389 commit a366fe6
Showing 1 changed file with 149 additions and 112 deletions.
261 changes: 149 additions & 112 deletions resq/frontend/src/components/Request/RequestAddress.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<ThemeProvider theme={customTheme}>
<Container component="main" maxWidth="xs">
Expand All @@ -61,99 +80,117 @@ export default function CreateRequestForm() {
Create Request
</Typography>
<React.Fragment>
<Grid container spacing={3}>
<Grid item xs={12} sm={6}>
<TextField
required
id="firstName"
name="firstName"
label="First name"
fullWidth
autoComplete="given-name"
variant="standard"
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
required
id="lastName"
name="lastName"
label="Last name"
fullWidth
autoComplete="family-name"
variant="standard"
/>
</Grid>
<Grid item xs={12}>
<TextField
required
id="address1"
name="address1"
label="Address line 1"
fullWidth
autoComplete="address1"
variant="standard"
/>
</Grid>
<Grid item xs={12}>
<TextField
id="address2"
name="address2"
label="Address line 2"
fullWidth
autoComplete="address2"
variant="standard"
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
required
id="city"
name="city"
label="City"
fullWidth
autoComplete="city"
variant="standard"
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
id="state"
name="state"
label="State/Province/Region"
fullWidth
variant="standard"
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
required
id="zip"
name="zip"
label="Zip / Postal code"
fullWidth
autoComplete="shipping postal-code"
variant="standard"
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
required
id="country"
name="country"
label="Country"
fullWidth
autoComplete="shipping country"
variant="standard"
/>
</Grid>
<Grid item xs={12}>
<FormControlLabel
control={<Checkbox color="error" name="saveAddress" value="yes" />}
label="Use this address for my request"
/>
<form>
<Grid container spacing={3}>
<Grid item xs={12} sm={6}>
<TextField
required
id="firstName"
name="firstName"
label="First name"
fullWidth
autoComplete="given-name"
variant="standard"
value={fname}
onChange={(e) => setFname(e.target.value)}
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
required
id="lastName"
name="lastName"
label="Last name"
fullWidth
autoComplete="family-name"
variant="standard"
value={lname}
onChange={(e) => setLname(e.target.value)}
/>
</Grid>
<Grid item xs={12}>
<TextField
required
id="address1"
name="address1"
label="Address line 1"
fullWidth
autoComplete="address1"
variant="standard"
value={address1}
onChange={(e) => setAddress1(e.target.value)}
/>
</Grid>
<Grid item xs={12}>
<TextField
id="address2"
name="address2"
label="Address line 2"
fullWidth
autoComplete="address2"
variant="standard"
value={address2}
onChange={(e) => setAddress2(e.target.value)}
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
required
id="city"
name="city"
label="City"
fullWidth
autoComplete="city"
variant="standard"
value={city}
onChange={(e) => setCity(e.target.value)}
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
id="state"
name="state"
label="State/Province/Region"
fullWidth
variant="standard"
value={state}
onChange={(e) => setState(e.target.value)}
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
required
id="zip"
name="zip"
label="Zip / Postal code"
fullWidth
autoComplete="shipping postal-code"
variant="standard"
value={zip}
onChange={(e) => setZip(e.target.value)}
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
required
id="country"
name="country"
label="Country"
fullWidth
autoComplete="shipping country"
variant="standard"
value={country}
onChange={(e) => setCountry(e.target.value)}
/>
</Grid>
<Grid item xs={12}>
<FormControlLabel
control={<Checkbox color="error" name="saveAddress" value="yes" />}
label="Use this address for my request"
/>
</Grid>
</Grid>
</Grid>
</form>
</React.Fragment>
</Box>
</Container>
Expand Down

0 comments on commit a366fe6

Please sign in to comment.