diff --git a/src/components/AddBookingForm/AddBookingForm.jsx b/src/components/AddBookingForm/AddBookingForm.jsx index 02f723f..bb13412 100644 --- a/src/components/AddBookingForm/AddBookingForm.jsx +++ b/src/components/AddBookingForm/AddBookingForm.jsx @@ -1,5 +1,6 @@ import React, { useState } from "react"; import "./AddBookingForm.scss"; +import dayjs, { Dayjs } from "dayjs"; const AddBookingForm = ({ bookings, setBookings }) => { const [formData, setFormData] = useState({ @@ -14,6 +15,20 @@ const AddBookingForm = ({ bookings, setBookings }) => { }); const [nextId, setNextId] = useState(bookings.length + 1); + const todaysDate = + dayjs().get("year") + + "-" + + (dayjs().get("month") + 1).toString().padStart(2, "0") + + "-" + + dayjs().get("date"); + const maxDate = + dayjs().get("year") + + 1 + + "-" + + (dayjs().get("month") + 1).toString().padStart(2, "0") + + "-" + + dayjs().get("date"); + const addBooking = (newBooking) => { setBookings([...bookings, newBooking]); }; @@ -23,21 +38,46 @@ const AddBookingForm = ({ bookings, setBookings }) => { setFormData((prevData) => ({ ...prevData, [name]: value })); }; + const validateBooking = () => { + if (!isNaN(parseInt(formData.firstName))) { + alert("Enter a valid name"); + } else if (!isNaN(parseInt(formData.surname))) { + alert("Enter a valid surname"); + } else if ( + !( + formData.email.includes("@") && + formData.email.includes(".") && + formData.email.indexOf("@") === formData.email.lastIndexOf("@") && + formData.email.indexOf("@") < formData.email.lastIndexOf(".") + ) + ) { + alert("Enter a valid email"); + } else if (!(formData.roomId > 0 && formData.roomId < 100)) { + alert("Enter a valid roon id"); + } else if (!(formData.checkInDate < formData.checkOutDate)) { + alert("Enter valid dates"); + } else { + return true; + } + }; + const handleSubmit = (e) => { e.preventDefault(); - const newBooking = { ...formData, id: nextId }; - addBooking(newBooking); - setFormData({ - id: "", - firstName: "", - surname: "", - email: "", - title: "", - roomId: "", - checkInDate: "", - checkOutDate: "", - }); - setNextId(nextId + 1); + if (validateBooking()) { + const newBooking = { ...formData, id: nextId }; + addBooking(newBooking); + setFormData({ + id: "", + firstName: "", + surname: "", + email: "", + title: "", + roomId: "", + checkInDate: "", + checkOutDate: "", + }); + setNextId(nextId + 1); + } }; return ( @@ -74,11 +114,12 @@ const AddBookingForm = ({ bookings, setBookings }) => { value={formData.email} onChange={handleChange} /> - { required type="date" name="checkOutDate" + min={todaysDate} + max={maxDate} placeholder="Check Out Date" value={formData.checkOutDate} onChange={handleChange} />