London10_Afsha_Hossain_cyf-hotel-react_React_Week1

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": []
+}

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

@@ -8,14 +8,16 @@
 }
 
 .App-header {
-  background-color: #222;
-  height: 50px;
-  padding: 20px;
-  color: white;
+  background-color: white;
+  height: 8.5rem;
+  padding: 1rem;
+  color: black;
   text-align: left;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 1em;
   font-weight: bold;
+  display: flex;
+  flex-direction: row;
 }
 
 .App-title {
@@ -39,6 +41,10 @@
   padding: 5px 0 20px 0;
 }
 
+.table-bordered {
+  margin:2rem 0 5rem 0;
+}
+
 tr {
   color: #5b5757;
 }
@@ -52,6 +58,18 @@ tr {
   text-align: center;
 }
 
+.footer-ul {
+  list-style-type: none;
+}
+
+
 .card {
-  width: 18rem;
+  width: 35rem;
+}
+
+.cards-container {
+  display: flex;
+  flex-direction: row;
+  gap: 4rem;
+  margin-bottom: 4rem;
 }

src/App.js

@@ -1,13 +1,24 @@
 import React from "react";
-
+import Heading from "./components/Heading";
+import TouristInfoCards from "./components/TouristInfoCards";
 import Bookings from "./Bookings";
+import Footer from "./components/Footer";
 import "./App.css";
+import Restaurant from "./Restaurant";
 
 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>
+      <Heading />
+      <TouristInfoCards />
       <Bookings />
+      <Restaurant />
+      <Footer address = {address}/>
     </div>
   );
 };

src/Bookings.js

@@ -1,21 +1,67 @@
-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 "./components/SearchResults.jsx";
+// import SearchResultsOther from './components/SearchResultsOther.js';
 
 const Bookings = () => {
-  const search = searchVal => {
-    console.info("TO DO!", searchVal);
+  const [bookings, setBookings] = useState([]);
+
+  const [searchVal, setSearchVal] = useState("");
+
+  const [isLoading, setIsLoading] = useState(true);
+
+  const [isError, setIsError] = useState(false);
+
+  useEffect(() => {
+    fetch("https://cyf-react.glitch.me/error")
+      .then((res) => res.json())
+      .then((data) => {
+        if (data.error !== undefined) {
+          console.log("error");
+          setIsError(true);
+        } else {
+          setIsLoading(false);
+          setBookings(data);
+        }
+      })
+  }, []);
+
+  /*
+isLoading: true, isError: false,  
+isLoading: false, isError: false, 
+isLoading: false, isError: true, 
+*/
+
+  const search = (searchVal) => {
+    console.log("TO DO!", searchVal);
+    setSearchVal(searchVal);
   };
 
+  let displayedBookings = bookings.filter(
+    (booking) =>
+      booking.firstName.toLowerCase().includes(searchVal.toLowerCase()) ||
+      booking.surname.toLowerCase().includes(searchVal.toLowerCase())
+  );
+
+
   return (
     <div className="App-content">
       <div className="container">
-        <Search search={search} />
-        {/* <SearchResults results={FakeBookings} /> */}
+        {isError ? (
+          <p>Error loading...</p>
+        ) : isLoading ? (
+          <p>Page loading...</p>
+        ) : (
+          <>
+            <Search search={search} />
+            <SearchResults results={displayedBookings} />
+          </>
+        )}
+        {/* <SearchResultsOther results={bookings} /> */}
       </div>
     </div>
   );
 };
 
 export default Bookings;
+

src/Restaurant.js

@@ -1,14 +1,15 @@
 import React from "react";
+import Order from "./components/Order";
 
 const Restaurant = () => {
-  const pizzas = 0;
+
   return (
-    <div>
+    <div className="restaurant-orders">
       <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>
     </div>
   );

src/Search.js

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

src/components/CustomerProfile.css

@@ -0,0 +1,8 @@
+.profile-container {
+    border: 1px solid grey;
+    padding: 1rem;
+}
+
+.profile-list {
+  list-style-type: none;
+}

src/components/CustomerProfile.jsx

@@ -0,0 +1,38 @@
+/*
+This is how we'd like to display the customer's profile:
+
+    "id": 1,
+    "email": "[email protected]",
+    "vip": true,
+    "phoneNumber": "+44 1632 960185"
+
+*/
+
+import React, { useState, useEffect } from "react";
+import "./CustomerProfile.css";
+
+const CustomerProfile = ({ id }) => {
+  const [customerProfile, setCustomerProfile] = useState({});
+
+  useEffect(() => {
+    console.log(id);
+    fetch(`https://cyf-react.glitch.me/customers/${id}`)
+      .then((res) => res.json())
+      .then((data) => setCustomerProfile(data));
+  }, [id]);
+
+  return (
+    <div className="profile-container">
+      <p>Customer Profile: </p>
+      <ul className="profile-list">
+        <li>ID: {customerProfile.id}</li>
+        <li>Email: {customerProfile.email}</li>
+        <li>VIP: {customerProfile.vip?.toString()}</li>
+        <li>Phone number: {customerProfile.phoneNumber}</li>
+      </ul>
+    </div>
+  );
+};
+
+export default CustomerProfile;
+

src/components/Footer.jsx

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

src/components/Heading.jsx

@@ -0,0 +1,15 @@
+import react from "react";
+
+function Heading() {
+    return (
+      <header className="App-header">
+        <img
+          src="https://images.unsplash.com/photo-1564501049412-61c2a3083791?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1932&q=80"
+          alt="logo"
+        />
+        <h1>CYF Hotel</h1>
+      </header>
+    );
+}
+
+export default Heading;

src/components/Order.jsx

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

src/components/RestaurantButton.css

@@ -0,0 +1,10 @@
+.restaurant-orders {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 6rem;
+}
+
+.btn {
+    margin: 1.5rem 2rem;
+}

src/components/RestaurantButton.jsx

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

src/components/SearchButton.jsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const SearchButton = () => {
+  return <button className="btn btn-primary">Search</button>;
+};
+
+export default SearchButton;