glasgow - class 6 - malkit benning - node wk 3 extra challenge

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1"

src/AddBooking.js

@@ -0,0 +1,14 @@
+import BookingForm from "./BookingForm";
+
+const AddBooking = (props) => {
+  return (
+    <div>
+      <h4 className="text-left">Add New Booking</h4>
+      <div>
+        <BookingForm setBookings={props.setBookings} />
+      </div>
+    </div>
+  );
+};
+
+export default AddBooking;

src/App.js

@@ -1,13 +1,26 @@
 import React from "react";
-
+import TouristInfoCards from "./TouristInfoCards";
+import Footer from "./Footer";
 import Bookings from "./Bookings";
+import SearchResults from "./SearchResults";
 import "./App.css";
+import Heading from "./Heading";
+import Restaurant from "./Restaurant";
 
 const App = () => {
   return (
     <div className="App">
-      <header className="App-header">CYF Hotel</header>
+      <Heading />
       <Bookings />
+      <Restaurant />
+      <TouristInfoCards />
+      <Footer
+        addressDetail={[
+          "123 Fake Street, London, E1 4UD",
+          "[email protected]",
+          "0123 456789",
+        ]}
+      />
     </div>
   );
 };

src/BookingForm.css

@@ -0,0 +1,7 @@
+.booking-form {
+    padding-bottom: 2rem;
+}
+
+.booking-label {
+    width: 100%;
+}

src/BookingForm.js

@@ -0,0 +1,49 @@
+import React, { useState, useEffect } from "react";
+import "./BookingForm.css";
+const BookingForm = (props) => {
+  const [title, setTitle] = useState("");
+  const [firstName, setFirstName] = useState("");
+  const [surname, setSurname] = useState("");
+  const [email, setEmail] = useState("");
+  const [roomId, setRoomId] = useState("");
+  const [checkInDate, setCheckInDate] = useState("");
+  const [checkOutDate, setCheckOutDate] = useState("");
+  function handleSubmit(event) {
+    event.preventDefault();
+    const createdBooking = { title, firstName, surname, email, roomId, checkInDate, checkOutDate };
+    fetch("https://malkit-hotel-server.glitch.me/bookings/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(createdBooking) })
+      .then((res) => {
+        console.log("res", res);
+        return res.json();
+      })
+      .then((data) => {
+        props.setBookings(data);
+      });
+  }
+
+  return (
+    <div>
+      <form className="booking-form" onSubmit={handleSubmit}>
+        <label className="booking-label">Title</label>
+        <input type="text" required value={title} onChange={(e) => setTitle(e.target.value)} />
+        <label className="booking-label">First Name</label>
+        <input type="text" required value={firstName} onChange={(e) => setFirstName(e.target.value)} />
+        <label className="booking-label">Surname</label>
+        <input type="text" required value={surname} onChange={(e) => setSurname(e.target.value)} />
+        <label className="booking-label">Email</label>
+        <input type="text" required value={email} onChange={(e) => setEmail(e.target.value)} />
+        <label className="booking-label">Room Id</label>
+        <input type="text" required value={roomId} onChange={(e) => setRoomId(e.target.value)} />
+        <label className="booking-label">Check In Date</label>
+        <input type="date" required value={checkInDate} onChange={(e) => setCheckInDate(e.target.value)} />
+        <label className="booking-label">Check Out Date</label>
+        <input type="date" required value={checkOutDate} onChange={(e) => setCheckOutDate(e.target.value)} />
+        <br></br>
+        <br></br>
+        <button className="btn btn-primary">Add Booking</button>
+      </form>
+    </div>
+  );
+};
+
+export default BookingForm;

src/Bookings.js

@@ -1,18 +1,66 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import Search from "./Search.js";
-// import SearchResults from "./SearchResults.js";
-// import FakeBookings from "./data/fakeBookings.json";
+import SearchResults from "./SearchResults.js";
+import LoadingWait from "./LoadingWait.js";
+import AddBooking from "./AddBooking.js";
 
 const Bookings = () => {
-  const search = searchVal => {
-    console.info("TO DO!", searchVal);
+  const [deleteRow, setDeleteRow] = useState(null);
+  let [dataAvailable, setDataAvailable] = useState(false);
+
+  useEffect(() => {
+    fetch("https://malkit-hotel-server.glitch.me/bookings")
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data);
+        setBookings(data);
+        setMasterBookings(data);
+        setDataAvailable(true);
+      });
+  }, []);
+
+  useEffect(() => {
+    if (deleteRow)
+      fetch("https://malkit-hotel-server.glitch.me/bookings/" + deleteRow, { method: "DELETE" })
+        .then((res) => res.json())
+        .then((data) => {
+          console.log(data);
+          setBookings(data);
+          setMasterBookings(data);
+          setDataAvailable(true);
+        });
+  }, [deleteRow]);
+
+  let [bookings, setBookings] = useState([]);
+  let [masterBookings, setMasterBookings] = useState([]);
+
+  const search = (searchVal) => {
+    if (!searchVal) {
+      console.log("no search Val");
+      fetch("https://malkit-hotel-server.glitch.me/bookings/")
+        .then((res) => res.json())
+        .then((data) => {
+          console.log(data);
+          let filteredBookings = data;
+          setBookings(filteredBookings);
+        });
+    } else {
+      fetch("https://malkit-hotel-server.glitch.me/bookings/search?term=" + searchVal)
+        .then((res) => res.json())
+        .then((data) => {
+          console.log(data);
+          let filteredBookings = data;
+          setBookings(filteredBookings);
+        });
+    }
   };
 
   return (
     <div className="App-content">
       <div className="container">
+        <AddBooking setBookings={setBookings} />
         <Search search={search} />
-        {/* <SearchResults results={FakeBookings} /> */}
+        {dataAvailable ? <SearchResults results={bookings} setDeleteRow={setDeleteRow} /> : <LoadingWait />}
       </div>
     </div>
   );

