London10 | Andrius Isin | React-Week-1,2,3 | Hotel-Project

package.json

@@ -3,8 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.1",
     "react-scripts": "^5.0.1"
   },
   "scripts": {

src/App.css

@@ -1,57 +1,68 @@
-.App {
-  text-align: left;
+.btn-custom {
+  background-color: #ff7f50;
+  /* Custom color */
+  border-color: #ff7f50;
+  /* Custom border color */
+  transition: background-color 0.3s, border-color 0.3s;
+  /* Smooth transition on hover */
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+.btn-custom:hover {
+  background-color: #ff6347;
+  /* Darker shade on hover */
+  border-color: #ff6347;
+  /* Darker shade on hover */
 }
 
-.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;
+.service-card {
+  transition: all 0.3s ease;
+  /* Apply transition effect to all properties */
 }
 
-.App-title {
-  font-size: 1.5em;
+.service-card:hover {
+  transform: scale(1.05);
+  /* Grow the card slightly on hover */
+  background-color: #f8f9fa;
+  /* Change background color on hover */
 }
 
-.App-content {
-  padding-top: 20px;
-  font-size: large;
+/* Bookings.css */
+.loading-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-.search {
-  padding: 5px 0 20px 0;
+.blink_me {
+  font-size: 24px;
+  color: #333;
+  text-transform: uppercase;
+  letter-spacing: 2px;
+  animation: blink 1s infinite alternate;
 }
 
-tr {
-  color: #5b5757;
-}
+@keyframes blink {
+  0% {
+    opacity: 0.2;
+  }
 
-.results {
-  padding-top: 15px;
+  100% {
+    opacity: 1;
+  }
 }
 
-.footer {
-  padding-top: 20px;
-  text-align: center;
+.loading-spinner {
+  border: 4px solid rgba(0, 0, 0, 0.1);
+  border-left-color: #333;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  animation: spin 1s linear infinite;
+  margin-top: 20px;
 }
 
-.card {
-  width: 18rem;
-}
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}

src/App.js

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

src/Components/Bookings.js

@@ -0,0 +1,61 @@
+import React, { useState, useEffect } from "react";
+import Search from "./Search.js";
+import SearchResults from "./SearchResults.js";
+// import FakeBookings from "./data/fakeBookings.json";
+
+const Bookings = () => {
+  const [bookings, setBookings] = useState([]);
+  const [loadingData, setLoadingData] = useState(false);
+  const [errorMsg, setErrorMsg] = useState(null);
+  useEffect(() => {
+    setLoadingData(false);
+    fetch(`https://andrius-hotel-server.onrender.com/bookings`)
+      .then((res) => {
+        if (!res.ok) {
+          throw Error(
+            `The fetching of bookings was not successful. Error: ${res.status}`
+          );
+        }
+        return res.json();
+      })
+      .then((data) => {
+        setBookings(data);
+        setLoadingData(true);
+        setErrorMsg(null);
+      })
+      .catch((error) => {
+        setErrorMsg(error.message);
+      });
+  }, []);
+  const search = (searchVal) => {
+    const filteredBooking = bookings.filter((booking) => {
+      return (
+        booking.firstName.toLowerCase().includes(searchVal.toLowerCase()) ||
+        booking.surname.toLowerCase().includes(searchVal.toLowerCase())
+      );
+    });
+
+    setBookings(filteredBooking);
+    // console.info("TO DO!", searchVal);
+  };
+
+  return (
+    <div id="bookings" className="App-content">
+      <div className="container">
+        {/* <Search search={search} /> */}
+        {errorMsg ? (
+          <h1> {errorMsg}</h1>
+        ) : loadingData ? (
+          <SearchResults results={bookings.bookings} />
+        ) : (
+          <div className="loading-container">
+            <h1 className="blink_me">Loading.....</h1>
+            <div className="loading-spinner"></div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Bookings;

src/Components/CustomerProfile.js

@@ -0,0 +1,52 @@
+import React, { useEffect, useState } from "react";
+
+const CustomerProfile = (props) => {
+  const [customerData, setCustomerData] = useState(null); // Initialize customerData as null
+
+  useEffect(() => {
+    if (props.id) {
+      fetch(`https://andrius-hotel-server.onrender.com/bookings/${props.id}`)
+        .then((response) => response.json())
+        .then((data) => setCustomerData(data))
+        .catch((error) =>
+          console.error("Error fetching customer data:", error)
+        );
+    }
+  }, [props.id]);
+
+  if (!customerData) {
+    return <p>Loading...</p>; // Display loading message while fetching data
+  }
+
+  // Assuming customerData is an array
+  const customer = customerData[0]; // Assuming the data for the customer is at the first index of the array
+
+  return (
+    <table className="table">
+      <thead className="thead-dark">
+        <tr>
+          <th scope="col">Customer ID</th>
+          <th scope="col">Title</th>
+          <th scope="col">First Name</th>
+          <th scope="col">Surname</th>
+          <th scope="col">Email</th>
+          <th scope="col">VIP</th>
+          <th scope="col">Phone number</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th scope="row">{props.id}</th>
+          <td>{customer.title}</td>
+          <td>{customer.firstName}</td>
+          <td>{customer.surname}</td>
+          <td>{customer.email}</td>
+          <td>{customer.vip ? "Yes" : "No"}</td>
+          <td>{customer.phoneNumber}</td>
+        </tr>
+      </tbody>
+    </table>
+  );
+};
+
+export default CustomerProfile;