Merge pull request #63 from RbAvci/Feature/AddBookingValidation

NW6 | Fikret Ellek | React-Module-Project | Week-4 | Feature Validate AddBooking
RbAvci · Apr 6, 2024 · 524e1b9 · 524e1b9
2 parents 48694c9 + f274f4d
commit 524e1b9
Showing 1 changed file with 58 additions and 14 deletions.
diff --git 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}
       />
-
       <input
         required
         type="date"
         name="checkInDate"
+        min={todaysDate}
+        max={maxDate}
         placeholder="Check In Date"
         value={formData.checkInDate}
         onChange={handleChange}
@@ -87,11 +128,14 @@ const AddBookingForm = ({ bookings, setBookings }) => {
         required
         type="date"
         name="checkOutDate"
+        min={todaysDate}
+        max={maxDate}
         placeholder="Check Out Date"
         value={formData.checkOutDate}
         onChange={handleChange}
       />
       <input
+        required
         type="text"
         name="roomId"
         placeholder="Room ID"