London-10-Onur-Atas-cyf-hotel-project-lesson-1

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.js

@@ -1,13 +1,26 @@
 import React from "react";
-
+import Heading from "./Heading";
+import TouristInfoCards from "./TouristInfoCards";
 import Bookings from "./Bookings";
+import Footer from "./Footer";
+import Restaurant from "./Restaurant"
 import "./App.css";
 
 const App = () => {
+  const addressData = [
+    "123 Fake Street, London, E1 4UD",
+    "[email protected]",
+    "0123 456789"
+  ];
   return (
     <div className="App">
-      <header className="App-header">CYF Hotel</header>
+      <Heading />
       <Bookings />
+      <Restaurant />
+      <TouristInfoCards />
+      <Footer addressData={addressData} />
+
+
     </div>
   );
 };

src/BookingRow.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+const BookingRow = ({ booking, onClick, isSelected }) => {
+  const calculateNumberOfNights = () => {
+    const oneDay = 24 * 60 * 60 * 1000; 
+    const checkInDate = new Date(booking.checkInDate);
+    const checkOutDate = new Date(booking.checkOutDate);
+    const nightCount = Math.round(Math.abs((checkOutDate - checkInDate) / oneDay));
+    return nightCount;
+  };
+
+  return (
+    <tr onClick={onClick} style={{ backgroundColor: isSelected ? "yellow" : "transparent" }}>
+      <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>{calculateNumberOfNights()}</td>
+    </tr>
+  );
+};
+
+export default BookingRow;

src/Bookings.js

@@ -1,18 +1,40 @@
-import React from "react";
-import Search from "./Search.js";
-// import SearchResults from "./SearchResults.js";
-// import FakeBookings from "./data/fakeBookings.json";
+import React, { useState,  useEffect } from 'react';
+import Search from "./Search";
+import SearchResults from "./SearchResults";
+
 
 const Bookings = () => {
+  const [bookings, setBookings] = useState([]);
+  const [filteredBookings, setFilteredBookings] = useState([]);
+
   const search = searchVal => {
-    console.info("TO DO!", searchVal);
+    const filtered = bookings.filter((booking) => {
+      const { firstName, surname } = booking;
+      return (
+        firstName.toLowerCase().includes(searchVal.toLowerCase()) ||
+        surname.toLowerCase().includes(searchVal.toLowerCase())
+      );
+    });
+
+    setFilteredBookings(filtered);
   };
 
+ useEffect(() => {
+    fetch("https://cyf-react.glitch.me")
+      .then(response => response.json())
+      .then(data => {
+        setBookings(data);
+      })
+      .catch(error => {
+        console.error("Error fetching data:", error);
+      });
+  }, []);
+
   return (
     <div className="App-content">
       <div className="container">
         <Search search={search} />
-        {/* <SearchResults results={FakeBookings} /> */}
+        <SearchResults bookings={bookings} />
       </div>
     </div>
   );

src/Footer.jsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+
+const Footer = (props) => {
+    const addressItems = props.addressData.map((item, index) => (
+        <li key={index}>{item}</li>
+    ));
+
+    return (
+        <footer>
+            <ul>
+                {addressItems}
+            </ul>
+        </footer>
+    );
+}
+
+export default Footer;

src/Heading.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+
+const Heading = () => {
+    return (
+        <div>
+            <header className="App-header">CYF Hotel</header>
+            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQboS0lYHhUiNejdf3DoE_krw3tnJILqSDvgw&usqp=CAU" />
+        </div>);
+}
+export default Heading; 

src/Order.js

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

src/Restaurant.js

@@ -1,14 +1,14 @@
 import React from "react";
+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.jsx

@@ -0,0 +1,10 @@
+import React from "react"
+
+const RestaurantButton = ({ orderOne }) => (
+
+    <button className="btn btn-primary" onClick={orderOne}>
+        Add
+    </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 = ({ search }) => {
+  const [searchInput, setSearchInput] = useState("");
+
+  const handleSearchInput = (event) => {
+    const inputValue = event.target.value;
+    setSearchInput(inputValue);
+  };
+
+  const handleSubmit = (event) => {
+    event.preventDefault();
+    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 />
             </div>
           </form>
         </div>

src/SearchButton.jsx

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

src/SearchResults.jsx

@@ -0,0 +1,47 @@
+import React, { useState } from "react";
+import BookingRow from "./BookingRow";
+
+const SearchResults = ({ bookings }) => {
+  const [selectedRow, setSelectedRow] = useState(null);
+
+  const handleRowClick = (index) => {
+    if (selectedRow === index) {
+      setSelectedRow(null);
+    } else {
+      setSelectedRow(index);
+    }
+  };
+
+  return (
+    <div>
+      <h2>Search Results</h2>
+      <table>
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>Title</th>
+            <th>First Name</th>
+            <th>Surname</th>
+            <th>Email</th>
+            <th>Room ID</th>
+            <th>Check-in Date</th>
+            <th>Check-out Date</th>
+            <th>Nights</th>
+          </tr>
+        </thead>
+        <tbody>
+          {bookings.map((booking, index) => (
+            <BookingRow
+              key={booking.id}
+              booking={booking}
+              onClick={() => handleRowClick(index)}
+              isSelected={selectedRow === index}
+            />
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default SearchResults;

src/TouristInfoCards.js

@@ -0,0 +1,49 @@
+import React from "react";
+
+const TouristInfoCards = () => {
+    return (
+        <div className="card-container">
+            <div className="card">
+                <img src="https://static.ffx.io/images/$zoom_0.148%2C$multiply_4%2C$ratio_1.5%2C$width_756%2C$x_0%2C$y_1/t_crop_custom/c_scale%2Cw_1100%2Cq_88%2Cf_auto/720d141fdf9bedad865921b083210fe3c71b6944" alt="Glasgow" />
+                <div className="card-text">
+                    <h3>Glasgow</h3>
+                    <p>
+                        Glasgow is a vibrant city in Scotland known for its rich cultural heritage and friendly atmosphere.
+                        It offers a blend of stunning architecture, art galleries, and a lively music scene.
+                        <br />
+                        <a href="https://peoplemakeglasgow.com">Visit Glasgow</a>
+                    </p>
+                    <button>More Information</button>
+                </div>
+            </div>
+            <div className="card">
+                <img src="https://cdn.citybaseapartments.com/blog/cba-media/2016-10/shutterstock_1072210547.jpg" alt="Manchester" />
+                <div className="card-text">
+                    <h3>Manchester</h3>
+                    <p>
+                        Manchester is a city in England known for its industrial history, vibrant arts scene, and football culture.
+                        It offers a mix of museums, galleries, and entertainment options.
+                        <br />
+                        <a href="https://visitmanchester.com">Visit Manchester</a>
+                    </p>
+                    <button>More Information</button>
+                </div>
+            </div>
+            <div className="card">
+                <img src="https://www.citysparespace.com/wp-content/uploads/2023/02/london.jpeg" alt="London" />
+                <div className="card-text">
+                    <h3>London</h3>
+                    <p>
+                        London, the capital of England, is a global city known for its history, culture, and iconic landmarks.
+                        It offers world-class museums, theaters, shopping, and diverse culinary experiences.
+                        <br />
+                        <a href="https://visitlondon.com">Visit London</a>
+                    </p>
+                    <button>More Information</button>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default TouristInfoCards;