London10 | Adrian Ilovan | 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

@@ -4,9 +4,10 @@
 
 .App-logo {
   animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+  height: 60px;
 }
 
+
 .App-header {
   background-color: #222;
   height: 50px;
@@ -48,10 +49,42 @@ tr {
 }
 
 .footer {
-  padding-top: 20px;
+  padding-top: 10px;
   text-align: center;
 }
 
+.card-img {
+  width: 100%;
+  height: auto;
+  flex-grow: 1;
+}
+
+.card-container {
+  display: flex;
+  justify-content: space-around;
+  margin-top: 50px;
+}
+
 .card {
   width: 18rem;
 }
+
+/* .footer {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  padding: 10px;
+  text-align: center;
+  background-color: #222;
+}
+
+.footer, h1 {
+  color:white;
+} */
+
+.selected-row {
+  background-color: yellow;
+  color: black;
+  font-weight: bold;
+}

src/App.js

@@ -1,13 +1,21 @@
 import React from "react";
-
 import Bookings from "./Bookings";
 import "./App.css";
+import Heading from "./Heading";
+import TouristInfoCards from "./TouristInfoCards"
+import Footer from "./Footer";
+import SearchResults from "./SearchResults";
+import FakeBookings from "./data/fakeBookings.json"
+import Restaurant from './Restaurant'
 
 const App = () => {
   return (
     <div className="App">
-      <header className="App-header">CYF Hotel</header>
+      <Heading />
+      <TouristInfoCards />
       <Bookings />
+      <Restaurant />
+      <Footer />
     </div>
   );
 };

src/Bookings.js

@@ -1,9 +1,11 @@
-import React from "react";
+import React, { useState } 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 [bookings, setBookings] = useState(FakeBookings);
+
   const search = searchVal => {
     console.info("TO DO!", searchVal);
   };
@@ -12,7 +14,7 @@ const Bookings = () => {
     <div className="App-content">
       <div className="container">
         <Search search={search} />
-        {/* <SearchResults results={FakeBookings} /> */}
+        {<SearchResults bookings={bookings} />}
       </div>
     </div>
   );

src/Footer.js

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

src/Heading.js

@@ -0,0 +1,12 @@
+import React from "react";
+import "./App.css";
+
+const Heading = () => {
+    return(
+        <header className="App-header">
+            <img alt="App-logo" className="App-logo" src="https://marketplace.canva.com/EAE8Xyb2xY8/1/0/1600w/canva-gold-exclusive-royal-luxury-hotel-logo-izeElzvImEY.jpg"></img>
+            <h1>CYF Hotel</h1></header>
+    );
+}
+
+export default Heading;

src/Order.js

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

src/Restaurant.js

@@ -1,14 +1,16 @@
-import React from "react";
+import React, { useState } from "react";
+import RestaurantButton from './RestaurantButton';
+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,14 @@
+import React, { useState } from "react";
+
+const RestaurantButton = ({ onClick }) => {
+    return (
+        <button className="btn btn-primary"
+          onClick={onClick} >Add</button>
+    )
+
+
+}
+
+
+export default RestaurantButton;
+

src/Search.js

@@ -1,4 +1,5 @@
 import React from "react";
+import SearchButton from "./SearchButton";
 
 const Search = () => {
   return (
@@ -17,7 +18,7 @@ const Search = () => {
                 className="form-control"
                 placeholder="Customer name"
               />
-              <button className="btn btn-primary">Search</button>
+              <SearchButton />
             </div>
           </form>
         </div>
@@ -26,4 +27,5 @@ const Search = () => {
   );
 };
 
+
 export default Search;

src/SearchButton.js

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

src/SearchResults.js

@@ -0,0 +1,52 @@
+import React, { useState } from "react";
+import FakeBookings from "./data/fakeBookings.json";
+import moment from "moment/moment";
+
+const SearchResults = (props) => {
+   const [selectedRows, setSelectedRows] = useState([]); 
+   const selectedClicks = (bookingId) => {
+    setSelectedRows((selectedClickedRows) => {
+        if (selectedClickedRows.includes(bookingId)) {
+            return selectedClickedRows.filter((id) => id !== bookingId)
+        } else {
+            return [...selectedClickedRows, bookingId];
+        }
+    });
+    }
+
+
+   return(
+        <table className="table">
+            <thead>
+                <tr>
+                    <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">CheckIn</th>
+                    <th scope="col">CheckOut</th>
+                    <th scope="col">Nights</th>
+                </tr>
+            </thead>
+            <tbody className="tbody">
+                {props.bookings.map((booking, key) => (
+                <tr 
+                key={booking.id}
+                className={selectedRows.includes(booking.id) ? "selected-row" : ""}
+                onClick={() => selectedClicks(booking.id)}>
+                    <th scope="row">{booking.title}</th>
+                     <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>
+                ))}
+             </tbody>
+        </table>     
+     )
+};
+export default SearchResults;

src/TouristInfoCards.js

@@ -0,0 +1,31 @@
+import React from "react";
+
+const TouristInfoCards = () => {
+    return(
+        <div className="card-container">
+            <img src="" alt=""></img>
+            <div className="card">
+                <img className="card-img" src="https://media.istockphoto.com/id/1421242432/photo/glasgow-united-kingdom-aerial-shot-of-modern-buildings-in-the-central-area-of-the-city-with.jpg?s=612x612&w=0&k=20&c=5atqO3S6NsvBJazWGSyth82FhvVfgajQARHv8KQ0J-Q=" alt="glasgow"></img>
+                <h4>Glasgow</h4>
+                <p>Glasgow's city centre is home to flagship stores, impressive shopping centres and designer favourites all within an easily walkable area.</p>
+                <a href="https://www.peoplemakeglasgow.com" className="btn btn-primary">More Information</a>
+            </div>
+             <img src="" alt=""></img>
+            <div className="card">
+                <img className="card-img" src="https://media.istockphoto.com/id/1061647528/photo/view-of-a-footbridge-in-salford-quays-in-manchester-england.jpg?s=612x612&w=0&k=20&c=vl5COcWWCtvUM8Nu26oP2WUTfhP45wcGNN8nrbtjcsw=" alt="manchester"></img>
+                <h4>Manchester</h4>
+                <p>Manchester is one of the most exciting places to visit in the UK right now where everybody and anybody is very warmly welcomed.</p>
+                <a href="https://www.visitmanchester.com" className="btn btn-primary">More Information</a>
+            </div>
+             <img src="" alt=""></img>
+            <div className="card">
+                <img className="card-img" src="https://img.freepik.com/free-photo/panoramic-view-big-ben-london-sunset-uk_268835-1401.jpg?w=2000" alt="london"></img>
+                <h4>London</h4>
+                <p>Visit London, the official guide to England’s exciting capital. For more Information click the link and visit the wonders of London</p>
+                <a href="https://www.visitlondon.com" className="btn btn-primary">More Information</a>
+            </div>
+        </div>
+    )
+} 
+
+export default TouristInfoCards;