London_10-Anna_Hrychaniuk-cyf-hotel-react

package.json

@@ -3,8 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.10",
     "react-scripts": "^5.0.1"
   },
   "scripts": {

src/AddNewBooking.js

@@ -0,0 +1,168 @@
+import { useState, useContext } from "react";
+import { BookingForForm } from "./data/BookingForm";
+
+function AddNewBooking (props) {
+  const {newBooking, setNewBooking} = useContext(BookingForForm);
+      const [validationErrors, setValidationErrors] = useState({});
+
+    function handleChange(event) {
+    const updatedUserData = {
+        ...newBooking,
+        [event.target.name]: event.target.value,
+      };
+      setValidationErrors(validate(updatedUserData))
+      setNewBooking(updatedUserData);
+    }
+
+    const validate = (values) => {
+      const errors = {}
+      const regex = /^[a-z0-9]+@[a-z]+\.[a-z]{2,3}/;
+      let date = new Date().toJSON().slice(0, 10);
+
+      if (!values.title) {
+        errors.title = "Title is required";
+      }
+      if (!values.firstName) {
+        errors.firstName = "First Name is required";
+      }
+      if (!values.surname) {
+        errors.surname = "Surname is required";
+      }
+      if (!values.email) {
+        errors.email = "email is required";
+      } else if(!regex.test(values.email)){
+        errors.email = "INVALID email"
+      }
+      if (!values.roomId) {
+        errors.roomId = "Room Number is required";
+      }
+      if (!values.checkInDate) {
+        errors.checkInDate = "CheckIn Date is required";
+      } 
+      // else if(values.checkInDate < date) {
+      //   errors.checkInDate = "Date can't be in the past"
+      // }
+      if (!values.checkOutDate) {
+        errors.checkOutDate = "CheckOut Date is required";
+      } 
+      // else if (values.checkOutDate < date) {
+      //   errors.checkOutDate = "Date can't be in the past";
+      // }
+      return errors;
+    }
+
+    function submitForm(event) {
+      event.preventDefault();
+      if(newBooking.title === ""){
+        alert("Fill in the Form!")
+      } else {
+
+         fetch("https://booking-server-98w3.onrender.com/bookings", {
+           method: "PUT", // or 'PUT'
+           headers: {
+             "Content-Type": "application/json",
+           },
+           body: JSON.stringify(newBooking),
+         })
+           .then((response) => response.json())
+           .then((data) => {
+             console.log(data), props.adding();
+           });
+      }
+
+    }
+    return (
+      <div className="formDiv">
+        <form onSubmit={submitForm}>
+          <label className="form-label">
+            {" "}
+            Title<br></br>
+            <input
+              type="text"
+              name="title"
+              placeholder="Title"
+              value={newBooking.title}
+              onChange={handleChange}
+            ></input>
+            <p className="errorMsg">{validationErrors.title}</p>
+          </label>
+          <label>
+            {" "}
+            First Name<br></br>
+            <input
+              type="text"
+              name="firstName"
+              placeholder="First Name"
+              value={newBooking["firstName"]}
+              onChange={handleChange}
+            ></input>
+            <p className="errorMsg">{validationErrors.firstName}</p>
+          </label>
+          <label>
+            {" "}
+            Surname<br></br>
+            <input
+              type="text"
+              name="surname"
+              placeholder="Surname"
+              value={newBooking.surname}
+              onChange={handleChange}
+            ></input>
+            <p className="errorMsg">{validationErrors.surname}</p>
+          </label>
+          <label className="form-label">
+            {" "}
+            Email<br></br>
+            <input
+              type="email"
+              name="email"
+              placeholder="email"
+              value={newBooking.email}
+              onChange={handleChange}
+            ></input>
+            <p className="errorMsg">{validationErrors.email}</p>
+          </label>
+          <label>
+            {" "}
+            Room Number<br></br>
+            <input
+              type="number"
+              name="roomId"
+              placeholder="Room Number"
+              value={newBooking["roomId"]}
+              onChange={handleChange}
+            ></input>
+            <p className="errorMsg">{validationErrors.roomId}</p>
+          </label>
+          <label className="dates">
+            {" "}
+            Check In Date<br></br>
+            <input
+              type="date"
+              name="checkInDate"
+              placeholder="Check In Date"
+              value={newBooking["checkIinDate"]}
+              onChange={handleChange}
+            ></input>
+            <p className="errorMsg">{validationErrors.checkInDate}</p>
+          </label>
+          <label className="dates">
+            {" "}
+            Check Out Date<br></br>
+            <input
+              type="date"
+              name="checkOutDate"
+              value={newBooking["checkOutDate"]}
+              onChange={handleChange}
+            ></input>
+            <p className="errorMsg">{validationErrors.checkOutDate}</p>
+          </label>
+        </form>
+        <button type="submit" onClick={submitForm} disabled={Object.keys(validationErrors).length === 0 ? false : true}>
+          SUBMIT
+        </button>
+      </div>
+    );
+}
+
+export default AddNewBooking;

src/App.css

@@ -7,14 +7,21 @@
   height: 80px;
 }
 
