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}
/>