London 10 - Elena Barker - React Module - CYF-Hotel-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

@@ -4,13 +4,14 @@
 
 .App-logo {
   animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+  height: 40px;
 }
 
 .App-header {
   background-color: #222;
   height: 50px;
   padding: 20px;
+  margin-bottom: 15px;
   color: white;
   text-align: left;
   font-family: Arial, Helvetica, sans-serif;
@@ -52,6 +53,14 @@ tr {
   text-align: center;
 }
 
+.un-list {
+  list-style-type: none;
+}
+
 .card {
   width: 18rem;
 }
+
+.highlighted {
+background-color: gray;
+}

src/App.js

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

src/Bookings.js

@@ -1,21 +1,70 @@
-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";
 
 const Bookings = () => {
-  const search = searchVal => {
-    console.info("TO DO!", searchVal);
+  const [bookings, setBookings] = useState([]);
+  const [allData, setAllData] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [errorMessage, setErrorMessage] = useState(null);
+
+  const search = (searchVal) => {
+    if (searchVal !== "") {
+      searchVal = searchVal.toLowerCase();
+      let filteredResults = bookings.filter((booking) => {
+        return (
+          booking.firstName.toLowerCase().includes(searchVal) ||
+          booking.surname.toLowerCase().includes(searchVal)
+        );
+      });
+      setBookings(filteredResults);
+    } else {
+      setBookings(allData);
+    }
   };
+  function doingFetchForTable() {
+    fetch("https://cyf-react.glitch.me")
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error("Error while data fetching(");
+        }
+        return response.json();
+      })
+      .then((data) => {
+        setAllData(data);
+        setBookings(data);
+        setIsLoading(false);
+        setErrorMessage(null);
+      })
+      .catch((errorMessage) => {
+        setIsLoading(false);
+        setErrorMessage(errorMessage.message);
+      });
+  }
+
+  useEffect(() => {
+    doingFetchForTable();
+  }, []);
+
+  const SearchContainer = () => {
+    if (isLoading) {
+      return <p>Please wait while the information is loading...</p>;
+    }
 
-  return (
-    <div className="App-content">
-      <div className="container">
-        <Search search={search} />
-        {/* <SearchResults results={FakeBookings} /> */}
+    if (errorMessage) {
+      return <p>{errorMessage}</p>;
+    }
+
+    return (
+      <div className="App-content">
+        <div className="container">
+          <Search search={search} />
+          <SearchResults results={bookings} />
+        </div>
       </div>
-    </div>
-  );
+    );
+  };
+  return <SearchContainer />;
 };
 
 export default Bookings;

src/CustomerProfile.js

@@ -0,0 +1,61 @@
+import { useState, useEffect } from "react";
+
+const CustomerProfile = ({ id }) => {
+  const [allCustomerData, setAllCustomerData] = useState();
+  const [isLoading, setIsLoading] = useState(true);
+  const [errorMessage, setErrorMessage] = useState(null);
+
+  function doFetchForCustomerProf() {
+    fetch(`https://cyf-react.glitch.me/customers/${id}`)
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error("Failed to fetch customer data.");
+        }
+        return response.json();
+      })
+      .then((data) => {
+        setAllCustomerData(data);
+        setIsLoading(false);
+        setErrorMessage(null);
+      })
+      .catch((error) => {
+        setIsLoading(false);
+        setErrorMessage(error.message);
+      });
+  }
+  useEffect(() => {
+    if (id) {
+      doFetchForCustomerProf();
+    }
+  }, [id]);
+
+  if (isLoading) {
+    return <p>Please wait while the customer information is loading...</p>;
+  }
+
+  if (errorMessage) {
+    return <p>{errorMessage}</p>;
+  }
+
+  return (
+    <div className="customer-card">
+      <h2>Customer Profile Card</h2>
+      <p>
+        <b>Customer ID:</b> {allCustomerData.id}
+      </p>
+      <p>
+        <b>Customer Name:</b> {allCustomerData.title}{" "}
+        {allCustomerData.firstName} {allCustomerData.surname}
+      </p>
+      <p>
+        <b>Customer email:</b> {allCustomerData.email}
+      </p>
+      <p>
+        <b>Customer Phone Number:</b> {allCustomerData.phoneNumber}
+      </p>
+      <p>{allCustomerData.vip ? "vip" : "not vip"}</p>
+    </div>
+  );
+};
+
+export default CustomerProfile;

src/Footer.js

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

src/Heading.js

@@ -0,0 +1,13 @@
+import React from "react";
+import logo from "./Logo.png";
+
+const Heading = () => {
+  return (
+    <header className="App-header">
+      <img className="App-logo" src={logo} alt="Logo" />
+      CYF Hotel
+    </header>
+  );
+};
+
+export default Heading;

src/Order.js

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

src/Restaurant.js

@@ -1,14 +1,16 @@
+import { useState } from "react";
 import React from "react";
+import RestaurantButton from "./RestaurantButton";
+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>
+        <Order orderType="Pizzas" />
+        <Order orderType="Salads" />
+        <Order orderType="Chocolate Cake" />
       </ul>
     </div>
   );

src/RestaurantButton.js

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

src/Search.js

@@ -1,23 +1,37 @@
-import React from "react";
+import React, { useState } from "react";
+import SearchButton from "./SearchButton";
+
+const Search = (props) => {
+  const [searchInput, setSearchInput] = useState("");
+
+  const handleSearchInput = (event) => {
+    setSearchInput(event.target.value);
+  };
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    props.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 className="form-group search-box" onSubmit={handleSubmit}>
             <label htmlFor="customerName">Customer name</label>
             <div className="search-row">
               <input
                 type="text"
                 id="customerName"
                 className="form-control"
                 placeholder="Customer name"
+                value={searchInput}
+                onChange={handleSearchInput}
               />
-              <button className="btn btn-primary">Search</button>
+              <SearchButton onClick={handleSubmit} />
             </div>
           </form>
         </div>

src/SearchButton.js

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