diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 000000000..ed2176849
Binary files /dev/null and b/.DS_Store differ
diff --git a/public/favicon.ico b/CYF-HOTEL-REACT/public/favicon.ico
similarity index 100%
rename from public/favicon.ico
rename to CYF-HOTEL-REACT/public/favicon.ico
diff --git a/public/index.html b/CYF-HOTEL-REACT/public/index.html
similarity index 100%
rename from public/index.html
rename to CYF-HOTEL-REACT/public/index.html
diff --git a/public/manifest.json b/CYF-HOTEL-REACT/public/manifest.json
similarity index 100%
rename from public/manifest.json
rename to CYF-HOTEL-REACT/public/manifest.json
diff --git a/CYF-HOTEL-REACT/src/CustomerProfile.jsx b/CYF-HOTEL-REACT/src/CustomerProfile.jsx
new file mode 100644
index 000000000..e379a7b02
--- /dev/null
+++ b/CYF-HOTEL-REACT/src/CustomerProfile.jsx
@@ -0,0 +1,14 @@
+import React from 'react'
+
+const CustomerProfile =(props) =>{
+ // if (props.customersProfile.vip === true)
+ return (
+
+
Customer ID: { props.customersProfile.id}
+
Customer Email: { props.customersProfile.email}
+ {props.customersProfile.vip && (
Customer Phone Number: { props.customersProfile.phoneNumber}
)}
+
+
+ )
+}
+
+export default Loading;
+
diff --git a/CYF-HOTEL-REACT/src/Order.js b/CYF-HOTEL-REACT/src/Order.js
new file mode 100644
index 000000000..5b62bb0c6
--- /dev/null
+++ b/CYF-HOTEL-REACT/src/Order.js
@@ -0,0 +1,19 @@
+import React, { useState } from 'react';
+import RestaurantButton from './RestaurantButton';
+
+function Order({orderType}) {
+ const [Orders, setOrders] = useState(0);
+
+ const orderOne = () => {
+ setOrders(Orders => Orders + 1);
+ };
+
+ return (
+
+ {orderType}: {Orders}
+ );
+}
+
+export default Order;
diff --git a/CYF-HOTEL-REACT/src/RestaurantButton.js b/CYF-HOTEL-REACT/src/RestaurantButton.js
new file mode 100644
index 000000000..acf80a538
--- /dev/null
+++ b/CYF-HOTEL-REACT/src/RestaurantButton.js
@@ -0,0 +1,9 @@
+import React from 'react';
+
+function RestaurantButton({ handleClick }) {
+ return Add ;
+}
+
+export default RestaurantButton;
+
+
diff --git a/CYF-HOTEL-REACT/src/Test.js b/CYF-HOTEL-REACT/src/Test.js
new file mode 100644
index 000000000..332964a31
--- /dev/null
+++ b/CYF-HOTEL-REACT/src/Test.js
@@ -0,0 +1,35 @@
+import { useState } from "react";
+
+const Test= ()=> {
+
+
+const [showbutton,setShowbutton]= useState(true);
+const [showalert,setShowalert]= useState(false);
+
+const Alert =()=>{
+ return(
+
+
this is my alert
+
close
+
test ): (
+
+ );
+};
+
+export default App;
+
+
diff --git a/src/App.test.js b/cyf-hotel-react/src/App.test.js
similarity index 100%
rename from src/App.test.js
rename to cyf-hotel-react/src/App.test.js
diff --git a/cyf-hotel-react/src/Bookings.js b/cyf-hotel-react/src/Bookings.js
new file mode 100644
index 000000000..94492332a
--- /dev/null
+++ b/cyf-hotel-react/src/Bookings.js
@@ -0,0 +1,93 @@
+import React, { useEffect, useState } from "react";
+import Search from "./Search.js";
+import SearchResults from "./SearchResults.js";
+// import FakeBookings from "./data/fakeBookings.json";
+import Loading from './Loading.jsx'
+
+const Bookings = (props) => {
+ const [bookings, setBookings] = useState([]);
+ const [load, setLoad] = useState(true);
+ const[data,setData] = useState([]);
+
+
+
+ const search = (searchsInput) => {
+
+ const filteredResults = bookings.filter((item) => {
+
+ return (
+ (item.firstName.toString().toLowerCase().includes(searchsInput.toLowerCase()))||
+ (item.surname.toString().toLowerCase().includes(searchsInput.toLowerCase())) )
+
+ } );
+ {setBookings(filteredResults);}
+ }
+ const restbookings = (data) => {
+ return
+ setBookings(data);
+ }
+
+
+
+
+ useEffect(()=>{
+ // fetch('https://cyf-react.glitch.me')
+
+ fetch('https://cyf-react.glitch.me/delayed')
+
+ // fetch('https://cyf-react.glitch.me/error')
+
+ .then((res) =>
+ {if (!res.ok) alert("there is no data in the API")
+
+ return res.json() })
+
+ .then((data) => {setBookings(data)
+ setLoad(false)})
+ .catch((error) => console.error("Error fetching data:", error));
+ // Handle errors here
+
+
+ }, [props.id])
+
+ useEffect(() => {
+ console.log("Bookings during render:", bookings);
+ });
+
+ return (
+
+
+
+
+
+ {
+ // eslint-disable-next-line no-undef
+ props.ContactInfo.map((item, index) =>(
+ {item}
+ ))}
+
+
+ );
+}
+export default Footer;
\ No newline at end of file
diff --git a/cyf-hotel-react/src/Heading.js b/cyf-hotel-react/src/Heading.js
new file mode 100644
index 000000000..51e25d43c
--- /dev/null
+++ b/cyf-hotel-react/src/Heading.js
@@ -0,0 +1,16 @@
+import React from "react";
+
+const Heading = () => {
+ return (
+
+
+
+
+// //
+// //
Search Bookings
+// //
+
+// //
+// //
+// Customer ID
+// Customer name
+//
+
+
+
+// return (
+//
+//
+//
Search Bookings
+//
+
+//
+//
+ Customer ID
+ Customer name
+
+
+
+
+ return (
+
+
+
Search Bookings
+
+
+
+
+ Search IDs
+ Search Names
+
+ );
+};
+
+ export default SearchButton;
\ No newline at end of file
diff --git a/cyf-hotel-react/src/SearchResults.js b/cyf-hotel-react/src/SearchResults.js
new file mode 100644
index 000000000..7c380eb81
--- /dev/null
+++ b/cyf-hotel-react/src/SearchResults.js
@@ -0,0 +1,83 @@
+import React, { useState } from "react";
+import moment from "moment";
+import CustomerProfile from "./CustomerProfile.jsx"
+
+const SearchResults = (props) => {
+ const [selectedRow, setSelectedRow] = useState(false);
+ const [customersProfile, setCustomersProfile] = useState([]);
+
+ const handleProfile = (booking) => {
+ fetch(`https://cyf-react.glitch.me/customers/${booking.id}`)
+
+ .then((res) => res.json())
+ .then((data) => setCustomersProfile(data))
+ .catch((error) => console.error("Error fetching data:", error));
+
+ }
+
+ const RowSelection = (bookingId) => {
+ setSelectedRow((SelectedRow) =>
+ SelectedRow == bookingId ? null : bookingId);
+ };
+
+ const calculateNumberOfNights = (checkInDate, checkOutDate) => {
+ const start = moment(checkInDate);
+ const end = moment(checkOutDate);
+ return end.diff(start, "days");
+ };
+ if (!Array.isArray(props.bookings)) {
+ return null; }
+ return (
+ <>
+
+
+
+ ID
+ Title
+ FirstName
+ Surname
+ Email
+ Room ID
+ Check-in Date
+ Check-out Date
+ Nights
+ Profile
+
+
+
+ {props.bookings.map((booking) => (
+ RowSelection(booking.id)}
+ style={{
+ backgroundColor: selectedRow === booking.id ? "lightgrey" : "inherit",
+ }}
+ >
+ {booking.id}
+ {booking.title}
+ {booking.firstName}
+ {booking.surname}
+ {booking.email}
+ {booking.roomId}
+ {booking.checkInDate}
+ {booking.checkOutDate}
+ {calculateNumberOfNights(booking.checkInDate, booking.checkOutDate)}
+ { handleProfile(booking)} >Show Profile }
+
+ ))}
+
+
+ < CustomerProfile customersProfile = {customersProfile} />
+
+ );
+};
+
+export default SearchResults;
+
+
+
+
+
+
+
+
diff --git a/cyf-hotel-react/src/TouristInfoCards.js b/cyf-hotel-react/src/TouristInfoCards.js
new file mode 100644
index 000000000..be75f3697
--- /dev/null
+++ b/cyf-hotel-react/src/TouristInfoCards.js
@@ -0,0 +1,43 @@
+import React from "react";
+
+const TouristInfoCards = () => {
+ return (
+
+
+
+
+
Glasgow
+
Glasgow is a port city on the River Clyde in Scotland's western Lowlands. It's famed for its Victorian and art nouveau architecture, a rich legacy of the city's 18th–20th-century prosperity due to trade and shipbuilding. Today it's a national cultural hub, home to institutions including the Scottish Opera, Scottish Ballet and National Theatre of Scotland, as well as acclaimed museums and a thriving music scene.
+
+
+
+
+
+
+
Manchester
+
Manchester is one of the most exciting places to visit in the UK right now where everybody and anybody is very warmly welcomed.
+
+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.
+
+Known throughout the world as the birthplace of the industrial revolution, Manchester has a proud history in science, politics, music, arts and sport. And today the city combines this heritage with a progressive vision to be a city that delivers surprise and delight in equal measures.
+
+
+
+
+
+
London
+
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.
+
+
+
-
-
- );
-};
-
-export default App;
diff --git a/src/Bookings.js b/src/Bookings.js
deleted file mode 100644
index e0d911b13..000000000
--- a/src/Bookings.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from "react";
-import Search from "./Search.js";
-// import SearchResults from "./SearchResults.js";
-// import FakeBookings from "./data/fakeBookings.json";
-
-const Bookings = () => {
- const search = searchVal => {
- console.info("TO DO!", searchVal);
- };
-
- return (
-
- );
-};
-
-export default Bookings;
diff --git a/src/Restaurant.js b/src/Restaurant.js
deleted file mode 100644
index ecb2b43a2..000000000
--- a/src/Restaurant.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from "react";
-
-const Restaurant = () => {
- const pizzas = 0;
- return (
-
-
Restaurant Orders
-
-
- Pizzas: {pizzas} Add
-
-
-
-
-
Search Bookings
-
-
-
+ 
+ 
+ 
+