London-9-Turing-Farnoosh_Moayeri-React-WEEK1

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,30 +1,36 @@
+li{
+  list-style: none;
+  padding:2px;
+}
+
+
 .App {
   text-align: left;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
-}
+ /* ---header--- */
+ .App-title {
+  font-size: 1.5em;
+} 
+
 
 .App-header {
   background-color: #222;
-  height: 50px;
+  width: 100%;
+  height: 200px;
   padding: 20px;
   color: white;
   text-align: left;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 1em;
   font-weight: bold;
 }
-
-.App-title {
-  font-size: 1.5em;
-}
-
-.App-content {
-  padding-top: 20px;
-  font-size: large;
+/* ---logo--- */
+.App-logo {
+  animation: App-logo-spin infinite 20s linear;
+  height: 80px;
+  width: 100px;
+  margin-left: 3em;
 }
 
 @keyframes App-logo-spin {
@@ -35,23 +41,88 @@
     transform: rotate(360deg);
   }
 }
+
+/* ---cards ---- */
+.card {
+ width:400px;
+}
+
+.card-img-top{
+ width: 100%;
+ height: 300px; 
+}
+
+
+.cards{
+  display: inline-flex;
+  border: 10px solid #698474;
+}
+
+/* ---search--- */
+.App-content {
+  padding-top: 20px;
+  font-size: large;
+
+}
+
 .search {
+  margin-top: 2em;
   padding: 5px 0 20px 0;
 }
 
-tr {
-  color: #5b5757;
-}
 
 .results {
   padding-top: 15px;
+
 }
 
