diff --git a/package-lock.json b/package-lock.json
index 8197e6f22..94217b93a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
"name": "react-hotel",
"version": "0.1.0",
"dependencies": {
+ "moment": "^2.29.4",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "^5.0.1"
@@ -11681,6 +11682,14 @@
"mkdirp": "bin/cmd.js"
}
},
+ "node_modules/moment": {
+ "version": "2.29.4",
+ "resolved": "https://registry.npmjs.org/moment/-/moment-2.29.4.tgz",
+ "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==",
+ "engines": {
+ "node": "*"
+ }
+ },
"node_modules/mri": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
diff --git a/package.json b/package.json
index e3e1562a7..f81c28013 100644
--- a/package.json
+++ b/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"
diff --git a/src/App.js b/src/App.js
index 953c98560..191027226 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,13 +1,28 @@
import React from "react";
-
+import TouristInfoCards from "./TouristInfoCards";
import Bookings from "./Bookings";
+import Restaurant from "./Restaurant"
+import Bookings2 from "./Bookings2";
+import Footer from "./Footer";
import "./App.css";
const App = () => {
+ const address = [
+ "123 Fake Street, London, E1 4UD",
+ "hello@fakehotel.com",
+ "0123 456789",
+ ];
+
return (
+
+
+
Hotel Management System
+
+
+
);
};
diff --git a/src/BookingTable.jsx b/src/BookingTable.jsx
new file mode 100644
index 000000000..dabd7dbe4
--- /dev/null
+++ b/src/BookingTable.jsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import moment from 'moment';
+
+const BookingTable = ({bookings}) => {
+ return (
+
+
+
+ | ID |
+ Title |
+ First Name |
+ Surname |
+ Email |
+ Room ID |
+ Check In Date |
+ Check Out Date |
+ Nights |
+
+
+
+
+ {bookings.map((booking) => {
+ const checkInDate = moment(booking.checkInDate);
+ const checkOutDate = moment(booking.checkOutDate);
+ const nights = checkOutDate.diff(checkInDate, 'days');
+ return (
+ | {booking.id} |
+ {booking.title} |
+ {booking.firstName} |
+ {booking.surname} |
+ {booking.email} |
+ {booking.roomId} |
+ {booking.checkInDate} |
+ {booking.checkOutDate} |
+ {nights} |
+
+ );
+})};
+
+
+ );
+};
+
+export default BookingTable;
+
diff --git a/src/Bookings.js b/src/Bookings.js
index e0d911b13..afd4e82ef 100644
--- a/src/Bookings.js
+++ b/src/Bookings.js
@@ -1,18 +1,45 @@
-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.jsx";
+import FakeBookings from "./data/fakeBookings.json";
+import SearchButton from "./SearchButton.jsx";
const Bookings = () => {
- const search = searchVal => {
- console.info("TO DO!", searchVal);
+ const [bookings, setBookings] = useState(FakeBookings);
+ const [isLoading, setIsLoading] = useState(false);
+ const [error, setError] = useState(null);
+
+ const search = (searchVal) => {
+ setIsLoading (true);
+ setError(null);
+ setTimeout(() => {
+ fetch(`https://cyf-react.glitch.me/customers/${searchVal}`)
+ .then((response) => response.json())
+ .then((data) => {
+ setIsLoading(false);
+ setBookings(data);
+ })
+ .catch((error) => {
+ setIsLoading(false);
+ setError(error.message);
+ });
+ }, 5000);
};
return (
- {/*
*/}
+ {isLoading ? (
+
Loading data...
+ ) : error ? (
+
Error: {error}
+ ) : (
+ <>
+
+
+
+ )}
);
diff --git a/src/Bookings2.jsx b/src/Bookings2.jsx
new file mode 100644
index 000000000..0e479cc2f
--- /dev/null
+++ b/src/Bookings2.jsx
@@ -0,0 +1,28 @@
+import React, {useEffect, useState} from 'react';
+import BookingTable from './BookingTable';
+// import bookingsData from './data/fakeBookings.json';
+
+const Bookings2 = () => {
+ const [bookings, setBookings] = useState([]);
+
+ useEffect(() => {
+ fetch('https://cyf-react.glitch.me')
+ .then (response => response.json())
+ .then (data => {setBookings(data);
+ })
+ .catch(error => {
+ console.error('Error fetching bookings:', error);
+ });
+ }, []);
+
+ return (
+
+
CYF Hotel Bookings
+
+
+ );
+};
+
+
+
+export default Bookings2;
\ No newline at end of file
diff --git a/src/CustomerProfile.jsx b/src/CustomerProfile.jsx
new file mode 100644
index 000000000..742deee76
--- /dev/null
+++ b/src/CustomerProfile.jsx
@@ -0,0 +1,33 @@
+
+import React, {useState, useEffect} from "react";
+
+const CustomerProfile = ({ id }) => {
+ const [customerData, setCustomerData] = useState(null);
+
+useEffect(() => {
+ if (id) {
+ fetch(`https://cyf-react.glitch.me/customers/${id}`)
+ .then((response) => response.json())
+ .then((data) => setCustomerData(data));
+ }
+ }, [id]);
+
+ return (
+
+ {customerData ? (
+
+
Customer Profile: {id}
+
+ - Email: {customerData.email}
+ - VIP: {customerData.vip ? "Yes" : "No"}
+ - Phone Number: {customerData.phoneNumber}
+
+
+ ) : (
+
Loading customer profile...
+ )}
+
+
+
Search Bookings
+
+
+
+
+ {orderType}
+
+
+ );
+};
+
+ export default Order;
+
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}
-
-
-
-
-
Search Bookings
-
+
+
+
+
+
+ );
+}
+
+export default SearchButton;
\ No newline at end of file
diff --git a/src/SearchResults.jsx b/src/SearchResults.jsx
new file mode 100644
index 000000000..cf2acfc11
--- /dev/null
+++ b/src/SearchResults.jsx
@@ -0,0 +1,62 @@
+import React, {useState} from "react";
+import CustomerProfile from "./CustomerProfile";
+
+const BookingRow = ({ booking }) => {
+ const { id, title, firstName, surname, email, roomId, checkInDate, checkOutDate } = booking;
+const [selected, setSelected] = useState(false);
+
+const handleRowClick = () => {
+ setSelected(!selected);
+};
+
+const rowClassName = selected ? "selected" : "";
+
+ return (
+
+ | {id} |
+ {title} |
+ {firstName} |
+ {surname} |
+ {email} |
+ {roomId} |
+ {checkInDate} |
+ {checkOutDate} |
+ |
+
+ );
+};
+const SearchResults = ({ results }) => {
+ const [selectedCustomerId, setSelectedCustomerId] = useState(null);
+
+ const handleShowProfile = (customerId) => {
+ setSelectedCustomerId(customerId);
+ };
+
+
+ return (
+
+
+
+
+ | ID |
+ Title |
+ First Name |
+ Surname |
+ Email |
+ Room ID |
+ Check-in Date |
+ Check-out Date |
+
+
+
+ {results.map(booking => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Go somewhere
+
London
+
Explore the iconic landmarks, world-class museums, and diverse attractions of London.
+
Visit London
+
+
+