Glasgow Class 6 - Christina Mifsud - React - Hotel React

package.json

@@ -3,17 +3,19 @@
   "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"
+    "react-scripts": "^2.1.3"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "react-scripts --openssl-legacy-provider start",
     "build": "react-scripts build",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "husky": "^8.0.3",
     "prettier": "^2.8.4",
     "pretty-quick": "^3.1.3"

src/App.css

@@ -52,6 +52,15 @@ tr {
   text-align: center;
 }
 
+.card-container {
+  display: flex;
+}
+
 .card {
-  width: 18rem;
+  width: 30rem;
+  text-align: center;
+  border: solid green 3px;
+  margin: 2rem;
+  align-items: center;
+  justify-content: space-around;
 }

src/App.js

@@ -1,13 +1,23 @@
+import "./App.css";
 import React from "react";
-
+import Header from "./Header";
 import Bookings from "./Bookings";
-import "./App.css";
+import Restaurant from "./Restaurant";
+import TouristInfoCards from "./TouristInfoCards";
+import Footer from "./Footer";
+
+// This exercise was a collaborative effort between christina-mifsud and munozirianni1988
 
 const App = () => {
   return (
     <div className="App">
-      <header className="App-header">CYF Hotel</header>
-      <Bookings />
+      <>
+        <Header />
+        <Bookings />
+        <Restaurant />
+        <TouristInfoCards />
+        <Footer />
+      </>
     </div>
   );
 };

src/Bookings.js

