React-Ebrahim Beiati-Asl cyf-hotel

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.css

@@ -1,57 +1,77 @@
 .App {
   text-align: left;
+  text-align: center;
 }
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
-}
-
 .App-header {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+
   background-color: #222;
   height: 50px;
   padding: 20px;
+  padding-left: 10px;
   color: white;
   text-align: left;
   font-family: Arial, Helvetica, sans-serif;
-  font-size: 1em;
-  font-weight: bold;
+  padding-top: 20px;
+  text-align: center;
 }
-
-.App-title {
-  font-size: 1.5em;
+.headerContainer {
+  display: flex;
+  align-items: center;
+}
+.logo {
+  fill: rgb(55, 59, 55);
+  width: 50px;
+  height: 50px;
+  margin-right: 10px;
+  padding: 5px;
+  margin-left: 10px;
+  filter: invert(1);
 }
 
-.App-content {
-  padding-top: 20px;
-  font-size: large;
+.cardContainer {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.card {
+  width: 18rem;
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+  width: 40vh;
 }
-.search {
-  padding: 5px 0 20px 0;
+.card-img-top {
+  object-fit: cover;
+  width: 100%;
+  height: 100%;
 }
-
-tr {
-  color: #5b5757;
+.order-type {
+  display: flex;
+  gap: 20px;
+  margin-top: 0;
+  margin-bottom: 1rem;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
 }
-
-.results {
-  padding-top: 15px;
+footer ul {
+  display: flex;
+  justify-content: space-around;
+  list-style-type: none;
+  padding: 20px 0 5px 0;
 }
-
-.footer {
-  padding-top: 20px;
-  text-align: center;
+table .thead-dark th {
+  color: #767171;
+  background-color: #212529;
+  border-color: #32383e;
+  margin-left: 15%;
 }
 
-.card {
-  width: 18rem;
-}
+.selected-colour {
+  background-color: rgb(55, 53, 53);
+}

src/App.js

@@ -1,15 +1,22 @@
 import React from "react";
-
+import Heading from "./Heading";
 import Bookings from "./Bookings";
+import TouristInfoCards from "./TouristInfoCards";
+import Footer from "./Footer";
+import Restaurant from "./Restaurant";
 import "./App.css";
 
 const App = () => {
   return (
     <div className="App">
-      <header className="App-header">CYF Hotel</header>
+      <header className="App-header"></header>
+      <Heading />
+      <TouristInfoCards />
       <Bookings />
+      <Restaurant />
+      <Footer />
     </div>
   );
 };
 
-export default App;
+export default App;

src/Bookings.js

@@ -1,18 +1,54 @@
-import React from "react";
-import Search from "./Search.js";
-// import SearchResults from "./SearchResults.js";
-// import FakeBookings from "./data/fakeBookings.json";
+import React, { useEffect, useState } from "react";
+import Search from "./Search";
+import SearchResults from "./SearchResults";
+import CustomerProfile from "./CustomerProfile";
+import FakeBookings from "./data/fakeBookings.json";
 
 const Bookings = () => {
-  const search = searchVal => {
-    console.info("TO DO!", searchVal);
+  useEffect(() => {
+    console.log("Fetching Information  be patient ... ");
+    fetch("https://cyf-react.glitch.me")
+      .then((response) => response.json())
+      .then((data) => setBookings(data))
+      .catch((err) => {
+        console.log(err);
+      });
+  }, []);
+
+  const [bookings, setBookings] = useState([]);
+  const [showList, setShowList] = useState(true);
+
+  const search = (searchVal) => {
+    const filterBookings = bookings.filter((booking) => {
+      booking.firstName.toLowerCase().includes(searchVal.toLowerCase()) ||
+        booking.lastName.toLowerCase().includes(searchVal.toLowerCase());
+    });
+    setBookings(filterBookings);
+    setShowList(searchVal.length == 0);
   };
 
   return (
     <div className="App-content">
       <div className="container">
         <Search search={search} />
-        {/* <SearchResults results={FakeBookings} /> */}
+        <SearchResults results={showList ? bookings : filterBookings} />
+
+        {/* { <table className="table">}
+          <thead className="thead-dark">
+            <tr>
+              <th scope="col">ID</th>
+              <th scope="col">Title</th>
+              <th scope="col">FirstName</th>
+              <th scope="col">SureName</th>
+              <th scope="col">Email</th>
+              <th scope="col">Room ID</th>
+              <th scope="col">Check in</th>
+              <th scope="col">Check out</th>
+              <th scope="col">Nights</th>
+            </tr>
+          </thead>
+          <SearchResults results={bookings} />
+        </table> */}
       </div>
     </div>
   );

src/CustomerProfile.jsx

@@ -0,0 +1,35 @@
+import React, { useState, useEffect } from "react";
+
+const CustomerProfile = (props) => {
+  const [customerData, setCustomerData] = useState("");
+
+  useEffect(() => {
+    fetch(`https://cyf-react.glitch.me/customers/${props.id}`)
+      .then((res) => res.json())
+      .then((data) => setCustomerData(data));
+  }, [props.id]);
+
+  return (
+    <div className="customer-profile-container">
+      <h3>Customer Profile</h3>
+      <p>
+        Customer ID: <span>{customerData.id}</span>
+      </p>
+      <p>
+        Customer Name:{" "}
+        <span>
+          {customerData.title} {customerData.firstName} {customerData.surname}
+        </span>
+        Customer Email: <span>{customerData.email}</span>
+      </p>
+      <p>
+        Customer Phone Number: <span>{customerData.phoneNumber}</span>
+      </p>
+      <p>
+        VIP : <span>{customerData.vip ? "Yes" : "No"}</span>
+      </p>
+    </div>
+  );
+};
+
+export default CustomerProfile;

src/Footer.jsx

@@ -0,0 +1,21 @@
+import React from "react";
+
+const props = [
+  "123 Fake Street, London, E1 4UD",
+  "[email protected]",
+  "0123 456789",
+];
+
+const Footer = () => {
+  return (
+    <footer>
+      <ul>
+        {props.map((props) => (
+          <li key={props}>{props}</li>
+        ))}
+      </ul>
+    </footer>
+  );
+};
+
+export default Footer;

src/Heading.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+const Heading = () => {
+  return (
+    <div className="App-header">
+      <img
+        className="logo"
+        src="https://www.svgrepo.com/show/288092/hotel.svg"
+        alt="Hotel Logo"
+      />
+      <header style={{fontSize:"29px", fontFamily:"cursive", boxShadow:"revert",border:"3px solid white" , padding:"2px"}}>CYF Hotel</header>
+    </div>
+  );
+};
+
+export default Heading;

src/Nights.jsx

@@ -0,0 +1,8 @@
+import moment from "moment";
+
+export const numberOfNight = ({ checkInDate, checkOutDate }) => {
+  const checkIn = moment(checkInDate);
+  const checkOut = moment(checkOutDate);
+  const nights = checkOut.diff(checkIn, "days");
+  return nights;
+};

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 (
+    <ul>
+      <li>
+        {orderType}: {orders}
+        <RestaurantButton onClick={orderOne} />
+      </li>
+    </ul>
+  );
+};
+
+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>
+      <ul className="order-type">
+        <Order orderType="Pizza" />
+        <Order orderType="Cesar-Salad" />
+        <Order orderType="Chocolate cake" />
+        <Order orderType="Ice-Cream"/>
       </ul>
     </div>
   );

src/RestaurantButton.jsx

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