115 lines
2.9 KiB
JavaScript
115 lines
2.9 KiB
JavaScript
import { useState } from "react"
|
|
import "../styles/BookingForm.css"
|
|
|
|
export const BookingForm = ({
|
|
availableTimes,
|
|
dispatch,
|
|
submitForm,
|
|
reservationError
|
|
}) => {
|
|
const [date, setDate] = useState(new Date().toISOString().slice(0, 10))
|
|
const [time, setTime] = useState(availableTimes[0])
|
|
const [guests, setGuests] = useState(1)
|
|
const [occasion, setOccasion] = useState("Other")
|
|
|
|
const [dateError, setDateError] = useState("")
|
|
const [timeError, setTimeError] = useState("")
|
|
const [guestsError, setGuestsError] = useState("")
|
|
const [occasionError, setOccasionError] = useState("")
|
|
|
|
const isFormInvalid = () =>
|
|
guestsError !== "" ||
|
|
dateError !== "" ||
|
|
timeError !== "" ||
|
|
occasionError !== ""
|
|
|
|
const onDateChange = ({ target }) => {
|
|
let error = ""
|
|
if (target.value === "") error = "Field is required."
|
|
setDateError(error)
|
|
setDate(target.value)
|
|
if (!error && dispatch) dispatch(target.valueAsDate)
|
|
}
|
|
|
|
const onTimeChange = ({ target }) => {
|
|
let error = ""
|
|
if (target.value === "") error = "Field is required."
|
|
setTimeError(error)
|
|
setTime(target.value)
|
|
}
|
|
|
|
const onGuestChange = ({ target }) => {
|
|
let error = ""
|
|
if (target.value === "") error = "Field is required."
|
|
else if (target.value < 1 || target.value > 10)
|
|
error = "Guests must be between 1 and 10."
|
|
setGuestsError(error)
|
|
setGuests(target.value)
|
|
}
|
|
|
|
const onOccasionChange = ({ target }) => {
|
|
let error = ""
|
|
if (
|
|
target.value !== "Other" &&
|
|
target.value !== "Birthday" &&
|
|
target.value !== "Anniversary"
|
|
)
|
|
error = "Invalid occasion."
|
|
setOccasionError(error)
|
|
setOccasion(target.value)
|
|
}
|
|
|
|
return (
|
|
<form className="booking-form" onSubmit={submitForm}>
|
|
<label htmlFor="date">Choose date</label>
|
|
<input
|
|
value={date}
|
|
required
|
|
onChange={onDateChange}
|
|
type="date"
|
|
id="date"
|
|
/>
|
|
{dateError !== "" && <span className="error">{dateError}</span>}
|
|
|
|
<label htmlFor="time">Choose time</label>
|
|
<select value={time} required onChange={onTimeChange} id="time">
|
|
{availableTimes.map((time) => (
|
|
<option key={time}>{time}</option>
|
|
))}
|
|
</select>
|
|
{timeError !== "" && <span className="error">{timeError}</span>}
|
|
|
|
<label htmlFor="guests">Number of guests</label>
|
|
<input
|
|
type="number"
|
|
required
|
|
min="1"
|
|
max="10"
|
|
id="guests"
|
|
value={guests}
|
|
onChange={onGuestChange}
|
|
/>
|
|
{guestsError !== "" && <span className="error">{guestsError}</span>}
|
|
|
|
<label htmlFor="occasion">Occasion</label>
|
|
<select id="occasion" value={occasion} onChange={onOccasionChange}>
|
|
<option>Other</option>
|
|
<option>Birthday</option>
|
|
<option>Anniversary</option>
|
|
</select>
|
|
{occasionError !== "" && (
|
|
<span className="error">{occasionError}</span>
|
|
)}
|
|
|
|
<input
|
|
type="submit"
|
|
className="submit"
|
|
disabled={isFormInvalid()}
|
|
value="Confirm reservation"
|
|
/>
|
|
{reservationError !== "" && (
|
|
<span className="error">{reservationError}</span>
|
|
)}
|
|
</form>
|
|
)
|
|
}
|