I have a parking lot on url "/home" where the user is to select a date and the select a spot before clicking a button ("book a spot") that redirects them to "/home/book". On this page a form is presented to the user, and the form should present the date, time, and parking spot selected by the user in the previous url/page ("/home").
How can I pass these parameters from "/home" to the form on "/home/book"? If this is not the ideal method, what would be?
What works: I can see the parking spot "id", as well as, the "date" selected by the user.
ParkingMap Code
export default function ParkingMap(){
const navigate = useNavigate(); // the navigation hook
const [data, setData] = useState(null);
const [date, setDate] = useState('');
const dateInputRef = useRef(null);
const [isActive, setIsActive] = useState(false);
const [spot, setSelectedSpot] = useState(null);
useEffect(() => {
getSpots();
}, []);
function getSpots() {
fetch('http://localhost:3001/parking-data/')
.then(response => {
return response.json();
})
.then(data => {
console.log("data " + data)
setData(data);
});
}
if( !data ){
return <div/>
}
const parkingSpots = data.data.parking_spots;
console.log(parkingSpots);
const handleChange = (e) => {
setDate(e.target.value);
};
const changeSpot = (e) => {
console.log("target id is " + e.target.id) // returns the spot selected
setSelectedSpot(e.target.id);
setIsActive(current => !current);
console.log(" passed the setIsActive code ");
};
// this doesnt work lol
const handleSubmit = (e) => {
e.preventDefault();
navigate("/home/booking/");
};
return (
<div>
<h1>Selected Date: {date} </h1> // need the selected date from here
<input
type="date"
onChange={handleChange}
ref={dateInputRef}
/>
<div class="flex-container-parking">
<div class="flex-parking-left">
<div
className='parkingSpot'
id="5"
onClick={changeSpot}
style={{
backgroundColor: parkingSpots.find(ps => ps.parking_spot_number === 5 && ps.occupancy === true) ? 'lightgrey' : 'lightblue',
borderColor: isActive ? 'green' : 'red'
}}>
<div className='circle'>
<AccessibleIcon/>
</div>
</div>
<hr />
<div
id="1"
onClick={changeSpot}
className='parkingSpot'
style={{
backgroundColor: parkingSpots.find(ps => ps.parking_spot_number === 1 && ps.occupancy === true) ? 'lightgrey' : 'lightblue',
borderColor: isActive ? 'green' : 'lightblue'
}}
>
<div className='circle'>
1
</div>
</div>
<hr/>
<div
className='parkingSpot'
id="2"
onClick={changeSpot}
style={{
backgroundColor: parkingSpots.find(ps => ps.parking_spot_number === 2 && ps.occupancy === true) ? 'lightgrey' : 'lightblue',
borderColor: isActive ? 'green' : 'lightblue'
}} >
<div className='circle'>
2
</div>
</div>
</div>
</div>
</div>
<Button variant="contained" onSubmit={handleSubmit}> Next </Button> // ideally this should navigate to the booking form page
</div>
);
};
The code for the booking form:
export default function BookingForm(){
const navigate = useNavigate(); // the navigation hook
const handleClick = event => {
event.preventDefault();
navigate('/home'); //redirects to the /home address
}
const handleSubmit = event => {
event.preventDefault();
navigate('/home/booking/QRCode'); //redirects to the /home address
}
// need to add post request of parking spot, date, full name, car type, license plate, phone number
return (
<div className='flex-container'>
<div className='row'>
<div className="flex-container-accessories">
<div class="flex-accessories">
<div
className='backButton'
id="icon"
onClick={handleClick}
>
<ArrowBackIosIcon
className="icon"
sx={{fontSize: 'medium'}}
/>
</div>
</div>
</div>
</div>
{/* <BackIcon onClick={handleClick}> </BackIcon> */}
<div className='row'>
<header>
<div>
{/* based off parking spot id: book for {spot}, date {date}, time {time} */}
<h2> Spot # <br/> Date <br/> Time </h2>
</div>
</header>
</div>
<div className='row'>
<Box
component="form"
sx={{
'& > :not(style)': { m: 1},
}}
noValidate
autoComplete="off"
>
<TextField id="outlined-basic" label="Full Name" variant="outlined" size="small" />
<TextField id="outlined-basic" label="Email" variant="outlined" size="small"/>
<TextField id="outlined-basic" label="Car Type" variant="outlined" size="small"/>
<TextField id="outlined-basic" label="License Plate" variant="outlined" size="small" />
<TextField id="outlined-basic" label="Phone Number" variant="outlined" size="small"/>
<Button variant="contained" onClick={handleSubmit}> Submit </Button>
</Box>
<div className="row">
<ParkingLegend/>
</div>
</div>
</div>
);
};
Each parking spot on "/home" is a div and customized with a class. Inside, the spot has an 'id' parameter which is used to classify the spot "selected". To determine if a spot is selected or not I have a changeSpot with e.target.value which returns with the id of the spot "selected". The process of selecting a date follows a similar pattern.