src/CustomerProfile.js

@@ -0,0 +1,30 @@
+import React, { useState, useEffect } from "react";
+
+const CustomerProfile = (props) => {
+  let [emailAddress, setEmailAddress] = useState("");
+  let [vipStatus, setVipStatus] = useState(null);
+  let [phoneNumber, setPhoneNumber] = useState("");
+
+  useEffect(() => {
+    if (props.customerProfileId) {
+      fetch(`https://cyf-react.glitch.me/customers/${props.customerProfileId}`)
+        .then((res) => res.json())
+        .then((data) => {
+          setEmailAddress(data.email);
+          setVipStatus(data.vip ? "Vip Status" : "Not VIP");
+          setPhoneNumber(data.phoneNumber);
+        });
+    }
+  }, [props.customerProfileId]);
+
+  return props.customerProfileId ? (
+    <ul>
+      <li>Customer {props.customerProfileId} profile</li>
+      <li>Email: {emailAddress}</li>
+      <li>VIP: {vipStatus}</li>
+      <li>Phone: {phoneNumber}</li>
+    </ul>
+  ) : null;
+};
+
+export default CustomerProfile;

src/Footer.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+const Footer = (props) => (
+  <ul>
+    {props.addressDetail.map((addressLine, index) => {
+      return (
+        <li key={index}>{addressLine}</li>
+      )
+    })}
+  </ul>
+);
+
+export default Footer;

src/Heading.css

@@ -0,0 +1,9 @@
+img {
+    height: 80px;
+    display: flex;
+  margin-left: auto;
+  margin-right: auto;
+
+
+
+}

src/Heading.js

@@ -0,0 +1,11 @@
+import React from "react";
+import "./Heading.css";
+
+const Heading = () => {
+    return (<header>
+        <img src = "https://images.unsplash.com/photo-1455587734955-081b22074882?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1920&q=80"></img>
+        </header>
+    )
+}
+
+export default Heading;

src/LoadingWait.css

@@ -0,0 +1,5 @@
+.wait-text {
+    font-size: x-large;
+    color: red;
+
+}

src/LoadingWait.js

@@ -0,0 +1,12 @@
+import React, { useState } from "react";
+import "./LoadingWait.css";
+
+const LoadingWait = () => {
+  return (
+    <div>
+      <p className="wait-text">Please Wait...Loading Bookings</p>
+    </div>
+  );
+};
+
+export default LoadingWait;

src/NightsCount.js

@@ -0,0 +1,16 @@
+import React from "react";
+import moment from "moment";
+
+const NightsCount = ({ checkInDate, checkOutDate }) => {
+  const calculateNumberOfNights = (checkInDate, checkOutDate) => {
+    const checkIn = moment(checkInDate); //convert the checkInDate string into a moment object
+    const checkOut = moment(checkOutDate);
+    return checkOut.diff(checkIn, "days"); //calculates the number of days between checkIn and checkOut.
+  };
+
+  const numberOfNights = calculateNumberOfNights(checkInDate, checkOutDate);
+
+  return <span>{numberOfNights} nights</span>;
+};
+
+export default NightsCount;

src/Order.js

@@ -0,0 +1,17 @@
+import React,{useState}from "react";
+import RestaurantButton from "./RestaurantButton";
+
+const Order = (props) => {
+  const [orders, setOrders] = useState(0);
+  function orderOne() {
+    setOrders(orders + 1);
+  }
+  return (
+    <li>
+      {props.orderType}: {orders}
+      <RestaurantButton handleClick={orderOne} />
+    </li>
+  );
+};
+
+export default Order;

src/Restaurant.js

@@ -1,14 +1,14 @@
 import React from "react";
 
+import Order from "./Order";
 const Restaurant = () => {
-  const pizzas = 0;
   return (
     <div>
       <h3>Restaurant Orders</h3>
       <ul>
-        <li>
-          Pizzas: {pizzas} <button className="btn btn-primary">Add</button>
-        </li>
+        <Order orderType="Pizzas" />
+        <Order orderType="Salads" />
+        <Order orderType="Chocolate cake" />
       </ul>
     </div>
   );

src/RestaurantButton.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+const RestaurantButton = ({handleClick}) => {
+  return (
+    <button className="btn btn-primary" onClick={handleClick}>
+      Add
+    </button>
+  );
+};
+
+export default RestaurantButton;