@@ -1,18 +1,38 @@
-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 FakeBookings from "./data/fakeBookings.json";
 
 const Bookings = () => {
-  const search = searchVal => {
-    console.info("TO DO!", searchVal);
+  const [bookings, setBookings] = useState([]);
+  const [filterBookings, setFilterBookings] = useState([]); // second state in order to protect OG array
+
+  useEffect(() => {
+    console.log("some text, some more text");
+    fetch("https://cyf-react.glitch.me")
+      .then((response) => response.json())
+      .then((data) => {
+        setBookings(data);
+        setFilterBookings(data);
+      })
+      .catch((error) => console.error(error));
+  }, []);
+
+  const search = (searchVal) => {
+    let searchResult = bookings.filter((booking) => {
+      return (
+        booking.firstName.toLowerCase().includes(searchVal) ||
+        booking.surname.toLowerCase().includes(searchVal)
+      );
+    });
+    setFilterBookings(searchResult);
   };
 
   return (
     <div className="App-content">
       <div className="container">
         <Search search={search} />
-        {/* <SearchResults results={FakeBookings} /> */}
+        <SearchResults bookingsArray={filterBookings} />
       </div>
     </div>
   );

src/Footer.js

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

src/Header.js

@@ -0,0 +1,15 @@
+import React from "react";
+
+function Header() {
+  return (
+    <>
+      <header className="App-header">CYF Hotel</header>
+      <img
+        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAACOElEQVR4nO2Yz0tVQRTHPyllZroQlGjlJvofXLbKwMCFWgshly3d6a42aUG5a9m+VrkrBRUfQgrlwlWh6EYRMYNCUBFvDJwX0zjvNjP3zauX84EDl/vOjzkz33vnvoFELs+Ap9Qhd4EJ4IfYONBLHTEFZIa9pY4k0gysa4Nfl3uu8f+ERLaBHbEtS7yKKcdP1FpiLhLpAa4CrXLtGx8VV4nEiveikk7zJOKCHr/tUbdqOs+TSAswAmzK7KrrK4aPimmVHLc96joTotM2YAzYtcSqe6PiU+26VpQm1xx12g48AvYtxU3bF18VE/35+JNOm4AnwHfLQDeAh2Iblt9VjJJHZ4Tn64zOTZ2WGbcM7DPwALio+anrYeCLxf8AmASue9QNpk2SlnmsDWQVuA805sQ3is+qpZFD4CXQRQRuAK+AY+AbcFPuX5LZVrN0wSNfA9AHfLQ0ciy1VM3CXJb38YlRRA26WtwBFi2NnMg+oJ6zINSMvrEkfufwKgzhFjBrqffac3V/cc9INA10E59u4L1RezAk0byW4Dm154VWfy4kwVctQQe1p1OrvxeSQF/Cv0VWZAyVgm1vjFIknyxGA5W+cWL7eJMaIK0AUSRUsszuQiSfLEYDtSRLDZBWoBBZ2olJOzHpU4L0LfQ7aSf2IDvXO/GRFlzpIDYm7capnTfLOf+aQm0FuKbVGHA80V4KPTE7jdDEkFZjxsH/tMgBb490r8upiH0yVqA/ZwVUzQ/VPp1OJP43fgLjrG5cINjubQAAAABJRU5ErkJggg=="
+        alt="Hotel Logo"
+      ></img>
+    </>
+  );
+}
+
+export default Header;

src/Order.js

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

src/Restaurant.js

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

src/RestaurantButton.js

@@ -0,0 +1,13 @@
+import React, { useState } from "react";
+
+function RestaurantButton({ setOrders }) {
+  return (
+    <>
+      <button className="btn btn-primary" onClick={setOrders}>
+        Adddddddddd
+      </button>
+    </>
+  );
+}
+
+export default RestaurantButton;

src/Search.js

@@ -1,23 +1,38 @@
-import React from "react";
+import React, { useState } from "react";
+import SearchButton from "./SearchButton";
+
+const Search = (props) => {
+  const [searchInput, setSearchInput] = useState("");
+
+  function handleSearchInput(event) {
+    setSearchInput(event.target.value);
+  }
 
-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={(event) => {
+              event.preventDefault();
+              props.search(searchInput);
+            }}
+            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>

src/SearchButton.js

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

src/SearchResultRow.js

@@ -0,0 +1,32 @@
+import React, { useState } from "react";
+import moment from "moment";
+
+function SearchResultRow({ booking }) {
+  const [isRowSelected, SetIsRowSelected] = useState();
+
+  const handleClick = (rowId) => {
+    SetIsRowSelected(!isRowSelected);
+  };
+
+  let rowStyle = {};
+
+  if (isRowSelected) {
+    rowStyle = { backgroundColor: "green" };
+  }
+
+  return (
+    <tr onClick={handleClick} style={rowStyle} key={booking.id}>
+      <td>{booking.id}</td>
+      <td>{booking.title}</td>
+      <td>{booking.firstName}</td>
+      <td>{booking.surname}</td>
+      <td>{booking.email}</td>
+      <td>{booking.roomId}</td>
+      <td>{booking.checkInDate}</td>
+      <td>{booking.checkOutDate}</td>
+      <td>{moment(booking.checkOutDate).diff(booking.checkInDate, "days")} </td>
+    </tr>
+  );
+}
+
+export default SearchResultRow;

src/SearchResults.js

@@ -0,0 +1,31 @@
+import React, { useState } from "react";
+import SearchResultRow from "./SearchResultRow";
+
+function SearchResults({ bookingsArray }) {
+  return (
+    <>
+      <table className="table">
+        <thead>
+          <tr>
+            <th scope="col">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">Room ID</th>
+            <th scope="col">Check-In Date</th>
+            <th scope="col">Check-Out Date</th>
+            <th scope="col">Nights</th>
+          </tr>
+        </thead>
+        <tbody>
+          {bookingsArray.map((booking) => (
+            <SearchResultRow booking={booking} key={booking.id} />
+          ))}
+        </tbody>
+      </table>
+    </>
+  );
+}
+
+export default SearchResults;

src/TouristInfoCards.js

@@ -0,0 +1,73 @@
+import React from "react";
+
+function TouristInfoCards() {
+  return (
+    <>
+      <div className="card-container">
+        <div className="card">
+          <img
+            src="https://a.cdn-hotels.com/gdcs/production95/d16/cc514640-8f0f-11e8-9bad-0242ac110002.jpg"
+            className="card-img-top"
+            alt="Glasgow View"
+          />
+          <div className="card-body">
+            <h1>Glasgow</h1>
+            <p>
+              As Scotland’s largest city, Glasgow is famed for its culture,
+              shopping and people. Spend your day exploring a wide range of
+              fascinating free museums and galleries, and taking advantage of
+              tips from friendly local people on the city’s hidden gems — then
+              choose from 130+ weekly musical events for a special night out.
+            </p>
+            <a href="www.peoplemakeglasgow.com" className="btn btn-primary">
+              More Information
+            </a>
+          </div>
+        </div>
+        <div className="card">
+          <img
+            src="https://cdn.britannica.com/42/116342-050-5AC41785/Manchester-Eng.jpg"
+            className="card-img-top"
+            alt="Manchester View"
+          />
+          <div className="card-body">
+            <h1>Manchester</h1>
+            <p>
+              Famed for its soccer team and music scene, which has produced the
+              likes of The Smiths and Oasis, this centre for sports and the arts
+              is a down-to-earth and friendly city. The so-called Capital of the
+              North has overcome industrial decline and bombing to become a
+              confident and cosmopolitan city of over two million people.
+            </p>
+            <a href="www.visitmanchester.com" className="btn btn-primary">
+              More Information
+            </a>
+          </div>
+        </div>
+        <div className="card">
+          <img
+            src="https://s27363.pcdn.co/wp-content/uploads/2020/05/Best-Things-to-do-in-London-1200x900.jpg.optimal.jpg
+          "
+            className="card-img-top"
+            alt="London View"
+          />
+          <div className="card-body">
+            <h1>London</h1>
+            <p>
+              London is layered with history, where medieval and Victorian
+              complement a rich and vibrant modern world. The Tower of London
+              and Westminster neighbour local pubs and markets, and time-worn
+              rituals like the changing of the guards take place as commuters
+              rush to catch the Tube.
+            </p>
+            <a href="www.visitlondon.com" className="btn btn-primary">
+              More Information
+            </a>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default TouristInfoCards;