-.footer {
-  padding-top: 20px;
-  text-align: center;
+
+/* ---table--- */
+.table-row-main{
+  background-color:#698474 ;
+  color: #fcf8f3;
 }
 
-.card {
-  width: 18rem;
+tr {
+  color: black;
+}
+
+td button{
+  background-color:#698474 ;
+  color:#fcf8f3 ;
+  border-radius: 5px;
+}
+
+/* ---restaurant--- */
+.restaurant{
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  background-color:  #a2c11c;
+  align-items: center;
+  border:2px solid #222;
+}
+
+.restaurant ul{
+  display: flex;
+  flex-direction: row;
+}
+
+.restaurant button{
+  background-color:red;
+  margin-left: 5px;
+  margin-right: 10px;
+}
+
+/* --- footer --- */
+.footer {
+  padding-top: 2px;
+  text-align: center;
 }
+.contact-container{
+   display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  background-color: #698474;
+}

src/App.js

@@ -1,13 +1,44 @@
 import React from "react";
-
 import Bookings from "./Bookings";
 import "./App.css";
+import Heading from "./Heading";
+import TouristInfoCards from "./TouristInfoCards";
+import Footer from "./Footer";
+import Restaurant from "./Restaurant";
+import Order from "./Order";
 
 const App = () => {
+  const contact = [
+    "123 Fake Street, London, E1 4UD",
+    "[email protected]",
+    "0123 456789",
+  ];
   return (
     <div className="App">
-      <header className="App-header">CYF Hotel</header>
+      <Heading />
+      <TouristInfoCards
+        image="https://ik.imagekit.io/panmac/tr:f-auto,w-740,pr-true//bcd02f72-b50c-0179-8b4b-5e44f5340bd4/4f007762-5423-497d-920f-f4a5b6c86259/glasgow-crime-books-min.png"
+        title="Glasgow"
+        link="href=https://peoplemakeglasgow.com"
+        description="Is the most populous city in Scotland and the fourth-most populous city in the United Kingdom, as well as being the 27th largest city by population in Europe.Today it's a national cultural hub, home to institutions including the Scottish Opera, Scottish Ballet and National Theatre of Scotland"
+      />
+      <TouristInfoCards
+        image="https://www.picturesforwalls.com/blackandwhite/manchester/images/curvedpassage.jpg"
+        title="Manchester"
+        link="href=https://visitmanchester.com"
+        description="Is a major city in the northwest of England with a rich industrial heritage. The Castlefield conservation area’s 18th-century canal system recalls the city’s days as a textile powerhouse, and visitors can trace this history at the interactive Museum of Science & Industry."
+      />
+      <TouristInfoCards
+        image="https://images.unsplash.com/photo-1581950196064-0b98a6586d04?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1752&q=80"
+        title="London"
+        link="href=https://visitlondon.com"
+        description="The capital of England and the United Kingdom, is a 21st-century city with history stretching back to Roman times. At its centre stand the imposing Houses of Parliament, the iconic ‘Big Ben’ clock tower and Westminster Abbey, site of British monarch coronations"
+      />
       <Bookings />
+      <Restaurant />
+      {/* <Order /> */}
+
+      <Footer contact={contact} />
     </div>
   );
 };

src/Bookings.js

@@ -1,18 +1,39 @@
-import React from "react";
+import React, { useEffect , useState } from "react";
 import Search from "./Search.js";
-// import SearchResults from "./SearchResults.js";
+import SearchResults from "./SearchResults.js";
 // import FakeBookings from "./data/fakeBookings.json";
 
 const Bookings = () => {
-  const search = searchVal => {
+  const [bookings, setBookings]= useState([])
+
+
+  useEffect(() => {
+    console.log("Fetching data from FakeBookings");
+
+    fetch("https://cyf-react.glitch.me.")
+      .then((res) => res.json())
+      .then((data) => {
+        setBookings(data);
+      });
+  }, []);
+  const search = (searchVal) => {
     console.info("TO DO!", searchVal);
+    const filteredBooking = bookings.filter((name) =>
+      name.firstName.toLowerCase() === searchVal.toLowerCase() ||
+      name.surname.toLowerCase() === searchVal.toLowerCase() ||
+      name.firstName.toLowerCase().includes(searchVal.toLowerCase()) ||
+      name.surname.toLowerCase().includes(searchVal.toLowerCase())
+        ? setBookings([name])  
+        :-1
+    );
+      console.log(filteredBooking); 
   };
 
   return (
     <div className="App-content">
       <div className="container">
         <Search search={search} />
-        {/* <SearchResults results={FakeBookings} /> */}
+        <SearchResults results ={bookings} />
       </div>
     </div>
   );

src/CustomerProfile.js

@@ -0,0 +1,16 @@
+import React from "react";
+
+function CustomerProfile(props){
+
+    return <div>Customer {props.id} profile</div>
+   }
+
+
+
+
+
+
+
+
+
+export default CustomerProfile;

src/Footer.js

@@ -0,0 +1,13 @@
+import React from "react";
+
+const Footer = (props) => {
+  return (
+    <ul className="contact-container">
+      {props.contact.map((list, index) => {
+        return <li key={index}>{list}</li>;
+      })}
+    </ul>
+  );
+};
+
+export default Footer;

src/Heading.js

@@ -0,0 +1,16 @@
+import React from "react";
+const Heading = () => {
+  return (
+    <header className="App-header">
+      <h1>CYF Hotel</h1>
+      <img 
+      className="App-logo"
+      src="https://images.emojiterra.com/google/noto-emoji/v2.034/512px/1f3e8.png"
+        // src="https://housing.com/news/wp-content/uploads/2022/11/hotel-room-design-compressed-1.jpg"
+      alt="Hotel room"
+      />
+    </header>
+  );
+};
+
+export default Heading;

src/Order.js

@@ -0,0 +1,16 @@
+import React, { useState } from "react";
+
+const Order = ({orderType}) => {
+  const [orders, setOrders] = useState(0);
+  function orderOne() {
+    return setOrders(orders + 1);
+  }
+  return (
+    <li key={orderType}>
+      {orderType}:{orders}
+      <button className="btn btn-primary" onClick={orderOne}>Add</button>
+    </li>
+  );
+};
+
+export default Order;

src/Restaurant.js

@@ -1,17 +1,17 @@
-import React from "react";
+// import React, { useState } from "react";
+// import RestaurantButton from "./RestaurantButton";
+import Order from "./Order";
 
 const Restaurant = () => {
-  const pizzas = 0;
   return (
-    <div>
+    <div className="restaurant">
       <h3>Restaurant Orders</h3>
       <ul>
-        <li>
-          Pizzas: {pizzas} <button className="btn btn-primary">Add</button>
-        </li>
+        <Order orderType="🍕 Pizzas " />
+        <Order orderType=" 🥗 Salads " />
+        <Order orderType=" 🍰 Cakes " />
       </ul>
     </div>
   );
 };
-
 export default Restaurant;

src/RestaurantButton.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+function RestaurantButton(props) {
+  return (<button onClick={props.orderOne}></button>);
+}
+
+export default RestaurantButton;