London class 10-Junita Lama-react module-cyf hotel-week 1/2/3

README.md

@@ -127,7 +127,7 @@ A hotel booking application in React. Homework for the [CodeYourFuture React mod
 #### 15. Highlight booking row when clicked
 
 **Instructions:** Within the `<SearchResults />` component or its child components, add an `onClick` handler to each row in the table (hint: on the `<tr>` element). When clicked, the row is "selected" and highlighted with a different colour. When clicked again, the row is unselected and the coloured highlighting is removed.
-
+. 
 **Hint:** Use a new state variable for each row to record if the row is selected or not, and use this value to set a class to the `className` prop of the row.
 
 **Test:** Verify that each row of your table can be highlighted (on and off) independently when being clicked.
@@ -178,7 +178,7 @@ A hotel booking application in React. Homework for the [CodeYourFuture React mod
 
 #### 21. Display a customer profile - step 2
 
-**Instructions:** When a "Show profile" button is clicked in the table, fetch the corresponding customer profile from `https://cyf-react.glitch.me/customers/<ID>` in the `<CustomerProfile />` component. A customer profile should show the customer ID, their email, if they are VIP and their phone number in a list.
+**Instructions:** When a "Show profile" button is clicked in the table, fetch the corresponding customer profile from ` in the `<CustomerProfile />``https://cyf-react.glitch.me/customers/<ID> component. A customer profile should show the customer ID, their email, if they are VIP and their phone number in a list.
 
 **Hint:** You need to use `useEffect` and the correct dependency array. You'll need to fetch customers data from the API every time a "Show profile" button is clicked and render it accordingly.
 

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

@@ -1,40 +1,19 @@
-.App {
-  text-align: left;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+body {
+  background-color: aliceblue;
 }
-
 .App-header {
-  background-color: #222;
-  height: 50px;
-  padding: 20px;
+  background-color: black;
+  height: 60px;
   color: white;
   text-align: left;
   font-family: Arial, Helvetica, sans-serif;
-  font-size: 1em;
-  font-weight: bold;
+  margin-bottom: 2rem;
 }
 
 .App-title {
-  font-size: 1.5em;
+  font-size: 10px;
 }
 
-.App-content {
-  padding-top: 20px;
-  font-size: large;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
 .search {
   padding: 5px 0 20px 0;
 }
@@ -53,5 +32,112 @@ tr {
 }
 
 .card {
+  display: flex;
+  flex-direction: row;
+  row-gap: 50px;
+  justify-content: space-around;
+  background-color: aliceblue;
+}
+
+.logo {
+  height: 70px;
+  width: 100px;
+}
+
+header {
+  display: flex;
+  flex-direction: row;
+}
+
+h2 {
+  font-weight: bold;
+  font-size: 30px;
+  text-align: flex-start;
+  color: plum;
+}
+.card-img-top {
+  height: 25rem;
+  width: 28rem;
+}
+
+.card-title {
+  color: white;
+  background-color: black;
+  font-size: 1rem;
+}
+
+.card-text {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  font-size: 1rem;
+  background-color: beige;
+}
+.card-body {
   width: 18rem;
 }
+
+.btn-primary {
+  background-color: brown;
+}
+
+.welcome {
+  display: flex;
+  flex-direction: column;
+  font-size: 2rem;
+}
+
+.welcome-img {
+  display: flex;
+  max-width: auto;
+  height: 25rem;
+  border: 2px solid brown;
+  margin: 0rem 4rem 1rem 4rem;
+}
+
+.order {
+  display: flex;
+  flex-direction: row;
+  gap: 5rem;
+}
+
+.welcome-text {
+  text-align: center;
+  color: blueviolet;
+}
+
+.table {
+  background-color: black;
+}
+
+th {
+  color: brown;
+}
+
+td {
+  color: beige;
+}
+.selected {
+  background-color: green;
+}
+
+.profile {
+  background-color: burlywood;
+}
+
+.customer {
+ border: 1px solid gray;
+ margin-bottom: 30px;
+}
+@media only screen and (max-width: 600px) {
+  .card {
+    flex-direction: column;
+  }
+  .welcome-img {
+    margin: 0;
+  }
+  .table {
+    width: 40%;
+    font-size: 10px;
+  }
+}

src/App.js

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

src/Bookings.js

@@ -1,18 +1,41 @@
-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";
 
 const Bookings = () => {
-  const search = searchVal => {
-    console.info("TO DO!", searchVal);
+  const [bookings, setBookings] = useState([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch(`https://cyf-react.glitch.me/`)
+      .then((response) => {
+        if (!response.ok) {
+          throw Error("Something went wrong");
+        }
+        return response.json();
+      })
+      .then((data) => {
+        console.log(data);
+        setBookings(data);
+        setLoading(false);
+      });
+  }, []);
+
+  const search = (searchVal) => {
+    const filteredBookings = bookings.filter(
+      (booking) =>
+        booking.firstName.toLowerCase().includes(searchVal.toLowerCase()) ||
+        booking.surname.toLowerCase().includes(searchVal.toLowerCase())
+    );
+    setBookings(filteredBookings);
   };
 
   return (
     <div className="App-content">
       <div className="container">
         <Search search={search} />
-        {/* <SearchResults results={FakeBookings} /> */}
+        <div>{loading ? <p>Loading...</p> : null}</div>
+        <SearchResults results={bookings} />
       </div>
     </div>
   );

src/CustomerProfile.js

@@ -0,0 +1,17 @@
+import React from "react";
+
+const CustomerProfile = (props) => {
+  return (
+    <div>
+      <ul className="customer">
+        {props.id && <li>Customer_ID : {props.id}</li>}
+        {props.firstName && <li>Name : {props.firstName}</li>}
+        {props.surname && <li>surname : {props.surname}</li>}
+        {props.vip && <li>email : {props.email}</li>}
+        {props.phoneNumber && <li>phone number : {props.phoneNumber}</li>}
+      </ul>
+    </div>
+  );
+};
+
+export default CustomerProfile;

src/Footer.js

@@ -0,0 +1,17 @@
+import react from "react";
+
+const Footer = ({ props }) => {
+  return (
+    <div>
+      <footer>
+        <ul>
+          {props.map((prop) => {
+            return <li key={prop}>{prop}</li>;
+          })}
+        </ul>
+      </footer>
+    </div>
+  );
+};
+
+export default Footer;

src/Heading.js

@@ -0,0 +1,10 @@
+import React from "react";
+const Heading = () => {
+    const name = "CYF HOTEL"
+    return <header className="App-header">
+    <div><img src ="https://freesvg.org/img/1548468101.png" className = "logo"alt = "hotel-logo"></img></div>
+    <div><h2>{name}</h2></div>
+</header>
+}
+
+export default Heading;

src/Order.js

@@ -0,0 +1,17 @@
+import React, { useState } from "react";
+import Button from "./RestaurentButton";
+
+const Order = ({ orderType }) => {
+  const [order, setOrder] = useState(0);
+  function orderOne() {
+    setOrder(order + 1);
+  }
+  return (
+    <li>
+      {orderType}: {order}
+      <Button 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>
+      <ul className="order">
+        <Order orderType="Pizzas" />
+        <Order orderType="Salads" />
+        <Order orderType="Chocolate cake" />
       </ul>
     </div>
   );

src/RestaurentButton.js

@@ -0,0 +1,11 @@
+import React from "react";
+
+const Button = ({ orderOne }) => {
+  return (
+    <button onClick={orderOne} className="btn btn-primary">
+      Add
+    </button>
+  );
+};
+
+export default Button;