| import React, { useState, useEffect, useMemo, useRef } from "react";
|
| import ChoosePartyDropdown from "../party/ChoosePartyDropdown";
|
| import swal from "sweetalert";
|
| // Material UI components for form buttons:
|
| import Grid from "@mui/material/Grid";
|
| import TextField from "@mui/material/TextField";
|
| import Button from "@mui/material/Button";
|
| // Importing 'GoogleMaps' component that is from MaterialUI docs page that was provided from here under 'Google Maps place':
|
| // https://mui.com/material-ui/react-autocomplete/
|
| import GoogleMaps from "./GoogleMaps.js";
|
|
|
| function AddLocationForm({ parties, onChooseParty, onAddLocation, chosenParty}) {
|
| const [createLocationFormData, setCreateLocationFormData] = useState({
|
| name: "",
|
| });
|
|
|
| const handleCreateLocationChange = (e) => {
|
| setCreateLocationFormData({...createLocationFormData, [e.target.name]: e.target.value})
|
| };
|
|
|
| const handleCreate = (e) => {
|
| e.preventDefault();
|
| const id = chosenParty.id;
|
|
|
| console.log("Checking createLocationFormData: ");
|
| console.log('createLocationFormData["location_name"]: ', createLocationFormData["location_name"]);
|
| console.log("value: ", value);
|
| // NOTE:
|
| // Trying to figure out how to access the 'GoogleMaps' component's 'value' state variable to use
|
| // for the fetch request itself:
|
| // console.log("value (from GoogleMapsAPI example): ", value);
|
|
|
| if (createLocationFormData["location_name"] === undefined) {
|
| } else {
|
| fetch(`/parties/${id}/location`, {
|
| method: "POST",
|
| headers: {
|
| "Content-Type": "application/json",
|
| "Accept": "application/json",
|
| },
|
| body: JSON.stringify({ "name": createLocationFormData["location_name"], "party_id": id}),
|
| })
|
| .then((response) => response.json())
|
| .then((newLocation) => {
|
| onAddLocation(newLocation);
|
| swal("Location added! : \n\n" + createLocationFormData['location_name']);
|
| });
|
| }
|
| }
|
|
|
| return (
|
| <div>
|
| <br />
|
| <ChoosePartyDropdown parties={parties} onChooseParty={onChooseParty} />
|
| <h2>Add Location</h2>
|
| <form onSubmit={handleCreate}>
|
| <Grid container alignItems="center" justify="center" direction="column" spacing={5}>
|
| <Grid item>
|
| <GoogleMaps />
|
| </Grid>
|
| <Grid item xs={8}>
|
| </Grid>
|
| <Button variant="contained" color="primary" type="submit">Add Location</Button>
|
| </Grid>
|
| </form>
|
|
|
| </div>
|
| )
|
|
|
| }
|
|
|
| export default AddLocationForm;
|