,
+// the imported components are rendered in order:
+
+ An Error occurred when fetching the Bookings Data: {status}{" "}
+ {statusText}
+
+
+ ) : isLoading ? (
+
+
+ ) : (
+ container.
+// Inside the container, there is another
. The Search component is
+// rendered with the search function passed as a prop. If errorOccurred.ok is false, indicating an
+// error occurred during data fetching, an error message is displayed. If isLoading is true, a loading
+// spinner (ClipLoader) is displayed. If neither an error occurred nor the data is still loading,
+// the OutcomeSearch component is rendered with the bookings and setCustomerId prop. If customerId
+// is not null, indicating a customer is selected, the CustomerProfile component is rendered with the
+// id prop set to customerId. Finally, the Bookings component is exported as the default export of
+// the module, allowing it to be imported and used in other parts of the application.
diff --git a/src/CustomerProfile.js b/src/CustomerProfile.js
new file mode 100644
index 000000000..f1a4ef1fa
--- /dev/null
+++ b/src/CustomerProfile.js
@@ -0,0 +1,96 @@
+import React, { useState, useEffect } from "react";
+
+const CustomerProfile = (props) => {
+ const [customerProfileData, setCustomerProfileData] = useState(null);
+ const [isLoading, setIsLoading] = useState(true);
+
+ useEffect(() => {
+ setIsLoading(true);
+ fetch(`https://cyf-react.glitch.me/customers/${props.id}`)
+ .then((res) => {
+ if (!res.ok) {
+ throw new Error(`${res.status} ${res.statusText}`);
+ }
+ return res.json();
+ })
+ .then((data) => {
+ setCustomerProfileData(data);
+ setIsLoading(false);
+ })
+ .catch((error) => {
+ console.log(error);
+ setIsLoading(false);
+ });
+ }, [props.id]);
+
+ if (isLoading) {
+ return
+ 
+
+ );
+};
+
+export default Heading;
+
+// The import React from "react"; statement imports the React library, which is necessary to define and use React components.
+// The const Heading = () => { ... } syntax defines a functional component called Heading. Functional components are
+// stateless and don't have their own internal state. They receive props as input and return JSX (JavaScript XML) to describe
+// the component's structure and content. The component's return statement begins with a element, which represents
+// the header section of the webpage. Inside the element, there is an element with the className "App-header".
+// This class can be used for styling purposes and is likely defined in a CSS file or a CSS-in-JS solution like
+// styled-components. Within the element, there is an element with the className "logo-title". This is the
+// main heading of the hotel website, displaying the text "CYF Hotel". The class "logo-title" can be used to style this
+// heading element. Following the
+ {props.orderType}:{" "}
+ {orders}{" "}
+
+ );
+};
+
+export default Order;
+
+// The code imports React and the useState hook from the "react" library. The useState hook is a built-in React hook that
+// allows functional components to manage state. The code also imports a component called "RestaurantButton" from a file
+// called "RestaurantButton.js". This component represents a button used to place an order in the restaurant. The
+// functional component Order is defined, which takes in props as its parameter. The props object is used to pass data
+// from the parent component to this component. Inside the Order component, the useState hook is used to initialize a
+// state variable called orders with an initial value of 0. The useState hook returns an array with two elements: the
+// current state value (orders) and a function (setOrders) to update that state value. The orderOne function is defined,
+// which increments the orders state value by 1 using the setOrders function provided by the useState hook. It uses the
+// functional form of setOrders, which takes the previous state value (prevOrders) as input and returns the updated
+//state value. The return statement renders JSX, which represents the structure and content of the component. It returns
+// a element with the className "list-group-item". Inside the element, it displays the props.orderType,
+// which represents the type of the order, likely passed as a prop from the parent component. Next, it renders a
+// element with the className "badge badge-primary badge-pill", which is likely used for styling purposes. Inside the
+// element, it displays the value of the orders state variable, representing the number of orders. Finally, it
+// renders the RestaurantButton component and passes the orderOne function as a prop called orderOne. This allows the
+// RestaurantButton component to trigger the orderOne function when the button is clicked. The Order component is
+// exported as the default export using the export default Order; statement, allowing it to be imported and used in
+// other files.
diff --git a/src/OutcomeSearch.js b/src/OutcomeSearch.js
new file mode 100644
index 000000000..c4a9c906c
--- /dev/null
+++ b/src/OutcomeSearch.js
@@ -0,0 +1,84 @@
+import React from "react";
+import SearchResult from "./SearchResult";
+import moment from "moment";
+
+const calculateTotalNights = (checkInDate, checkOutDate) => {
+ const a = moment(checkInDate, "YYYY-MM-DD");
+ const b = moment(checkOutDate, "YYYY-MM-DD");
+ return b.diff(a, "days");
+};
+
+const OutcomeSearch = (props) => {
+ return (
+
Loading customer profile...
;
+ }
+
+ if (!customerProfileData) {
+ return null; // or render a message indicating that the customer profile is not available
+ }
+
+ return (
+
+
+ );
+};
+
+export default CustomerProfile;
+
+// This code is a React component called CustomerProfile. The component imports the necessary
+// dependencies, React, useState, and useEffect, from the "react" library. The CustomerProfile
+// component is defined as a functional component using an arrow function. Inside the component,
+// two state variables are declared using the useState hook: customerProfileData represents the
+// customer profile information and is initialized as null. isLoading is a boolean flag that indicates
+// whether the data is still loading and is initialized as true. The useEffect hook is used to fetch
+// the customer profile data from the server when the component is rendered or when the props.id
+// value changes. It sets the isLoading flag to true to indicate that the data is being loaded.
+
+// Inside the useEffect hook, a fetch request is made to the specified URL
+// (https://cyf-react.glitch.me/customers/${props.id}) to fetch the customer profile data. The
+// response is checked for errors, and if there are none, the response is parsed as JSON using the
+// res.json() method. If the data is successfully retrieved, the setCustomerProfileData function is
+// called to update the customerProfileData state variable with the fetched data, and the isLoading
+// flag is set to false to indicate that the data loading is complete. If there is an error during
+// the fetch request or parsing the response, the error is logged to the console, and the isLoading
+// flag is set to false. The component checks the value of isLoading. If it is true, a loading message
+// is displayed: Customer Profile
++ Customer ID:{" "} + {customerProfileData?.id} +
++ Customer Name:{" "} + + {customerProfileData?.title} {customerProfileData?.firstName}{" "} + {customerProfileData?.surname} + +
++ Customer Email:{" "} + {customerProfileData?.email} +
++ Customer Phone Number:{" "} + + {customerProfileData?.phoneNumber} + +
++ VIP :{" "} + + {customerProfileData?.vip ? "Yes" : "No"} + +
+Loading customer profile...
.
+
+// If customerProfileData is null, the component returns null, indicating that the customer profile
+// is not available. This can be modified to render a message indicating the absence of customer
+// profile data. If the data is loaded and customerProfileData is not null, the component renders
+// the customer profile information in an HTML structure. The customer profile is displayed with the
+// customer ID, name, email, phone number, and a flag indicating if the customer is a VIP. The values
+// are accessed from the customerProfileData object using optional chaining (?.) to handle cases where
+// the data is not yet available. Finally, the CustomerProfile component is exported as the default
+// export of the module, allowing it to be imported and used in other parts of the application.
diff --git a/src/Footer.js b/src/Footer.js
new file mode 100644
index 000000000..f1b240b00
--- /dev/null
+++ b/src/Footer.js
@@ -0,0 +1,30 @@
+import React from "react";
+
+const Footer = (props) => {
+ return (
+
+ );
+};
+
+export default Footer;
+
+// This code is a React functional component called "Footer." It imports the React library and defines the Footer
+//component using an arrow function syntax. The component takes in a single parameter called "props," which is an
+// object that contains properties passed from the parent component. In this case, it expects a property called
+// "contactDetails" which should be an array. Inside the component's return statement, there is an HTML-like syntax.
+// This is called JSX (JavaScript XML) and allows you to write HTML-like code within your JavaScript. JSX is transpiled
+// into regular JavaScript by tools like Babel. The return statement contains a footer element. Inside the footer,
+// there is an unordered list element (ul) with a class name of "footer-contact." Within the ul element, there is a
+// JavaScript expression inside curly braces: {props.contactDetails.map((element, index) => (...)}. This expression maps
+// over the elements in the contactDetails array and returns a list item (li) for each element. The map function is used
+// to transform each element of the array into a new element, in this case, a list item. Each list item has a unique key
+// assigned using the key={index} attribute. The key is necessary to help React efficiently update the component when
+// the list changes. The content of each list item is the value of the current element in the contactDetails array.
+//Finally, the component is exported using the export default syntax, which allows other files to import and use the Footer
+// component.
\ No newline at end of file
diff --git a/src/Heading.js b/src/Heading.js
new file mode 100644
index 000000000..25bdb9424
--- /dev/null
+++ b/src/Heading.js
@@ -0,0 +1,26 @@
+import React from "react";
+
+const Heading = () => {
+ return (
+ CYF Hotel
+
+ element with the className "logo-title". This is the
+// main heading of the hotel website, displaying the text "CYF Hotel". The class "logo-title" can be used to style this
+// heading element. Following the element, there is an ![]()
element with the className "logo-hotel". This image
+// represents the hotel's logo. The src attribute points to the location of the logo image file, which is "../images/hotel-logo.svg"
+// relative to the current file. The alt attribute specifies alternative text to be displayed if the image fails to load.
+// Finally, the component is exported as the default export using the export default Heading; statement. This allows
+// other files to import and use this component as needed.
\ No newline at end of file
diff --git a/src/InfoCard.js b/src/InfoCard.js
new file mode 100644
index 000000000..45b14147f
--- /dev/null
+++ b/src/InfoCard.js
@@ -0,0 +1,35 @@
+import React from "react";
+import TouristInfoCard from "./TouristInfoCard";
+
+const InfoCard = () => {
+ return (
+
+
+
+ );
+};
+
+export default InfoCard;
+
+// The code imports the React library, which is necessary for writing React components. It imports the TouristInfoCard
+// component from a file named TouristInfoCard.js located in the same directory as the current file. The InfoCard component
+// is defined as an arrow function. Inside the function, three instances of the TouristInfoCard component are rendered. Each
+// TouristInfoCard component receives props such as image, title, description, and link with specific values. The InfoCard
+// component is exported as the default export of this file, which means it can be imported and used in other files.
\ No newline at end of file
diff --git a/src/Order.js b/src/Order.js
new file mode 100644
index 000000000..e0a2197dc
--- /dev/null
+++ b/src/Order.js
@@ -0,0 +1,39 @@
+import React, { useState } from "react";
+import RestaurantButton from "./RestaurantButton.js";
+
+const Order = (props) => {
+ const [orders, setOrders] = useState(0);
+
+ const orderOne = () => {
+ setOrders((prevOrders) => prevOrders + 1);
+ };
+
+ return (
+
+
+
+
+
+ );
+};
+
+export default OutcomeSearch;
+
+// It is a React component called OutcomeSearch that renders a table displaying search results.
+// The component imports the SearchResult component from the "./SearchResult" file and the moment
+// library for date calculations. The code defines a helper function calculateTotalNights that takes
+// checkInDate and checkOutDate as parameters. It uses the moment library to calculate the number
+// of nights between the two dates. The function converts the date strings to moment objects and
+// then uses the diff() method with the "days" unit to calculate the difference in days. Inside the
+// OutcomeSearch component, a table is rendered with the class "table table-hover table-bordered".
+// The table has a header row (thead) with columns representing different information about the
+// search results, such as ID, Title, First Name, Last Name, Email, Room ID, Check-in Date, Check-out
+// Date, Total Nights, and Profiles. The component uses the props.results.map() function to iterate
+// over the results array passed as a prop. For each result object, it renders a SearchResult
+// component, passing various props including id, title, firstName, surname, email, roomId,
+// checkInDate, and checkOutDate. The key prop is set to the id value to provide a unique identifier
+// for each result.
+
+// The calculateTotalNights function is invoked within the map() function to calculate the diff
+// (total nights) between the checkInDate and checkOutDate for each result. The diff value is then
+// passed as a prop to the SearchResult component. The OutcomeSearch component also receives a
+// setCustomerId prop, which is passed to the SearchResult component for further handling. Finally,
+// the OutcomeSearch component is exported as the default export, allowing it to be imported and
+// used in other parts of the application.
diff --git a/src/Restaurant.js b/src/Restaurant.js
index ecb2b43a2..add2769d6 100644
--- a/src/Restaurant.js
+++ b/src/Restaurant.js
@@ -1,17 +1,31 @@
import React from "react";
+import Order from "./Order.js";
const Restaurant = () => {
- const pizzas = 0;
+ const orderTypes = ["Pizzas", "Chocolate cake", "Salads"];
+
return (
- | ID | +Title | +First Name | +Last Name | +Room ID | +Check in Date | +Check out Date | +Total Nights | +Profiles | +
|---|
+
Restaurant Orders
--
-
- - Pizzas: {pizzas} - -
element with the CSS class "list-group text-center". Inside the
, there is
+// an element displaying the heading "Restaurant Orders". To render the list of orders, the
+// component uses the orderTypes.map() function, which iterates over each element in the
+// orderTypes array. For each orderType, it creates an instance of the Order component, passing
+// the orderType as a prop. The key prop is assigned the index value to provide a unique identifier
+// for each order. By mapping over the orderTypes array and rendering an Order component for each
+// order type, the Restaurant component dynamically generates the list of orders based on the orderTypes
+// array. Finally, the Restaurant component is exported as the default export, allowing it to be
+// imported and used in other parts of the application.
diff --git a/src/RestaurantButton.js b/src/RestaurantButton.js
new file mode 100644
index 000000000..788553be0
--- /dev/null
+++ b/src/RestaurantButton.js
@@ -0,0 +1,24 @@
+import React from "react";
+
+const RestaurantButton = (props) => {
+ return (
+