- CYF Hotel
+
);
};
diff --git a/src/Bookings.js b/src/Bookings.js
index e0d911b13..7d271e6c7 100644
--- a/src/Bookings.js
+++ b/src/Bookings.js
@@ -1,18 +1,41 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
import Search from "./Search.js";
-// import SearchResults from "./SearchResults.js";
-// import FakeBookings from "./data/fakeBookings.json";
+import SearchResults from "./SearchResults.js";
const Bookings = () => {
- const search = searchVal => {
- console.info("TO DO!", searchVal);
+ const [bookings, setBookings] = useState([]);
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ fetch(`https://cyf-react.glitch.me/`)
+ .then((response) => {
+ if (!response.ok) {
+ throw Error("Something went wrong");
+ }
+ return response.json();
+ })
+ .then((data) => {
+ console.log(data);
+ setBookings(data);
+ setLoading(false);
+ });
+ }, []);
+
+ const search = (searchVal) => {
+ const filteredBookings = bookings.filter(
+ (booking) =>
+ booking.firstName.toLowerCase().includes(searchVal.toLowerCase()) ||
+ booking.surname.toLowerCase().includes(searchVal.toLowerCase())
+ );
+ setBookings(filteredBookings);
};
return (
{loading ?
+ Loading...
: null}
+
+ );
+};
+
+export default CustomerProfile;
diff --git a/src/Footer.js b/src/Footer.js
new file mode 100644
index 000000000..01985bd00
--- /dev/null
+++ b/src/Footer.js
@@ -0,0 +1,17 @@
+import react from "react";
+
+const Footer = ({ props }) => {
+ return (
+ -
+ {props.id &&
- Customer_ID : {props.id} } + {props.firstName &&
- Name : {props.firstName} } + {props.surname &&
- surname : {props.surname} } + {props.vip &&
- email : {props.email} } + {props.phoneNumber &&
- phone number : {props.phoneNumber} } +
+
+
+ );
+};
+
+export default Footer;
\ No newline at end of file
diff --git a/src/Heading.js b/src/Heading.js
new file mode 100644
index 000000000..4a10b289d
--- /dev/null
+++ b/src/Heading.js
@@ -0,0 +1,10 @@
+import React from "react";
+const Heading = () => {
+ const name = "CYF HOTEL"
+ return 
{name}
Restaurant Orders
--
-
- - Pizzas: {pizzas} - +
-
+
@@ -8,16 +18,18 @@ const Search = () => {
-
diff --git a/src/SearchButton.js b/src/SearchButton.js
new file mode 100644
index 000000000..8c6e70950
--- /dev/null
+++ b/src/SearchButton.js
@@ -0,0 +1,7 @@
+import React from "react";
+
+ const SearchButton = () => {
+ return
+ }
+
+ export default SearchButton;
\ No newline at end of file
diff --git a/src/SearchResults.js b/src/SearchResults.js
new file mode 100644
index 000000000..2e4875bc8
--- /dev/null
+++ b/src/SearchResults.js
@@ -0,0 +1,91 @@
+import React, { useState, useEffect } from "react";
+import moment from "moment";
+import CustomerProfile from "./CustomerProfile";
+
+function SearchResults(props) {
+ const [rowSelected, rowSetSelected] = useState([]);
+ const [selectProfile, setSelectProfile] = useState("");
+ const [profile, setProfile] = useState([]);
+
+ useEffect(() => {
+ fetch(`https://cyf-react.glitch.me/customers/${selectProfile}`)
+ .then((res) => res.json())
+ .then((data) => setProfile(data));
+ }, [selectProfile]);
+
+ function showProfile(selectProfile) {
+ setSelectProfile(selectProfile);
+ }
+
+ function handleClick(index) {
+ if (rowSelected.includes(index)) {
+ rowSetSelected((selected) => {
+ return selected.filter((item) => item !== index);
+ });
+ } else {
+ rowSetSelected([...rowSelected, index]);
+ }
+ }
+ return (
+
+
+
+
+
+ );
+}
+
+export default SearchResults;
diff --git a/src/TouristInfoCards.js b/src/TouristInfoCards.js
new file mode 100644
index 000000000..989fd11f7
--- /dev/null
+++ b/src/TouristInfoCards.js
@@ -0,0 +1,87 @@
+import React from "react";
+
+const TouristInfoCard = () => {
+ return (
+ | Id | +Title | +First Name | +Surname | +Room id | +Check in date | +Check out date | +Stay nights | +Customer's Profile | +|
|---|---|---|---|---|---|---|---|---|---|
| {result.id} | +{result.title} | +{result.firstName} | +{result.surname} | +{result.email} | +{result.roomId} | +{result.checkInDate} | +{result.checkOutDate} | ++ {moment(result.checkOutDate).diff( + moment(result.checkInDate), + "days" + )} + | + ++ + | +
+ 
+
+ );
+};
+
+export default TouristInfoCard;
+ Explore The World With Us!!!
+
+
+
+ 
+
+
+
+
+ Glasgow
++ You’re guaranteed to find accommodation in Glasgow which suits + your taste and budget. Whether you’re looking for something + uniquely Glaswegian, a trendy hotel, a vibrant hostel or a + comfortable city centre apartment, you can be assured of a warm + welcome. +
+ + MORE INFO + +
+ 
+
+
+
+
+ Manchester
++ Manchester city centre is jam-packed with unique and eclectic + restaurants, bars, shops, museums, galleries, hotels and places to + stay whilst the surrounding Greater Manchester boroughs offer a + patch-work of visitor experiences including quaint market towns, + traditional pubs and beautiful green spaces and waterways to be + explored on foot or bike. The city region is easily navigated, + with great transport links both in and around Greater Manchester.. +
+ + MORE INFO + +
+ 
+
+
+
+
+ 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. +
+ + MORE INFO + +