London10 | Adrian Ilovan | 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,9 +4,10 @@
 
 .App-logo {
   animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+  height: 60px;
 }
 
+
 .App-header {
   background-color: #222;
   height: 50px;
@@ -48,10 +49,42 @@ tr {
 }
 
 .footer {
-  padding-top: 20px;
+  padding-top: 10px;
   text-align: center;
 }
 
+.card-img {
+  width: 100%;
+  height: auto;
+  flex-grow: 1;
+}
+
+.card-container {
+  display: flex;
+  justify-content: space-around;
+  margin-top: 50px;
+}
+
 .card {
   width: 18rem;
 }
+
+/* .footer {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  padding: 10px;
+  text-align: center;
+  background-color: #222;
+}
+
+.footer, h1 {
+  color:white;
+} */
+
+.selected-row {
+  background-color: yellow;
+  color: black;
+  font-weight: bold;
+}

src/App.js

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

src/Bookings.js

@@ -1,19 +1,56 @@
-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 [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    fetch("https://cyf-react.glitch.me")
+      .then((response) => response.json())
+      .then((json) => {
+        setBookings(json);
+        setIsLoading(false);
+      })
+      .catch((error) => {
+        console.log("Error fetching data:", error);
+        setError("Error fetching data. Please try again later.");
+        setIsLoading(false);
+      });
+  }, []);
+
+  useEffect(() => {
+    fetch("https://cyf-react.glitch.me")
+      .then((response) => response.json())
+      .then((json) => setBookings(json))
+      .catch((error) => console.log("Error fetching data:", error));
+  }, []);
+
+  var search = (searchVal) => {
+    const filteredBookings = bookings.filter(
+      (booking) =>
+        booking.firstName.includes(searchVal) ||
+        booking.surname.includes(searchVal)
+    );
+    setBookings(filteredBookings);
   };
 
   return (
     <div className="App-content">
-      <div className="container">
-        <Search search={search} />
-        {/* <SearchResults results={FakeBookings} /> */}
-      </div>
+      {isLoading ? (
+        <h1>Loading...Please Wait</h1>
+      ) : error ? (
+        <h1>{error}</h1>
+      ) : (
+        <div className="container">
+          <div className="container">
+            <Search search={search} />
+            <SearchResults bookings={bookings} />
+          </div>
+        </div>
+      )}
     </div>
   );
 };

src/CostumerProfile.js

@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from "react";
+
+const CostumerProfile = ({id}) => {
+
+   const [costumerProfile, setCostumerProfile] = useState(null)
+
+   useEffect(() => {
+      const fetchCostumerProfile = async () => {
+         try {
+            const res = await fetch(`https://cyf-react.glitch.me/customers/${id}`);
+            const data = await res.json();
+            setCostumerProfile(data);
+         } catch (error) {
+            console.error("Error fetching Costumer Profile:", error);
+         }
+      };
+      if (id) {
+         fetchCostumerProfile();
+      }
+   }, [id]);
+
+   if (!id) {
+      return null;
+   }
+
+   return(
+      <div>
+        {costumerProfile ? (
+         <div>
+            <h1>Costumer Profile {id}</h1>
+            <ul>
+               <li>Email: {costumerProfile.email}</li>
+               <li>VIP: {costumerProfile.vip ? "Yes" : "No"}</li>
+               <li>Phone Number: {costumerProfile.phoneNumber}</li>
+            </ul>
+         </div>
+        ) : (
+         <p>Loading Costumer Profile...</p>
+        )}
+      </div>
+   );
+};
+
+export default CostumerProfile;

src/Footer.js

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

src/Heading.js

@@ -0,0 +1,12 @@
+import React from "react";
+import "./App.css";
+
+const Heading = () => {
+    return(
+        <header className="App-header">
+            <img alt="App-logo" className="App-logo" src="https://marketplace.canva.com/EAE8Xyb2xY8/1/0/1600w/canva-gold-exclusive-royal-luxury-hotel-logo-izeElzvImEY.jpg"></img>
+            <h1>CYF Hotel</h1></header>
+    );
+}
+
+export default Heading;

src/Order.js

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

src/Restaurant.js

@@ -1,14 +1,16 @@
-import React from "react";
+import React, { useState } 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,14 @@
+import React, { useState } from "react";
+
+const RestaurantButton = ({ onClick }) => {
+    return (
+        <button className="btn btn-primary"
+          onClick={onClick} >Add</button>
+    )
+
+
+}
+
+
+export default RestaurantButton;
+

src/Search.js

@@ -1,23 +1,39 @@
-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 handleSubmitInput = 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 onSubmit={handleSubmitInput} 
+                className="form-group search-box">
             <label htmlFor="customerName">Customer name</label>
             <div className="search-row">
               <input
+                value={searchInput}
+                onChange={handleSearchInput}
                 type="text"
                 id="customerName"
                 className="form-control"
                 placeholder="Customer name"
               />
-              <button className="btn btn-primary">Search</button>
+              <SearchButton />
             </div>
           </form>
         </div>
@@ -26,4 +42,5 @@ const Search = () => {
   );
 };
 
+
 export default Search;

src/SearchButton.js

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