London10 - Hussein Bahdon - Lesson one - done

README.md

@@ -40,6 +40,7 @@ A hotel booking application in React. Homework for the [CodeYourFuture React mod
 		<a href="#" className="btn btn-primary">Go somewhere</a>
 	</div>
 </div>
+
 ```
 
 **Test:** 3 info cards should be displayed on the page for each city (Glasgow, Manchester, London). Each card should link to the correct website.

src/App.css

@@ -8,14 +8,17 @@
 }
 
 .App-header {
-  background-color: #222;
-  height: 50px;
+  background-color: #d1dbee;
+  height: auto;
   padding: 20px;
   color: white;
   text-align: left;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 1em;
   font-weight: bold;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
 }
 
 .App-title {

src/Bookings.js → src/Component/Bookings.jsx

@@ -1,18 +1,20 @@
 import React from "react";
-import Search from "./Search.js";
-// import SearchResults from "./SearchResults.js";
-// import FakeBookings from "./data/fakeBookings.json";
-
+import Search from "./Search";
+import FakeBookings from "../data/fakeBookings.json";
+import SearchResult from "./SearchResult"
 const Bookings = () => {
   const search = searchVal => {
     console.info("TO DO!", searchVal);
   };
 
+
+  // console.log(FakeBookings)
+
   return (
     <div className="App-content">
       <div className="container">
         <Search search={search} />
-        {/* <SearchResults results={FakeBookings} /> */}
+        <SearchResult results={FakeBookings} />        
       </div>
     </div>
   );

src/Component/CardData.jsx

@@ -0,0 +1,23 @@
+import react from "react";
+
+
+
+const CardData = ({result}) => (
+        <>
+            <tr>
+                <td>{result.id}</td>
+                <td>{result.title}</td>
+                <td>{result.firstName}</td>
+                <td>{result.surname}</td>
+                <td>{result.email}</td>
+                <td>{result.roomId}</td>
+                <td>{result.checkInDate}</td>
+                <td>{result.checkOutDate}</td>
+                <td> {
+                    (new Date(`${result.checkOutDate}T00:00:01Z`) - new Date(`${result.checkInDate}T00:00:01Z`))/ 86400000
+                    }</td>
+            </tr>
+        </>
+)
+
+export default CardData;

src/Component/Footer.jsx

@@ -0,0 +1,26 @@
+import React from "react";
+import "../index.css"
+
+
+
+
+const Footer = props =>{
+
+    // console.log("this is the props " + {props.greeting})
+
+    return(
+        <>
+            <div className="footer-container">
+
+                {props.data.map((element, index) => (
+                    <ul>
+                    <li key={index}>{element} </li>
+                    </ul>
+                ))}
+            </div>
+        </>
+    )
+
+}
+
+export default Footer;

src/Component/Heading.jsx

@@ -0,0 +1,15 @@
+import react from "react";
+import "../index.css"
+function Heading(){
+    return (
+        <>  
+
+              <header className="App-header">
+                <img className="App-logo" src="https://www.freepnglogos.com/uploads/hotel-logo-png/hotel-icon-download-28.png"/> 
+                <h1>CYF Hotel</h1>
+              </header>
+        </>
+    )
+}
+
+export default Heading;

src/Component/Orders.jsx

@@ -0,0 +1,48 @@
+import { useState } from "react";
+import react  from "react";
+import RestaurantButton from "./RestaurantButton";
+
+const Orders = props => {
+    const [pizzaCount, setPizzaCount] = useState(0)
+    const [count, setCount] = useState(0)
+
+    function handleCountMinus() {
+        setCount(count - 1)
+    }
+    function handleCountPlus() {
+        setCount(count + 1)
+    }
+
+    function handlePizzaCount() {
+        if (count < 0) {
+            setPizzaCount(0)
+        } else {
+            setPizzaCount(count)
+        }
+    }
+
+    return (
+        <>
+        <div>
+            <ul>
+                <li>
+                    <div>
+                        <div>
+                            {props.food}: {pizzaCount}
+                        </div>
+                        <div>
+                            <button class="btn btn-outline-info" onClick={handleCountMinus} >-</button>
+                            <h5>{count}</h5>
+                            <button class="btn btn-outline-info" onClick={handleCountPlus} >+</button>
+                        </div>
+                        <RestaurantButton handlePizzaCount={handlePizzaCount}/>
+                    </div>
+                </li>
+            </ul>
+        </div>
+        </>
+    )
+}
+
+
+export default Orders;

src/Component/Restaurant.jsx

@@ -0,0 +1,17 @@
+import React, { useState } from "react";
+import Orders from "../Component/Orders";
+const Restaurant = () => {
+
+
+  const pizzas = 0;
+  return (
+    <div className="container">
+      <h3>Restaurant Orders</h3>
+     <Orders food={"pizza"} />
+     <Orders food={"burger"} />
+     <Orders food={"Cake"}/>
+    </div>
+  );
+};
+
+export default Restaurant;

src/Component/RestaurantButton.jsx

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

src/Search.js → src/Component/Search.jsx

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

src/Component/SearchButton.jsx

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

src/Component/SearchResult.jsx

@@ -0,0 +1,52 @@
+import react from "react";
+import CardData from "./CardData";
+// import searchButton from "./SearchButton";
+
+
+
+const SearchResult = ({results}) =>{
+
+
+    console.log(results)
+
+
+    return (
+        <>
+            <table className="table">
+                <thead>
+                    <tr> 
+                       <th>ID</th>
+                       <th>title</th>
+                       <th>FirstName</th>
+                       <th>Surname</th>
+                       <th> Email</th>
+                       <th>RoomId</th>
+                       <th>Check In Date</th>
+                       <th>Check out date</th>
+                       <th>Nights</th>
+                    </tr>
+                </thead>
+                {
+                    results.map((result, index) => (
+                        //    <tr key={index}>
+                        //     <td>{result.id}</td>
+                        //     <td>{result.title}</td>
+                        //     <td>{result.firstName}</td>
+                        //     <td>{result.surname}</td>
+                        //     <td>{result.email}</td>
+                        //     <td>{result.roomId}</td>
+                        //     <td>{result.checkInDate}</td>
+                        //     <td>{result.checkOutDate}</td>
+                        //    </tr>
+
+                        <CardData key={index} result={result}/>
+                        )
+                    )
+                }
+
+            </table>
+        </>
+    )
+}
+
+export default SearchResult;

src/Component/TouristInfoCards.jsx

@@ -0,0 +1,18 @@
+import react from "react";
+import "../index.css"
+
+
+export default function TouristInfoCards(props) {
+    return (
+        <>
+            <div className="card">
+                <img src={props.img}/>
+                <div className="card-body">
+                    <h1>{props.title}</h1>
+                    <p>{props.description}</p>
+                    <a href={props.url} className="btn btn-primary">Go somewhere</a>
+                </div>
+            </div>
+        </>
+    )
+}