London10-Bekir-Hotel-Project-Lesson1&2

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/App.js

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

src/BookingTable.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import moment from 'moment';
+
+const BookingTable = ({bookings}) => {
+    return (
+    <table className="table">
+    <thead>
+      <tr>
+        <th>ID</th>
+        <th>Title</th>
+        <th>First Name</th>
+        <th>Surname</th>
+        <th>Email</th>
+        <th>Room ID</th>
+        <th>Check In Date</th>
+        <th>Check Out Date</th>
+        <th>Nights</th>
+      </tr>
+    </thead>
+
+    <tbody>
+      {bookings.map((booking) => {
+        const checkInDate = moment(booking.checkInDate);
+        const checkOutDate = moment(booking.checkOutDate);
+        const nights = checkOutDate.diff(checkInDate, 'days');
+        return ( <tr key={booking.id}>
+          <td>{booking.id}</td>
+          <td>{booking.title}</td>
+          <td>{booking.firstName}</td>
+          <td>{booking.surname}</td>
+          <td>{booking.email}</td>
+          <td>{booking.roomId}</td>
+          <td>{booking.checkInDate}</td>
+          <td>{booking.checkOutDate}</td>
+          <td>{nights}</td>
+        </tr>
+      );
+})};
+    </tbody>
+  </table>
+ );
+};
+
+export default BookingTable;
+

src/Bookings.js

@@ -1,18 +1,45 @@
-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.jsx";
+import FakeBookings from "./data/fakeBookings.json";
+import SearchButton from "./SearchButton.jsx";
 
 const Bookings = () => {
-  const search = searchVal => {
-    console.info("TO DO!", searchVal);
+  const [bookings, setBookings] = useState(FakeBookings);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] =  useState(null);
+
+  const search = (searchVal) => {
+    setIsLoading (true);
+    setError(null);
+    setTimeout(() => {
+      fetch(`https://cyf-react.glitch.me/customers/${searchVal}`)
+      .then((response) => response.json())
+      .then((data) => {
+        setIsLoading(false);
+        setBookings(data);
+      })
+      .catch((error) => {
+        setIsLoading(false);
+        setError(error.message);
+      });
+    }, 5000); 
   };
 
   return (
     <div className="App-content">
       <div className="container">
         <Search search={search} />
-        {/* <SearchResults results={FakeBookings} /> */}
+         {isLoading ? (
+          <p>Loading data...</p>
+        ) : error ? (
+          <p>Error: {error}</p>
+        ) : (
+          <>
+        <SearchButton results={bookings} />
+        <SearchResults results={FakeBookings} />
+        </>
+        )}
       </div>
     </div>
   );

src/Bookings2.jsx

@@ -0,0 +1,28 @@
+import React, {useEffect, useState} from 'react';
+import BookingTable from './BookingTable';
+// import bookingsData from './data/fakeBookings.json';
+
+const Bookings2 = () => {
+  const [bookings, setBookings] = useState([]);
+
+  useEffect(() => {
+    fetch('https://cyf-react.glitch.me')
+    .then (response => response.json())
+    .then (data => {setBookings(data);
+  })
+  .catch(error => {
+    console.error('Error fetching bookings:', error);
+  });
+  }, []);
+
+  return (
+    <div>
+      <h1>CYF Hotel Bookings</h1>
+      <BookingTable bookings={bookings} />
+    </div>
+  );
+};
+
+
+
+export default Bookings2;

src/CustomerProfile.jsx

@@ -0,0 +1,33 @@
+
+import React, {useState, useEffect} from "react";
+
+const CustomerProfile = ({ id }) => {
+    const [customerData, setCustomerData] = useState(null); 
+
+useEffect(() => {
+    if (id) {
+      fetch(`https://cyf-react.glitch.me/customers/${id}`)
+        .then((response) => response.json())
+        .then((data) => setCustomerData(data));
+    }
+  }, [id]);
+
+  return (
+    <div>
+      {customerData ? (
+        <div>
+          <h2>Customer Profile: {id}</h2>
+          <ul>
+            <li>Email: {customerData.email}</li>
+            <li>VIP: {customerData.vip ? "Yes" : "No"}</li>
+            <li>Phone Number: {customerData.phoneNumber}</li>
+          </ul>
+        </div>
+      ) : (
+        <p>Loading customer profile...</p>
+      )}
+    </div>
+  );
+};
+
+export default CustomerProfile;

src/Footer.jsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+const Footer = ({ address }) => {
+  return (
+    <footer>
+      <ul>
+        {address.map((item, index) => (
+          <li key={index}>{item}</li>
+        ))}
+      </ul>
+    </footer>
+  );
+};
+
+export default Footer;

src/Header.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+const Header = () => {
+    return (
+<div className="search">
+      <div className="page-header">
+        <h4 className="text-left">Search Bookings</h4>
+        <img className="imageOfRome" src="https://media.gq-magazine.co.uk/photos/5d13a3a9b6fee91a87c9f87f/16:9/pass/Rome-hp-GQ-24May16_istock_b.jpg" alt="image of Rome" />
+      </div>
+      </div>
+      );
+      };
+
+export default Header;

src/Order.jsx

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

src/Restaurant.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+import Order from "./Order";
+
+const Restaurant = () => {
+   return (
+      <div>
+         <h3>Restaurant Orders</h3>
+         <ul>
+            <li>
+               <Order orderType="Pizzas" />
+            </li>
+            <li>
+               <Order orderType="Salads" />
+            </li>
+            <li>
+               <Order orderType="Chocolate Cake" />
+            </li>
+         </ul>
+      </div>
+    );
+};
+
+ export default Restaurant;

src/RestaurantButton.jsx

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

src/Search.js

@@ -1,29 +1,36 @@
-import React from "react";
+import React, { useState } from "react";
+import SearchButton from "./SearchButton";
+import Header from "./Header";
+
+
 
 const Search = () => {
+  const [searchInput, setSearchInput] = useState("");
+
+  function handleSearchInput(event) {
+    const inputValue = event.target.value;
+    setSearchInput(inputValue);
+    console.log(inputValue);
+
+    const handleSubmit = (event) => {
+      event.preventDefault();
+      search(searchInput);
+      };
+
   return (
-    <div className="search">
-      <div className="page-header">
-        <h4 className="text-left">Search Bookings</h4>
-      </div>
+    <div>
+    < Header/>
       <div className="row search-wrapper">
         <div className="col">
           <form className="form-group search-box">
             <label htmlFor="customerName">Customer name</label>
-            <div className="search-row">
-              <input
-                type="text"
-                id="customerName"
-                className="form-control"
-                placeholder="Customer name"
-              />
-              <button className="btn btn-primary">Search</button>
-            </div>
+            < SearchButton/>
           </form>
-        </div>
       </div>
     </div>
+    </div>
   );
 };
+};
 
 export default Search;