London 9 - Vitalina Kuzmenko - cyf-hotel-react

package.json

@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "eslint": "^8.35.0",
+    "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1"
@@ -14,6 +16,7 @@
     "eject": "react-scripts eject"
   },
   "devDependencies": {
+    "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.3",
     "prettier": "^2.8.4",
     "pretty-quick": "^3.1.3"

src/App.css

@@ -7,8 +7,12 @@
   height: 80px;
 }
 
+.App-header-image {
+  display: flex;
+  background-color: black;
+}
+
 .App-header {
-  background-color: #222;
   height: 50px;
   padding: 20px;
   color: white;
@@ -18,6 +22,11 @@
   font-weight: bold;
 }
 
+.App-header-image img {
+  height: 50px;
+  width: auto;
+}
+
 .App-title {
   font-size: 1.5em;
 }
@@ -41,6 +50,11 @@
 
 tr {
   color: #5b5757;
+  cursor: pointer;
+}
+
+.selected-row {
+  background-color: antiquewhite;
 }
 
 .results {
@@ -52,6 +66,27 @@ tr {
   text-align: center;
 }
 
+.info-cards {
+  display: flex;
+  justify-content: center;
+}
+
 .card {
   width: 18rem;
+  margin: 0 20px;
+}
+
+.card .card-body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.footer-list {
+  list-style: none;
+  display: flex;
+  justify-content: space-around;
+  margin: 50px 0;
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 16px;
 }

src/App.js

@@ -1,13 +1,30 @@
 import React from "react";
 
 import Bookings from "./Bookings";
+import Heading from "./Heading";
+import TouristInfoCards from "./TouristInfoCards";
+import Footer from "./Footer";
 import "./App.css";
+import Cities from "./data/cities.json";
+import Restaurant from "./Restaurant";
 
 const App = () => {
+  let footerArray = [
+    "123 Fake Street, London, E1 4UD",
+    "[email protected]",
+    "0123 456789",
+  ];
   return (
     <div className="App">
-      <header className="App-header">CYF Hotel</header>
+      <Heading />
       <Bookings />
+      <div className="info-cards">
+        {Cities.map((city) => {
+          return <TouristInfoCards key={city.id} city={city} />;
+        })}
+      </div>
+      <Restaurant />
+      <Footer array={footerArray} />
     </div>
   );
 };

src/Bookings.js

@@ -1,18 +1,57 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import Search from "./Search.js";
-// import SearchResults from "./SearchResults.js";
-// import FakeBookings from "./data/fakeBookings.json";
+import SearchResults from "./SearchResults.js";
+import NewBookingForm from "./NewBookingForm.js";
 
 const Bookings = () => {
-  const search = searchVal => {
-    console.info("TO DO!", searchVal);
+  let [bookings, setBookings] = useState("");
+  let [isLoading, setIsLoading] = useState(false);
+  let [error, setError] = useState("");
+
+  const search = (searchVal) => {
+    if (bookings === "" || searchVal === "") return;
+    const newGuestLists = bookings.filter((guest) => {
+      if (
+        guest.firstName.toLowerCase().includes(searchVal.toLowerCase()) ||
+        guest.surname.toLowerCase().includes(searchVal.toLowerCase())
+      ) {
+        return guest;
+      }
+    });
+    setBookings(newGuestLists);
   };
 
+  useEffect(() => {
+    setIsLoading(true);
+    const fetchData = async () => {
+      try {
+        let response = await fetch("https://cyf-react.glitch.me/");
+
+        if (response.status >= 400 && response.status < 600) {
+          throw new Error("Bad response from server");
+        } else {
+          let data = await response.json();
+          setBookings(data);
+          setIsLoading(false);
+        }
+      } catch (error) {
+        setError(error);
+        setIsLoading(false);
+      }
+    };
+    fetchData();
+  }, []);
+
   return (
     <div className="App-content">
       <div className="container">
         <Search search={search} />
-        {/* <SearchResults results={FakeBookings} /> */}
+        <SearchResults results={bookings} />
+        {isLoading ? <p>Please wait for loading data...</p> : null}
+        {error !== "" ? (
+          <p>{`We cannot load the page because an error has occurred.  ${error}. Please fix the error and try one more time.`}</p>
+        ) : null}
+        <NewBookingForm bookingsList={bookings} addNewBooking={setBookings} />
       </div>
     </div>
   );

src/BookingsRow.js

@@ -0,0 +1,52 @@
+import React, { useState, useCallback, useEffect } from "react";
+import moment from "moment/moment";
+
+const BookingsRow = ({ guest, changeGuestProfile }) => {
+  const [isSelected, setIsSelected] = useState(false);
+  const [finalData, setFinalData] = useState(null);
+
+  useEffect(() => {
+    const fetchGuest = async () => {
+      const response = await fetch(
+        `https://cyf-react.glitch.me/customers/${guest.id}`
+      );
+      const data = await response.json();
+      setFinalData(data);
+    };
+    fetchGuest();
+  }, [guest.id]);
+
+  const calculateNights = useCallback((firstDate, secondDate) => {
+    let first = moment(firstDate, "YYYY-MM-DD");
+    let second = moment(secondDate, "YYYY-MM-DD");
+    return second.diff(first, "days");
+  }, []);
+
+  const handleTableRowClick = () => setIsSelected(!isSelected);
+
+  const showProfile = useCallback(() => {
+    changeGuestProfile(finalData);
+  }, [changeGuestProfile, finalData]);
+
+  return (
+    <tr
+      className={isSelected ? "selected-row" : ""}
+      onClick={handleTableRowClick}
+    >
+      <th scope="row">{guest.id}</th>
+      <td>{guest.title}</td>
+      <td>{guest.firstName}</td>
+      <td>{guest.surname}</td>
+      <td>{guest.email}</td>
+      <td>{guest.roomId}</td>
+      <td>{guest.checkInDate}</td>
+      <td>{guest.checkOutDate}</td>
+      <td>{calculateNights(guest.checkInDate, guest.checkOutDate)}</td>
+      <td>
+        <button onClick={showProfile}>Show profile</button>
+      </td>
+    </tr>
+  );
+};
+
+export default BookingsRow;

src/CustomerProfile.js

@@ -0,0 +1,16 @@
+import React from "react";
+
+const CustomerProfile = (props) => {
+  return (
+    props.guest !== null && (
+      <div>
+        <p>Customer id: {props.guest.id}</p>
+        <p>Customer email: {props.guest.email}</p>
+        <p>Customer status: {props.guest.vip === true ? "VIP" : "Normal"}</p>
+        <p>Customer phone number: {props.guest.phoneNumber}</p>
+      </div>
+    )
+  );
+};
+
+export default CustomerProfile;

src/Footer.js

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

src/Heading.js

@@ -0,0 +1,15 @@
+import React from "react";
+
+const Heading = () => {
+  return (
+    <div className="App-header-image">
+      <header className="App-header">CYF Hotel</header>
+      <img
+        src="https://static.vecteezy.com/system/resources/previews/003/543/093/original/eagle-head-logo-template-on-black-background-vector.jpg"
+        alt="logo"
+      />
+    </div>
+  );
+};
+
+export default Heading;