London10-Olha_Danylevska-React_Module-CYF_hotel_react

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,5 +1,6 @@
 .App {
   text-align: left;
+  background-color: #c7c7c7;
 }
 
 .App-logo {
@@ -18,6 +19,19 @@
   font-weight: bold;
 }
 
+
+
+.AllCards {
+  display: flex;
+  justify-content: center;
+  gap: 2rem;
+  margin-top: 2rem;
+}
+
+.card-img-top {
+  padding: 0.3rem;
+}
+
 .App-title {
   font-size: 1.5em;
 }
@@ -31,16 +45,22 @@
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }
 }
+
 .search {
   padding: 5px 0 20px 0;
 }
 
 tr {
-  color: #5b5757;
+  color: #ffffff;
+}
+
+.title-table {
+  color: #222;
 }
 
 .results {
@@ -52,6 +72,25 @@ tr {
   text-align: center;
 }
 
+.footer li {
+  list-style: none;
+}
+
 .card {
   width: 18rem;
+  border: #b7b7b7 solid 0.08rem;
 }
+
+.btn-primary {
+  background-color: #222;
+  border: none;
+}
+
+.btn-primary:hover {
+  background-color: #607042;
+  color: #ffffff;
+}
+
+h2 {
+  color: #a1a1a1;
+}

src/App.js

@@ -1,15 +1,71 @@
 import React from "react";
-
+import Search from "./Search.js";
+import Restaurant from "./Restaurant.js"
 import Bookings from "./Bookings";
 import "./App.css";
 
+const Heading = () => {
+  return (
+    <div>
+      <header className="App-header">CYF Hotel</header>
+    </div>
+  )
+}
+
+const Footer = (props) => {
+  let data = props.address
+  return (
+    <div className="footer">
+      <ul>
+        {
+          data.map(line => {
+            return <li>{line}</li>
+          })
+        }
+      </ul>
+    </div>
+  )
+
+
+}
+
+const TouristInfoCards = (props) => {
+  return (
+    <div className="card">
+      <img src={props.src} className="card-img-top" />
+      <div className="card-body">
+        <h2>{props.name}</h2>
+        <p>{props.description}</p>
+        <a href={props.link} className="btn btn-primary">Go somewhere</a>
+      </div>
+    </div>
+  )
+}
+
 const App = () => {
   return (
     <div className="App">
-      <header className="App-header">CYF Hotel</header>
+      <Heading />
+      <div className="AllCards">
+
+        <TouristInfoCards name="Manchester" src="https://cdn.britannica.com/42/116342-050-5AC41785/Manchester-Eng.jpg"
+          link="https://www.visitmanchester.com/" description="Manchester is the only UK city to feature in Lonely Planet's Best in Travel 2023 list and the only 
+        UK city in National Geographic's influential ‘Best of the World’ list which annually sets out 25 of the must-see places to visit around the globe." />
+
+        <TouristInfoCards name="London" src="https://images.musement.com/cover/0002/49/london-jpeg_header-148518.jpeg"
+          link="https://www.visitlondon.com/" description="Welcome to London! Discover the best of London with Visit London, the official guide to England’s 
+          exciting capital. Find things to do in London, from iconic sightseeing spots and fun-filled days out to top restaurants, theatre and unmissable London events. If you’re not able to visit just yet, plan ahead to make the most of your next visit." />
+
+        <TouristInfoCards name={"Glasgow"} src="https://www.visitscotland.com/blog/wp-content/uploads/2021/10/Park_Circus_and_Kelvingrove_Park.jpg.jpg"
+          link="https://peoplemakeglasgow.com/" description="You’re guaranteed to find accommodation in Glasgow which suits your taste and budget. Whether you’re looking for something uniquely Glaswegian, a trendy hotel, a vibrant hostel or 
+          a comfortable city centre apartment, you can be assured of a warm welcome." />
+
+      </div>
       <Bookings />
+      <Restaurant />
+      <Footer address={["123 Fake Street, London, E1 4UD", "[email protected]", "0123 456789"]} />
     </div>
   );
 };
 
-export default App;
+export default App;

src/Bookings.js

@@ -1,21 +1,47 @@
-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([])
+
+  function doingFetch() {
+    fetch("https://cyf-react.glitch.me")
+      .then((response) => {
+        if (!response.ok) {
+          throw new Error(response.status)
+        } else {
+          return response.json()
+        }
+
+      })
+      .then((data) => {
+        console.log("data----->", data)
+        if (data) setBookings(data)
+      })
+  }
+  useEffect(() => {
+    doingFetch()
+  }, []);
+
 
   return (
     <div className="App-content">
       <div className="container">
         <Search search={search} />
-        {/* <SearchResults results={FakeBookings} /> */}
+        <SearchResults results={bookings} />
       </div>
     </div>
   );
 };
 
-export default Bookings;
+
+
+
+export default Bookings;

src/Restaurant.js

@@ -1,14 +1,28 @@
-import React from "react";
+
+import React, { useState } from "react";
+
+
+const Order = (props) => {
+  const [orders, setOrders] = useState(0)
+  const orderOne = () => {
+    setOrders(orders + 1)
+  }
+  return (
+    <li>
+      {props.orderType}: {orders} <button className="btn btn-primary" onClick={orderOne}>Add</button>
+    </li>
+  )
+}
 
 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/SearchResults.js

@@ -0,0 +1,56 @@
+import moment from "moment"
+import React, { useState } from "react"
+
+
+const SearchResults = (props) => {
+    let allData = props.results
+    return (
+        <table class="table table-striped">
+
+            <thead>
+
+                <tr className="title-table">
+                    <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>
+                {
+
+                    allData.map(client => {
+                        let a = moment(client.checkOutDate)
+                        let b = moment(client.checkInDate)
+                        const [active, setActive] = useState(false)
+                        const handleClick = () => {
+                            setActive(!active)
+                        }
+                        return (
+                            <tr onClick={handleClick} style={{ backgroundColor: active ? "#607042" : "#797979" }}>
+                                <th scope="row">{client.id}</th>
+                                <td>{client.title}</td>
+                                <td>{client.firstName}</td>
+                                <td>{client.surname}</td>
+                                <td>{client.email}</td>
+                                <td>{client.roomId}</td>
+                                <td>{client.checkInDate}</td>
+                                <td>{client.checkOutDate}</td>
+                                <td>{a.diff(b, 'days')}</td>
+                            </tr>
+                        )
+                    })
+                }
+            </tbody>
+        </table>
+    )
+}
+
+export default SearchResults;
+
+