London 10 - Paulina Wywrot - React - Week 1, 2, 3

README.md

@@ -216,13 +216,13 @@ A hotel booking application in React. Homework for the [CodeYourFuture React mod
 
 **Test:** Each column in the table should be clickable to sort results in ascending or descending order.
 
-#### 26. Validate new booking 
+#### 26. Validate new booking
 
 **Instructions:** Add validation to some fields from exercise 24: the first name and last name must not be empty, the email must contain exactly 1 `@` symbol, and at least one `.` symbol after the `@`; the room ID must be a number between 0 and 100. If the fields do not contain correct information when the 'Submit' button is pressed, display a red error message at the top of the page, but do not clear the text already in the field.
 
 **Test:** An invalid input displays an error message after the 'Submit' button is pressed (e.g. an email like `react@com` is invalid). A valid input shows the correct values at the bottom of the page.
 
-**Reflection:** Validating user input is an important part of any application. Without checking the input, you might see unexpected errors when working with the data later. 
+**Reflection:** Validating user input is an important part of any application. Without checking the input, you might see unexpected errors when working with the data later.
 
 What do you think would happen if you were asked to remove a booking for room number '81', but the user had typed 'eightyOne' or 'EIGHTY ONE'?
 
@@ -234,27 +234,29 @@ What do you think would happen if you were asked to remove a booking for room nu
 
 **Test:** The 'Submit' button is initially not clickable, and becomes clickable once every field has the correct input.
 
-**Reflection:** You have used native form validations in HTML. How have you improved this feature with React? 
+**Reflection:** You have used native form validations in HTML. How have you improved this feature with React?
 
 As a user of this booking system, would you prefer:
+
 - To find out you made a mistake when you submit the whole form?
 - To find out you made a mistake after each input?
 
 #### 28. Date picker
 
-**Instructions:** Add the [js-datepicker](https://www.npmjs.com/package/js-datepicker) package to your project using `npm install`, and import it at the top of the file. Add different IDs to your 'check in date' and 'check out date' `<input>` elements, then create two date pickers using `const checkInPicker = datepicker(YOUR_ID)` (where `YOUR_ID` is the ID you assigned to your check in/check out date elements). 
+**Instructions:** Add the [js-datepicker](https://www.npmjs.com/package/js-datepicker) package to your project using `npm install`, and import it at the top of the file. Add different IDs to your 'check in date' and 'check out date' `<input>` elements, then create two date pickers using `const checkInPicker = datepicker(YOUR_ID)` (where `YOUR_ID` is the ID you assigned to your check in/check out date elements).
 
 **Hint:** Read the [js-datepicker usage guide](https://www.npmjs.com/package/js-datepicker#basic-usage)
 
 **Test:** The date picker appears when you click on the 'check in date' and 'check out date' input elements.
 
-**Reflection:** Using `js-datepicker` in this exercise allows you to practice installing and working with packages in JavaScript. 
+**Reflection:** Using `js-datepicker` in this exercise allows you to practice installing and working with packages in JavaScript.
 
 Packages contain new functions and properties to work with that may not be available in native JavaScript/HTML. Using packages can often save time instead of writing your own functions, as you are importing code that someone else has written. However, this can have downsides; not all packages are high quality, and some may have bugs or may reduce accessibility by recreating native elements (`js-datepicker` recreates HTML's native [datepicker](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date) element).
 
 Think about some of the code you have written in this lesson - are there any packages available that might have helped you to complete the exercises?
 
 For example, exercise 26 and 27 used validation. Searching npmjs.com for '[validate](https://www.npmjs.com/search?q=validate)' shows multiple packages, such as '[validator](https://www.npmjs.com/package/validator)' and '[Validate](https://www.npmjs.com/package/Validate)'. Open both of these packages in your browser, and consider the following questions:
+
 - Is it clear what this package does? Will it solve my specific problem better than writing my own code?
 - Do I trust that the code in this package is safe to run on my machine? Do other people trust this package? (Hint: look at weekly downloads, last update, dependents, and visit the repository)
 - Is this package accessible? Will it work on all browsers?

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

@@ -9,13 +9,27 @@
 
 .App-header {
   background-color: #222;
-  height: 50px;
+  height: 100px;
   padding: 20px;
   color: white;
   text-align: left;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 1em;
   font-weight: bold;
+  display:flex;
+  align-items: center;
+  gap: 0.5rem;
+
+}
+.hotel-title {
+  text-align: center;
+  font-size: 1.5rem;
+  margin-top: 20px;
+}
+
+.hotel-logo {
+  width: 40px;
+  height: 40px;
 }
 
 .App-title {
@@ -55,3 +69,21 @@ tr {
 .card {
   width: 18rem;
 }
+
+.cards {
+  display: flex;
+  justify-content: center;
+  gap: 2rem;
+  margin-top: 1rem;
+}
+/* 
+.selectRow {
+  background: red;
+} */
+.profile-flex {
+  display:flex;
+  justify-content: space-around;
+}
+.profile-title {
+ text-align: center;
+}

src/App.js

@@ -1,13 +1,26 @@
 import React from "react";
+import Heading from "./Heading";
+import TouristInfoCards from "./TouristInfoCards";
+import Footer from "./Footer";
+import Restaurant from "./Restaurant";
 
 import Bookings from "./Bookings";
 import "./App.css";
 
 const App = () => {
   return (
     <div className="App">
-      <header className="App-header">CYF Hotel</header>
+      <Heading />
+      <TouristInfoCards />
       <Bookings />
+      <Restaurant />
+      <Footer
+        details={[
+          "123 Fake Street, London, E1 4UD",
+          "hello@fakehotel.com",
+          "0123 456789",
+        ]}
+      />
     </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 FakeBookings from "./data/fakeBookings.json";
 
 const Bookings = () => {
-  const search = searchVal => {
-    console.info("TO DO!", searchVal);
+  const [bookings, setBookings] = useState([]);
+  const [isPending, setIsPending] = useState(false);
+  const [error, setError] = useState(null);
+  const search = (searchVal) => {
+    const filteredBooking = bookings.filter(
+      (booking) =>
+        booking.firstName === searchVal || booking.surname === searchVal
+    );
+    setBookings(filteredBooking);
+
+    // setBookings(filteredBooking);
+    // console.info("TO DO!", searchVal);
   };
+  useEffect(() => {
+    fetch(`https://cyf-react.glitch.me/`)
+      .then((res) => {
+        if (!res.ok) {
+          throw Error(
+            `Could not fetch the data for that resource. Error status: ${res.status}`
+          );
+        }
+        return res.json();
+      })
 
+      .then((data) => {
+        console.log(data);
+        setBookings(data);
+        setIsPending(true);
+        setError(null);
+      })
+      .catch((err) => {
+        setIsPending(false);
+        setError(err.message);
+      });
+  }, []);
   return (
     <div className="App-content">
       <div className="container">
         <Search search={search} />
-        {/* <SearchResults results={FakeBookings} /> */}
+        {error ? (
+          <div>{error}</div>
+        ) : isPending ? (
+          <SearchResults results={bookings} />
+        ) : (
+          <h1 className="loading-data-message">
+            Please wait, the data is loading...
+          </h1>
+        )}
       </div>
     </div>
   );

src/CustomerProfile.js

@@ -0,0 +1,25 @@
+import { useState, useEffect } from "react";
+
+const CustomerProfile = (props) => {
+  const [customerProfile, setCustomerProfile] = useState("");
+
+  useEffect(() => {
+    fetch(`https://cyf-react.glitch.me/customers/${props.id}`)
+      .then((res) => res.json())
+      .then((data) => {
+        console.log(data);
+        setCustomerProfile(data);
+      });
+  }, [props.id]);
+  return (
+    <div>
+      <p className="profile-title">Customer {customerProfile.id} Profile</p>
+      <div className="profile-flex">
+        <p>E-mail: {customerProfile.email}</p>
+        <p>Telephone number: {customerProfile.phoneNumber}</p>
+        <p>{customerProfile.vip ? "VIP" : null}</p>
+      </div>
+    </div>
+  );
+};
+export default CustomerProfile;

src/Footer.js

@@ -0,0 +1,16 @@
+import React from "react";
+
+const Footer = (props) => {
+  return (
+    <div>
+      <h4 className="footer-title">Address and Contact Details</h4>
+      <ul className="footer-details">
+        {props.details.map((info, index) => (
+          <li key={index}>{info}</li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default Footer;

src/Heading.js

@@ -0,0 +1,12 @@
+import React from "react";
+
+const Heading = () => {
+  return (
+    <header className="App-header">
+      <h1 className="hotel-title">CYF Hotel</h1>
+      <img src="/images/hotel.png" className="hotel-logo" alt="hotel-logo" />
+    </header>
+  );
+};
+
+export default Heading;

src/Order.js

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

src/Restaurant.js

@@ -1,14 +1,15 @@
 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.js

@@ -0,0 +1,9 @@
+const RestaurantButton = (props) => {
+  return (
+    <button onClick={props.orderOne} className="btn btn-primary">
+      Add
+    </button>
+  );
+};
+
+export default RestaurantButton;

src/Search.js

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

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