Glasgow - Class 6 --- Rahma - Appolin - Nasir --- React - Hotel Group Project

package.json

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

src/App.css

@@ -2,19 +2,27 @@
   text-align: left;
 }
 
+.hotel-logo {
+  height: 80px;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
 .App-logo {
   animation: App-logo-spin infinite 20s linear;
   height: 80px;
 }
 
 .App-header {
   background-color: #222;
-  height: 50px;
+  height: 80px;
   padding: 20px;
-  color: white;
-  text-align: left;
+  /* color: white; */
+  color: #b8860b;
+  text-align: center;
   font-family: Arial, Helvetica, sans-serif;
-  font-size: 1em;
+  font-size: 2em;
   font-weight: bold;
 }
 
@@ -48,10 +56,86 @@ tr {
 }
 
 .footer {
+  background-color: #222;
   padding-top: 20px;
   text-align: center;
+  padding-bottom: 15px;
+  margin-bottom: -17px;
+}
+.footer > ul {
+  color: #b8860b;
 }
 
 .card {
   width: 18rem;
 }
+
+.cities-info {
+  display: flex;
+  justify-content: center;
+  gap: 5em;
+  margin-top: 1em;
+}
+
+.center {
+  text-align: center;
+  margin-top: 2rem;
+}
+
+.on {
+  background-color: blue;
+  color: white;
+  cursor: pointer;
+}
+.off {
+  background-color: none;
+  cursor: pointer;
+}
+.profile-container {
+  color: white;
+  background-color: blue;
+  padding: 1em;
+}
+.profile {
+  font-weight: bold;
+  font-size: 1.5em;
+}
+.viewOn {
+  display: block;
+}
+.viewOff {
+  display: none;
+}
+.error {
+  width: 100vw;
+  height: 100vh;
+  text-align: center;
+  background-color: white;
+  padding: 5em;
+  color: red;
+  font-weight: bold;
+}
+
+/* the loading wheel in the booking component  */
+.loading-wheel {
+  display: inline-block;
+  width: 80px;
+  height: 80px;
+  border: 8px solid #f3f3f3;
+  border-top: 8px solid darkgray;
+  border-radius: 50%;
+  animation: spin 2s linear infinite;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+@keyframes spin {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}

src/App.js

@@ -1,13 +1,23 @@
-import React from "react";
-
+import React, { useState } from "react";
+import TouristInfoCards from "./TouristInfoCards";
 import Bookings from "./Bookings";
 import "./App.css";
+import Heading from "./Header";
+import Footer from "./Footer";
+import Restaurant from "./Restaurant";
 
 const App = () => {
+  const [count, setCount] = useState(0);
+  if (count > 0) {
+    return <Bookings setCount={setCount} />;
+  }
   return (
     <div className="App">
-      <header className="App-header">CYF Hotel</header>
-      <Bookings />
+      <Heading />
+      <TouristInfoCards />
+      <Bookings setCount={setCount} />
+      <Restaurant />
+      <Footer />
     </div>
   );
 };

src/Bookings.js

@@ -1,18 +1,56 @@
-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 CustomerProfile from "./CustomerProfile.js";
+import UrlNotWorking from "./UrlNotWorking.js";
 
-const Bookings = () => {
-  const search = searchVal => {
+const Bookings = (props) => {
+  const [bookings, setBookings] = useState([]);
+  const [filteredBookings, setFilteredBookings] = useState([]);
+  const [customerProfile, setCustomerProfile] = useState("");
+  const [customerId, setCustomerId] = useState("");
+  const [view, setView] = useState("viewOff");
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    fetch("https://cyf-react.glitch.me/delayed")
+      .then((response) => response.json())
+      .then((data) => {
+        setBookings(data);
+        setFilteredBookings(data);
+        setIsLoading(false);
+      })
+      .catch((error) => {
+        const urlNotWorking = "Not Found";
+        setBookings(urlNotWorking);
+        setIsLoading(false);
+      });
+  }, []);
+
+  const search = (searchVal) => {
     console.info("TO DO!", searchVal);
+    const searchedBookings = bookings.filter(
+      (searchedNames) => searchedNames.firstName.toLowerCase().includes(searchVal.toLowerCase()) || searchedNames.surname.toLowerCase().includes(searchVal.toLowerCase())
+    );
+    setFilteredBookings(searchedBookings);
   };
 
+  if (bookings === "Not Found") {
+    props.setCount(1);
+    return <UrlNotWorking />;
+  }
+
+  if (isLoading) {
+    // return <div>Loading...</div>;
+    return <div className="loading-wheel"></div>;
+  }
+
   return (
     <div className="App-content">
       <div className="container">
         <Search search={search} />
-        {/* <SearchResults results={FakeBookings} /> */}
+        <SearchResults booking={filteredBookings} setCustomerId={setCustomerId} setCustomerProfile={setCustomerProfile} setView={setView} view={view} />
+        <CustomerProfile customerId={customerId} customerProfile={customerProfile} view={view} />
       </div>
     </div>
   );

src/CustomerProfile.js

@@ -0,0 +1,24 @@
+import React, { useState, useEffect } from "react";
+import "./App.css";
+
+function CustomerProfile(props) {
+  const [customer, setCustomer] = useState({});
+  useEffect(() => {
+    fetch(`https://cyf-react.glitch.me/customers/${props.customerId}`)
+      .then((response) => response.json())
+      .then((data) => setCustomer(data));
+  }, [props.customerId]);
+  return (
+    <div className={props.view}>
+      <div className="profile-container">
+        <p className="profile">{props.customerProfile}</p>
+        <p>ID: {props.customerId}</p>
+        <p>Email: {customer.email}</p>
+        <p>VIP: {customer.vip ? "Yes" : "No"}</p>
+        <p>Tel: {customer.phoneNumber}</p>
+      </div>
+    </div>
+  );
+}
+
+export default CustomerProfile;

src/EachRowInSearchResults.js

@@ -0,0 +1,44 @@
+import react, { useState } from "react";
+
+function EachRowInSearchResults(props) {
+  const [switchMe, setSwitchMe] = useState("off");
+
+  function handleClick() {
+    if (switchMe === "off") {
+      setSwitchMe("on");
+    } else {
+      setSwitchMe("off");
+    }
+  }
+
+  function handleShowProfile() {
+    props.setCustomerId(props.booking.id);
+    props.setCustomerProfile("Customer Profile");
+    if (props.view === "viewOff") {
+      props.setView("viewOn");
+    } else {
+      props.setView("viewOff");
+    }
+  }
+
+  return (
+    <tr className={switchMe} onClick={handleClick}>
+      <th scope="row">{props.booking.id}</th>
+      <td>{props.booking.title}</td>
+      <td>{props.booking.firstName}</td>
+      <td>{props.booking.surname}</td>
+      <td>{props.booking.email}</td>
+      <td>{props.booking.roomId}</td>
+      <td>{props.booking.checkInDate}</td>
+      <td>{props.booking.checkOutDate}</td>
+      <td>{props.numberOfNights}</td>
+      <td>
+        <button onClick={handleShowProfile} className="btn btn-primary">
+          Show Profile
+        </button>
+      </td>
+    </tr>
+  );
+}
+
+export default EachRowInSearchResults;

src/Footer.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+// address
+const props = ["123 Fake Street, London, E1 4UD", "hello@fakehotel.com", "0123 456789"];
+
+const Footer = () => {
+  return (
+    <footer className="footer">
+      <ul>
+        {props.map((props) => (
+          <p key={props}>{props}</p>
+        ))}
+      </ul>
+    </footer>
+  );
+};
+// footer export
+export default Footer;

src/Header.js

@@ -0,0 +1,16 @@
+import React from "react";
+import "./App.css";
+
+function Heading() {
+  return (
+    <>
+      <header className="App-header">CYF Hotel</header>
+      <img
+        className="hotel-logo"
+        src="https://img.freepik.com/free-vector/golden-elegant-logo-template-with-ornaments_23-2148212128.jpg?w=900&t=st=1686937700~exp=1686938300~hmac=96cba09c7292154b8447b7c54e0d24116ed3c8fc0a2ec07ffc4ac28cab762b20"
+      ></img>
+    </>
+  );
+}
+
+export default Heading;

src/Order.js

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

src/Restaurant.js

@@ -1,14 +1,15 @@
-import React from "react";
+import React, { useState } from "react";
+import RestaurantButton from "./RestaurantButton";
+import Order from "./Order";
 
 const Restaurant = () => {
-  const pizzas = 0;
   return (
-    <div>
+    <div className="center">
       <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 ake" />
       </ul>
     </div>
   );

src/RestaurantButton.js

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