London 10 | Abubakar-Meigag | React | react-hotel-project

package.json

@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^1.4.0",
+    "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "^5.0.1"

src/App.css

@@ -1,40 +1,126 @@
+@import url('https://fonts.googleapis.com/css2?family=Anton&family=Monomaniac+One&family=Quicksand:wght@300&display=swap');
+
 .App {
   text-align: left;
 }
 
+.rwo-btn {
+  height: 50px;
+  width: 88px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  background-color: blue;
+  color: aliceblue;
+  font-weight: bolder;
+}
+
+.card-img-top {
+  width: 450px;
+  height: 301px;
+}
+
+.tourist-cards {
+  margin-top: 10px;
+  margin-left: 80px;
+  margin-right: 40px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  /* margin-top: 30px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding-left: 40px;
+  padding-right: 40px; */
+}
+
 .App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 80px;
+  /* animation: App-logo-spin infinite 20s linear; */
+  height: 100px;
+  margin-bottom: 20px;
+  border: 1px solid rgb(245, 163, 32)
 }
 
 .App-header {
-  background-color: #222;
-  height: 50px;
+  background-color: #272626;
+  height: 150px;
+  width: 100%;
   padding: 20px;
-  color: white;
+  color: rgb(245, 163, 32);
   text-align: left;
-  font-family: Arial, Helvetica, sans-serif;
-  font-size: 1em;
+  /* font-family: Arial, Helvetica, sans-serif; */
+  font-size: 2.8em;
   font-weight: bold;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 30px;
+  padding-top: 51px;
+  font-family: 'Monomaniac One', sans-serif;
 }
 
-.App-title {
-  font-size: 1.5em;
+
+
+.App-header h1{
+  font-size: 3.3rem;
 }
 
+/* .App-title {
+  font-size: 1.5em;
+} */
+
 .App-content {
   padding-top: 20px;
   font-size: large;
 }
 
+.order-type {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  margin: 0 100px;
+}
+
+.card-body {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.row-nonHighlight {
+  background-color: rgb(241, 239, 237);
+}
+
+.row-highlight {
+  background-color: rgb(245, 163, 32);
+}
+
+.order-head {
+  display: flex;
+  justify-content: center;
+}
+
+.customer-profile {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  align-items: center;
+  background-color: #4c4949;
+  color: snow;
+}
+
+
 @keyframes App-logo-spin {
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }
 }
+
 .search {
   padding: 5px 0 20px 0;
 }
@@ -53,5 +139,5 @@ tr {
 }
 
 .card {
-  width: 18rem;
-}
+  width: 28.2rem;
+}

src/App.js

@@ -1,15 +1,30 @@
 import React from "react";
-
+import Heading from "./Heading";
 import Bookings from "./Bookings";
+import Restaurant from "./Restaurant";
+import TouristInfoCards from "./TouristInfoCards";
+import FooterCompo from "./FooterCompo";
 import "./App.css";
 
 const App = () => {
   return (
     <div className="App">
-      <header className="App-header">CYF Hotel</header>
-      <Bookings />
+      <Heading />
+      <TouristInfoCards />
+      <Bookings name />
+      <Restaurant />
+      <FooterCompo
+        details={
+          {
+            address: "123 Fake Street, London, E1 4UD",
+            email: "hello@fakehotel.com",
+            phone: "0123 456789",
+          }
+        }
+      />
     </div>
   );
 };
 
 export default App;
+

src/Bookings.js

@@ -1,21 +1,47 @@
-import React from "react";
+import React, { useCallback, useEffect, useState } from "react";
+import Axios from "axios";
 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([]);
+  const [searchVal, setSearchVal] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const search = (searchVal) => {
     console.info("TO DO!", searchVal);
+    setSearchVal(searchVal);
   };
 
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        const res = await Axios.get("https://cyf-react.glitch.me/delayed");
+        setBookings(res.data);
+      } catch (error) {
+          console.log(error);
+      }
+      setLoading(true);
+    }
+    fetchData();  
+
+  }, []);
+
+  const searchOutCome = bookings.filter(
+    (el) => el.firstName.includes(searchVal) || el.surname.includes(searchVal)
+  );
+
   return (
     <div className="App-content">
       <div className="container">
-        <Search search={search} />
-        {/* <SearchResults results={FakeBookings} /> */}
+        <Search search={search} /> 
+        {!loading ? (<h1>Loading...</h1>) : (
+        <SearchResults results={searchOutCome} /> )
+        }
       </div>
     </div>
   );
 };
 
-export default Bookings;
+export default Bookings;

src/CustomerProfile.js

@@ -0,0 +1,35 @@
+// import  Axios from 'axios';
+import React, { useEffect, useState } from "react";
+
+const CustomerProfile = (props) => {
+  const [showDataProfile, setShowDataProfile] = useState("");
+  const idApi = `https://cyf-react.glitch.me/customers/${props.id}`;
+
+  useEffect(() => {
+    if (props.id) {
+      fetch(idApi)
+        .then((response) => response.json())
+        .then((data) => setShowDataProfile(data));
+    }
+    }, [props.id]);
+    return (
+        <div className="customer-profile">
+        {props.id !== "" ? <h1> Customer Profile</h1> : <></>}
+        {props.id !== "" ? (
+            <ul>
+                <li>Id: {showDataProfile.id}</li>
+                <li>Vip: {showDataProfile.vip ? "Yes" : "No"}</li>
+                <li>
+                    Full Name: {showDataProfile.firstName} {showDataProfile.surname}
+                </li>
+                <li>Email: {showDataProfile.email}</li>
+                <li>Phone no: {showDataProfile.phoneNumber}</li>
+            </ul>
+        ) : (
+            <></>
+        )}
+        </div>
+    );
+};
+
+export default CustomerProfile;

src/FooterCompo.js

@@ -0,0 +1,17 @@
+import React from "react";
+
+const FooterCompo = ({ details }) => {
+  return (
+    <div className="footer">
+      <footer>
+        <ul>
+          {Object.keys(details).map((key) => {
+            return <li key={key}>{details[key]}</li>;
+          })}
+        </ul>
+      </footer>
+    </div>
+  );
+};
+
+export default FooterCompo;

src/Heading.js

@@ -0,0 +1,16 @@
+import React from "react";
+import logoHotel from "./images/495.jpg";
+
+const Heading = () => {
+  const name = "Beko CYF Luxury Hotel";
+  return (
+    <div>
+      <header className="App-header">
+        <h1>{name}</h1>
+        <img src={logoHotel} className="App-logo" />
+      </header>
+    </div>
+  );
+};
+
+export default Heading;