+.Logo-header {
+  width: 150px;
+  margin-right: 200px;
+}
+
 .App-header {
   background-color: #222;
-  height: 50px;
+  display: flex;
+  align-items: center;
+  height: auto;
   padding: 20px;
   color: white;
   text-align: left;
   font-family: Arial, Helvetica, sans-serif;
-  font-size: 1em;
+  font-size: 2em;
   font-weight: bold;
 }
 
@@ -27,6 +34,12 @@
   font-size: large;
 }
 
+.InfoCards {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);
@@ -54,4 +67,44 @@ tr {
 
 .card {
   width: 18rem;
+  margin: 15px;
+  padding: 5px;
+  text-align: justify;
+}
+
+h3 {
+  font-weight: 800;
+  text-align: center;
+  margin: 5px;
+}
+
+.Highlighted {
+  background-color: aquamarine;
 }
+
+.formDiv {
+  display: flex;
+  align-items: flex-end;
+  border: 5px dashed black;
+  margin: 10px;
+  padding: 20px 25px 20px 25px;
+  justify-content: center;
+}
+
+form {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  column-gap: 20px;
+}
+
+.dates {
+  grid-row-start: 3;
+}
+
+.form-label {
+  margin-right: 10px;
+}
+
+.errorMsg {
+  color: red;
+}

src/App.js

@@ -1,13 +1,71 @@
 import React from "react";
-
 import Bookings from "./Bookings";
+// import SearchResults from "./SearchResults";
+import Restaurant from "./Restaurant";
+
 import "./App.css";
 
+const Heading = () => (
+  <div className="App-header">
+    <img src="./5-stars.png" className="Logo-header" />
+    <header>CYF Hotel</header>
+  </div>
+);
+
+const TouristInfoCards = (props) => (
+  <div className="card">
+    <img src={props.image} className="card-img-top" />
+    <h3>{props.name}</h3>
+    <p>
+      Pellentesque habitant morbi tristique senectus et netus et malesuada fames
+      ac turpis egestas. Ut congue volutpat erat. Suspendisse nec vestibulum
+      risus, at sollicitudin lectus. Sed rhoncus odio ac magna ultrices, in
+      consectetur tortor convallis. Sed sed dui ante. Etiam efficitur lacus
+      velit, eget placerat massa rutrum ut. Integer posuere elit eget imperdiet
+      molestie.
+    </p>
+    <div className="card-body">
+      <a
+        href={props.url}
+        className="btn btn-primary"
+      >
+        More information
+      </a>
+    </div>
+  </div>
+);
+
+const Footer = (props) => (
+  <ul>
+    {props.text.map(item => <li key={item}>{item}</li>)}
+  </ul>
+)
+
 const App = () => {
   return (
     <div className="App">
-      <header className="App-header">CYF Hotel</header>
+      <Heading />
+      <div className="InfoCards">
+        <TouristInfoCards
+          name="Glasgow"
+          image="./university-of-glasgow.jpg"
+          url="https://peoplemakeglasgow.com/"
+        />
+        <TouristInfoCards
+          name="Manchester"
+          image="./manchester.webp"
+          url="https://visitmanchester.com"
+        />
+        <TouristInfoCards
+          name="London"
+          image="./london.webp"
+          url="https://visitlondon.com"
+        />
+      </div>
+
       <Bookings />
+      <Restaurant />
+      <Footer text={["123 Fake Street, London, E1 4UD", "[email protected]", "0123 456789"]} />
     </div>
   );
 };