London-10_Anu Thapaliya_cyf-hotel-react

package.json

@@ -3,9 +3,12 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "-": "^0.0.1",
+    "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-scripts": "^5.0.1"
+    "react-scripts": "^2.1.3",
+    "save": "^2.9.0"
   },
   "scripts": {
     "start": "react-scripts start",

src/App.css

@@ -8,16 +8,31 @@
 }
 
 .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;
+
+
+ background-color: #222;
+ height: 50px;
+ padding: 20px;
+ color: white;
+ text-align: left;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 1em;
+ font-weight: bold;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 1rem;
+ background-color: aqua;
+ color: purple;
+}
+
+.App-header img {
+  width: 50px;
+  height:50px;
 }
 
+
+
 .App-title {
   font-size: 1.5em;
 }
@@ -38,10 +53,64 @@
 .search {
   padding: 5px 0 20px 0;
 }
+.page-header {
+  text-align: left;
+  margin-bottom: 20px;
+}
+.form-group {
+  margin-bottom: 20px;
+}
+
+.search-box {
+  display: flex;
+  align-items: center;
+}
+
+label {
+  margin-right: 10px;
+  font-weight: bold;
+}
+
+.form-control {
+  width: 250px;
+  height: 30px;
+  padding: 5px;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+}
+
+.search-button {
+  background-color: red;
+  color: blue;
+  padding: 5px 10px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.search-button:hover{
+  background-color: aqua;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+th, td {
+padding: 10px;
+text-align: left;
+border-bottom: 1px solid aqua;
+}
 
 tr {
   color: #5b5757;
 }
+tr:hover {
+  background-color: orange;
+}
+.selected {
+  background-color: lightskyblue;
+}
 
 .results {
   padding-top: 15px;
@@ -55,3 +124,35 @@ tr {
 .card {
   width: 18rem;
 }
+
+.btn, .RestaurantButton {
+  background-color: aqua;
+  color: white;
+  border: none;
+  padding: 8px, 16px;
+  text-align: center;
+  display: inline-block;
+  font-size: 14px;
+  cursor: pointer;
+  /* transition: background-color 0.3s; */
+
+}
+h3 {
+  color: purple;
+  font-size:xx-large;
+  font-weight: bold;
+  margin-bottom: 10px;
+}
+
+ul {
+  margin-bottom: 20px;
+}
+
+.order-type {
+  font-weight: bold;
+  color:maroon;
+}
+.Customer-profile {
+  font-weight: bold;
+  color: green;
+}

src/App.js

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

src/App.test.js

@@ -1,8 +1,8 @@
 import React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import App from "./App";
 
 it("renders without crashing", () => {
   const div = document.createElement("div");
-  ReactDOM.render(<App />, div);
+  createRoot(div).render(<App />,);
 });

src/Bookings.js

@@ -1,20 +1,63 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import Search from "./Search.js";
-// import SearchResults from "./SearchResults.js";
-// import FakeBookings from "./data/fakeBookings.json";
+import SearchResults from "./SearchResults.js";
+// import fakeBookings from "./data/fakeBookings.json";
 
 const Bookings = () => {
   const search = searchVal => {
     console.info("TO DO!", searchVal);
   };
 
-  return (
-    <div className="App-content">
-      <div className="container">
-        <Search search={search} />
-        {/* <SearchResults results={FakeBookings} /> */}
+  const filterBookings = searchVal => {
+    const filteredBookings = bookings.filter(
+    booking => booking.firstName.toLowerCase().includes(searchVal.toLowerCase()) || 
+    booking.surname.toLowerCase().includes(searchVal.toLowerCase())
+    );
+    setBookings(filteredBookings)
+  };
+const [bookings, setBookings]=useState([]);
+const [isLoading, setIsLoading] = useState(true);
+const [error, setError] = useState(null);
+
+useEffect(()=> {
+  setIsLoading(true);
+  setError(null);
+  // console.log("Hello from CYF Hotel React");
+
+  fetch(
+    'https://cyf-react.glitch.me/error'
+  )
+  .then(response => {
+    if (!response.ok) {
+      throw new Error("Failed to fetch data");
+    }
+    return response.json();
+  })
+  .then(data => {
+ setBookings(data);
+ setIsLoading(false);
+  })
+    .catch(error => {
+      setError("Error loading bookings data.");
+      setIsLoading(false);
+      console.log(error);
+    });
+}, []);
+
+
+return (
+    <div className="bookings">
+      <h2>Bookings</h2>
+    {/* <Search searchQuery={search}/> */}
+    {isLoading ? (
+    <p>Loading...</p>
+    ) : error ? (
+      <p>{error}</p>
+    ) : (
+  <SearchResults  results={bookings} /> 
+    )}    
       </div>
-    </div>
+
   );
 };
 

src/CustomerProfile.js

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

src/Footer.js

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

src/Heading.js

@@ -0,0 +1,11 @@
+import React from "react";
+const Heading = () => {
+   return (
+       <header>
+          <img src="https://img.icons8.com/?size=2x&id=LxAiYuueWkCM&format=png" alt ="Hotel Logo" />
+       </header>
+   );
+};
+
+
+export default Heading;

src/Order.js

@@ -0,0 +1,19 @@
+import React, { useState }from 'react';
+import RestaurantButton from './RestaurantButton';
+import './App.css';
+
+const Order = ({ orderType }) => {
+   const [orders, setOrders] = useState(0);
+
+   const orderOne = () => {
+    setOrders(orders + 1);
+   };
+
+   return (
+    <li>
+     <span className="order-type">  {orderType}</span>: {orders} <RestaurantButton onClick={orderOne} />
+    </li>
+   );
+};
+
+export default Order;

src/Restaurant.js

@@ -1,15 +1,26 @@
-import React from "react";
-
+import React, { useState } from "react";
+import RestaurantButton from './RestaurantButton';
+import Order from './Order';
+import './App.css';
 const Restaurant = () => {
-  const pizzas = 0;
+  // const pizzas = 0;
+  // const [orders, setOrders] = useState(0);
+
+  // const orderOne = () => {
+  //   setOrders(orders + 1);
+  // };
   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>
+
+        {/* <p>
+          Pizzas: {orders} <RestaurantButton  onClick={orderOne} />
+        </p> */}
     </div>
   );
 };

src/RestaurantButton.js

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