London-10_Saqib-Javed_CYF-Hotel-React

README.md

@@ -86,7 +86,7 @@ A hotel booking application in React. Homework for the [CodeYourFuture React mod
 
 #### 9. Preparing to add more pizzas
 
-**Instructions:** At the moment, the number of pizzas a guest can order is static and set to 0, even if they click on the 'Add' button. We will change that in the following to let a guest add more pizzas to their order. First, declare a new state variable `orders` along with the function to set the orders state `setOrders`. The initial value of the `orders` state should be **0**. Use the new `orders` variable instead of the `pizzas` variable (that you can now delete).
+**Instructions:** At the moment, the number of pizzas a guest can order is static and set to 0, even if they click on the 'Add' button. We will change that in the following to let a guest add more pizzas to their order. First, declare a new state variable `orders` along with the function to set the orders state `setOrders`. The initial value of the `orders` state should be **0**. 
 
 **Hint:** You need to use the React function `useState` to create a state variable. Remember to import the function at the top with `import React, {useState} from "react";`.
 

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,143 @@
-.App {
-  text-align: left;
+/* HEADER......... */
+
+/* .hotel-logo{
+    border-radius: 50%;
+    margin: 10px;
+    padding: 10px;
+
+} */
+
+.App-header{
+    display: flex;
+    align-items: center;
+    justify-content:space-between;
+    background-color:  rgb(35, 38, 37);
+    margin-top: 2px;
+    margin-bottom: 2px;
+
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+.span{
+     color: rgb(15, 119, 216);
+    font-family: fantasy;
+    text-align: center;
 }
 
-.App-header {
-  background-color: #222;
-  height: 50px;
-  padding: 20px;
-  color: white;
-  text-align: left;
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: 1em;
-  font-weight: bold;
+.span2{
+    color: orange;
+    font-family: fantasy;
+    text-align: center;
 }
 
-.App-title {
-  font-size: 1.5em;
+
+/* ......TOURIST INFO..... */
+
+.card-img-top {
+  margin-top: 5px;
+  margin-bottom: 5px;
+  width: 40%; 
+  height: 40%;
+  border-radius: 5px;
 }
 
-.App-content {
-  padding-top: 20px;
-  font-size: large;
+.h3, .para {
+  text-align: center;
+  padding: 10px;
+  margin: 10px;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.Tourist-info{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 5px;
+  padding: 5px;
+  background-color: rgb(35, 38, 37);
+  color: aliceblue;
 }
-.search {
-  padding: 5px 0 20px 0;
+
+/* ..........RESTAURANT........ */
+
+/* Restaurant Button */
+.btn-zero{
+    background-color: coral;
+    color: aliceblue;
+    font-size: 1rem;
+    line-height: 1.5;
+    border-radius: 0.25rem;
+    margin: 10px;
 }
 
-tr {
-  color: #5b5757;
+/* .......SEARCH RESULTS..... */
+
+table,
+th,
+td {
+  border: 1px solid black;
+  font-family: fantasy;
+  text-align: center;
+  height: 50px; 
+  padding: 8px;
+  color: black;
+
 }
 
-.results {
-  padding-top: 15px;
+.row-highlight{
+  background-color: rgb(170, 170, 162);
 }
 
-.footer {
-  padding-top: 20px;
+.row-none-highlight{
+  background-color: white;
+}
+/* tr:hover {background-color: rgb(236, 149, 118);} */
+/* tr:hover {background-color: rgb(95, 184, 226);} */
+/* tr:nth-child(even) {background-color: #f2f2f2;} */
+
+.card{
+  padding: 5px;
+  margin: 5px;
+  display: flex;
+  flex-direction: row;
+  gap: 0rem;
+  margin-bottom: 0rem;
+ background-color:rgb(35, 38, 37);
+
+}
+
+.loading-message{
+  margin: 10px;
+  padding: 10px;
+}
+
+.container{
+  display: flex;
+    margin: 20px;
+    padding: 20px;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    align-items: center;
+
+}
+
+/* FOOTER...... */
+
+.address{
+  font-family: fantasy;
   text-align: center;
+  height: 50px; 
+  padding: 10px;
+  margin: 10px;
+  list-style: none;
+  border-top: 1px solid rgb(49, 46, 42);; 
+  background-color: rgb(16, 14, 13);
+  color: orange;
+  height: auto;
 }
 
-.card {
-  width: 18rem;
+.span{
+    font-weight: bold;
+    color: orange;
+    padding: 8px;
+    margin: 10px;
+    border-bottom: 1px orange solid;
 }

src/App.js

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

src/Bookings.js

@@ -1,18 +1,57 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import Search from "./Search.js";
+import SearchResults from "../src/components/SearchResults.js";
+import CustomerProfile from "./CustomerProfile.js";
 // import SearchResults from "./SearchResults.js";
 // import FakeBookings from "./data/fakeBookings.json";
 
 const Bookings = () => {
-  const search = searchVal => {
-    console.info("TO DO!", searchVal);
+  const [bookings, setBookings] = useState([]);
+  const [reset, setReset] = useState([]);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    fetch(`https://cyf-react.glitch.me/delayed`)
+      .then((res) => res.json())
+      .then((data) => {
+        setBookings(data);
+        setReset(data);
+        setError(true);
+      });
+  }, [])
+
+  if (bookings == false) {
+   return <div className="loading-message"><p>Loading booking, Please wait.....</p></div>
+  };
+
+  if(bookings.error) {
+    return error && <p className="http-error">HTTP eror 500...</p>
+  }
+
+  const search = (searchVal) => {
+
+    const filterSearch = bookings.filter(function (bookings) {
+      return bookings.firstName == searchVal || bookings.surname == searchVal;
+    });
+
+    setBookings(filterSearch);
+  };
+
+  const resetHandler = () => {
+    console.log(reset);
+
+    return setBookings(reset);
   };
 
   return (
     <div className="App-content">
       <div className="container">
         <Search search={search} />
         {/* <SearchResults results={FakeBookings} /> */}
+        {/* <SearchResults results={FakeBookings} /> */}
+        <SearchResults results={bookings} />
+        <button onClick={resetHandler}> Reset</button>
+        {/* <CustomerProfile results={bookings.id} /> */}
       </div>
     </div>
   );

src/CustomerProfile.js

@@ -0,0 +1,41 @@
+// import { useState } from "react";
+// import { useEffect } from "react";
+import React, { useState, useEffect } from "react";
+
+const CustomerProfile = ({id}) => {
+
+  const [profile, setProfile] = useState(null);
+
+  useEffect(() => {
+    fetch(`https://cyf-react.glitch.me/customers/${id}`)
+      .then((response) => {
+        return response.json();
+      })
+      .then((data) => {
+        setProfile(data);
+        console.log(id);
+      })
+      .catch((error) => {
+        console.error(error);
+      });
+
+  }, [id]);
+
+//   const { results } = props;
+
+  return profile ? (
+    <div className="extra-info">
+      <p>Customer ID: {profile.id}</p>
+      <p>Name: {profile.firstName} {profile.surname}
+      </p>
+      <p>E-mail: {profile.email}</p>
+      {profile.vip ? <p>VIP</p> : "Not VIP"}
+      <p>Mobile: {profile.phoneNumber}</p> 
+    </div>
+  ) : (
+    id && <p>loading profile....</p>
+  );
+};
+
+
+export default CustomerProfile;

src/Footer.js

@@ -0,0 +1,23 @@
+import React from "react";
+// import "./Footer.css";
+
+const Footer = () => {
+  const address = [
+    "123 Fake Street, London, E1 4UD",
+    "[email protected]",
+    "0123 456789",
+  ];
+
+  const currentDate = new Date().toLocaleDateString();
+  return (
+    <ul className="address">
+      {address.map((item, index) => (
+        <li key={index}>{item}</li>
+      ))}
+      <li className="span">
+        <span>Today is: {currentDate}</span>
+      </li>
+    </ul>
+  );
+};
+export default Footer;

src/Header.js

@@ -0,0 +1,23 @@
+import React from "react";
+// import "./Header.css";
+
+const Header = () => {
+  // const logo = <img src="https://images.unsplash.com/photo-1542314831-068cd1dbfeeb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8aG90ZWx8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=1400&q=60"></img>
+
+  return (
+    <header className="App-header">
+      <div>
+        <h1><span className="span">CYF</span><span className="span2">HOTEL LTD</span></h1>
+        {/* <img src={logo} width="350" height="350" /> */}
+
+        {/* <img
+          className="hotel-logo"
+          src="https://images.unsplash.com/photo-1542314831-068cd1dbfeeb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8aG90ZWx8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=1400&q=60"
+          height={200} width={350}
+        ></img> */}
+      </div>
+    </header>
+  );
+};
+
+export default Header;