Working, now work on responsiveness

src/components/BookingForm.jsx

@@ -1,43 +1,84 @@
 import { useState } from "react"
 import "../styles/BookingForm.css"
 
-export const BookingForm = ({ availableTimes, dispatch }) => {
+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("None")
+	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(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 === "") error = "Field is required"
+		else if (
+			target.value !== "Other" &&
+			target.value !== "Birthday" &&
+			target.value !== "Anniversary"
+		)
+			error = "Invalid occasion."
+		setOccasionError(error)
+		setOccasion(target.value)
+	}
 
 	return (
-		<form
-			className="booking-form"
-			onSubmit={(event) => {
-				event.preventDefault()
-				console.log(date, time, guests, occasion)
-			}}
-		>
-			<label htmlFor="res-date">Choose date</label>
+		<form className="booking-form" onSubmit={submitForm}>
+			<label htmlFor="date">Choose date</label>
 			<input
 				value={date}
 				required
-				onChange={(event) => {
-					setDate(event.target.value)
-					dispatch(event.target.value)
-				}}
+				onChange={onDateChange}
 				type="date"
-				id="res-date"
+				id="date"
 			/>
+			{dateError !== "" && <span className="error">{dateError}</span>}
 
 			<label htmlFor="time">Choose time</label>
-			<select
-				value={time}
-				required
-				onChange={(event) => setTime(event.target.value)}
-				id="time"
-			>
+			<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
@@ -47,25 +88,29 @@ export const BookingForm = ({ availableTimes, dispatch }) => {
 				max="10"
 				id="guests"
 				value={guests}
-				onChange={(event) => setGuests(event.target.value)}
+				onChange={onGuestChange}
 			/>
+			{guestsError !== "" && <span className="error">{guestsError}</span>}
 
 			<label htmlFor="occasion">Occasion</label>
-			<select
-				id="occasion"
-				value={occasion}
-				onChange={(event) => setOccasion(event.target.value)}
-			>
-				<option>None</option>
+			<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>
 	)
 }