From 26b54d33a70a694bacedc424ad3a064702c4f807 Mon Sep 17 00:00:00 2001
From: Junitalama <113072416+Junitalama@users.noreply.github.com>
Date: Wed, 14 Jun 2023 19:29:22 +0100
Subject: [PATCH 09/32] Update App.css
---
src/App.css | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/App.css b/src/App.css
index 94fb1e8bd..8530a874e 100644
--- a/src/App.css
+++ b/src/App.css
@@ -103,7 +103,7 @@ font-size: 2rem;
flex-direction: column;
}
.welcome-img{
- margin: auto;
+ margin: 0;
}
From 1dfa9886aadf65c7e911896d15c59bdbceb8ea23 Mon Sep 17 00:00:00 2001
From: Junitalama <113072416+Junitalama@users.noreply.github.com>
Date: Wed, 14 Jun 2023 19:40:20 +0100
Subject: [PATCH 10/32] Update App.css
---
src/App.css | 18 ++++++++++++------
1 file changed, 12 insertions(+), 6 deletions(-)
diff --git a/src/App.css b/src/App.css
index 8530a874e..dbf757481 100644
--- a/src/App.css
+++ b/src/App.css
@@ -3,11 +3,11 @@ body {
}
.App-header {
background-color: black;
- height: 40px;
+ height: 60px;
color: white;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
- margin-bottom: 1rem;
+ margin-bottom: 2rem;
}
.App-title {
@@ -40,8 +40,8 @@ tr {
}
.logo {
- height: 50px;
- width: 90px;
+ height: 70px;
+ width: 100px;
}
header {
@@ -56,10 +56,16 @@ h2 {
color: plum;
}
.card-img-top {
- height: 20rem;
+ height: 25rem;
width: 25rem;
}
+.card-title{
+ color: white;
+ background-color: black;
+ font-size: 1rem;
+}
+
.card-text {
display: flex;
flex-direction: column;
@@ -83,7 +89,7 @@ font-size: 2rem;
.welcome-img{
display: flex;
- min-width: auto;
+ max-width: auto;
height: 25rem;
border: 2px solid brown;
margin: 0rem 4rem 1rem 4rem;
From cc961b1f35e05c0205c73e3e4f9d295b1cd1bd4c Mon Sep 17 00:00:00 2001
From: Junitalama <113072416+Junitalama@users.noreply.github.com>
Date: Wed, 14 Jun 2023 19:57:10 +0100
Subject: [PATCH 11/32] Update App.css
---
src/App.css | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/App.css b/src/App.css
index dbf757481..839a9a992 100644
--- a/src/App.css
+++ b/src/App.css
@@ -57,7 +57,7 @@ h2 {
}
.card-img-top {
height: 25rem;
- width: 25rem;
+ width: 28rem;
}
.card-title{
From e42ed6c55f6b0ef468c081812c6bbe09c458e84b Mon Sep 17 00:00:00 2001
From: Junitalama <113072416+Junitalama@users.noreply.github.com>
Date: Thu, 15 Jun 2023 19:45:13 +0100
Subject: [PATCH 12/32] updated exercise 7
---
package-lock.json | 9 +++++++++
package.json | 1 +
src/App.css | 18 ++++++++++++++++--
src/App.js | 10 ++++++++--
src/Bookings.js | 6 +++---
src/Footer.js | 17 +++++++++++++++++
src/SearchResults.js | 44 ++++++++++++++++++++++++++++++++++++++++++++
7 files changed, 98 insertions(+), 7 deletions(-)
create mode 100644 src/Footer.js
create mode 100644 src/SearchResults.js
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.css b/src/App.css
index 839a9a992..5972d8ca6 100644
--- a/src/App.css
+++ b/src/App.css
@@ -102,7 +102,18 @@ font-size: 2rem;
color: blueviolet;
}
+.table {
+ background-color: black;
+
+}
+
+th{
+ color: brown;
+}
+td{
+ color: beige;
+}
@media only screen and (max-width: 600px) {
.card {
@@ -111,7 +122,10 @@ font-size: 2rem;
.welcome-img{
margin: 0;
-
-}
+ }
+ .table {
+ width: 40%;
+ font-size: 10px;;
+ }
}
diff --git a/src/App.js b/src/App.js
index 051265b0a..d2b5bfd75 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,13 +3,19 @@ import Heading from "./Heading";
import TouristInfoCard from "./TouristInfoCards";
import Bookings from "./Bookings";
import "./App.css";
+import Footer from "./Footer";
const App = () => {
- return (
-
+ const address = [
+ "123 Fake Street, London, E1 4UD",
+ "hello@fakehotel.com",
+ "0123 456789",
+ ]
+ return (
);
};
diff --git a/src/Bookings.js b/src/Bookings.js
index e0d911b13..8b519bb0b 100644
--- a/src/Bookings.js
+++ b/src/Bookings.js
@@ -1,7 +1,7 @@
import React from "react";
import Search from "./Search.js";
-// import SearchResults from "./SearchResults.js";
-// import FakeBookings from "./data/fakeBookings.json";
+import SearchResults from "./SearchResults.js";
+import FakeBookings from "./data/fakeBookings.json";
const Bookings = () => {
const search = searchVal => {
@@ -12,7 +12,7 @@ const Bookings = () => {
);
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.map((prop) => {
+ return {prop} ;
+ })}
+
+
+
+ );
+};
+
+export default Footer;
\ No newline at end of file
diff --git a/src/SearchResults.js b/src/SearchResults.js
new file mode 100644
index 000000000..c9e2066c3
--- /dev/null
+++ b/src/SearchResults.js
@@ -0,0 +1,44 @@
+import React from "react";
+import moment from "moment";
+
+const SearchResults = (props) => {
+ return (
+
+
+
+ Id
+ Title
+ First Name
+ Surname
+ Email
+ Room id
+ Check in date
+ Check out date
+ Stay nights
+
+
+
+ {props.results.map((result, index) => {
+ return (
+
+ {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 SearchResults;
From 97d86a056b46ef6d0544a4ac933badbdc54b63d2 Mon Sep 17 00:00:00 2001
From: Junitalama <113072416+Junitalama@users.noreply.github.com>
Date: Thu, 15 Jun 2023 22:36:24 +0100
Subject: [PATCH 13/32] exercise 8
---
src/App.js | 2 ++
src/TouristInfoCards.js | 2 +-
2 files changed, 3 insertions(+), 1 deletion(-)
diff --git a/src/App.js b/src/App.js
index d2b5bfd75..e267f81d4 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,6 +2,7 @@ import React from "react";
import Heading from "./Heading";
import TouristInfoCard from "./TouristInfoCards";
import Bookings from "./Bookings";
+import Restaurant from "./Restaurant"
import "./App.css";
import Footer from "./Footer";
@@ -15,6 +16,7 @@ const App = () => {
+
);
diff --git a/src/TouristInfoCards.js b/src/TouristInfoCards.js
index 67ed1bfcf..caec86f64 100644
--- a/src/TouristInfoCards.js
+++ b/src/TouristInfoCards.js
@@ -2,7 +2,7 @@ import React from "react";
const TouristInfoCard = () =>{
return
-
+
Explore The World With Us!!!
From 2f391bf14aec6422d6aa5041a90ded4f899d4a0d Mon Sep 17 00:00:00 2001
From: Junitalama <113072416+Junitalama@users.noreply.github.com>
Date: Mon, 26 Jun 2023 12:03:52 +0100
Subject: [PATCH 14/32] FORMATTED
---
src/Restaurant.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/Restaurant.js b/src/Restaurant.js
index ecb2b43a2..b70ea8cfc 100644
--- a/src/Restaurant.js
+++ b/src/Restaurant.js
@@ -1,13 +1,13 @@
import React from "react";
const Restaurant = () => {
- const pizzas = 0;
+ const Orders = 0;
return (
Restaurant Orders
- Pizzas: {pizzas} Add
+ Orders: {Orders} Add
From 123de2248c7d38b058666457ce9dfe3ce25f009c Mon Sep 17 00:00:00 2001
From: Junitalama <113072416+Junitalama@users.noreply.github.com>
Date: Mon, 26 Jun 2023 12:03:56 +0100
Subject: [PATCH 15/32] Update TouristInfoCards.js
---
src/TouristInfoCards.js | 119 ++++++++++++++++++++++++++++------------
1 file changed, 84 insertions(+), 35 deletions(-)
diff --git a/src/TouristInfoCards.js b/src/TouristInfoCards.js
index caec86f64..989fd11f7 100644
--- a/src/TouristInfoCards.js
+++ b/src/TouristInfoCards.js
@@ -1,38 +1,87 @@
import React from "react";
-const TouristInfoCard = () =>{
- return
-
-
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
-
-
-
-
+const TouristInfoCard = () => {
+ return (
+
+
+
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
+
+
+
+
+
+ );
+};
-
-
-
-}
-
-export default TouristInfoCard;
\ No newline at end of file
+export default TouristInfoCard;
From 8b696f84f192aa971a380a4b6b217cc97abe71cd Mon Sep 17 00:00:00 2001
From: Junitalama <113072416+Junitalama@users.noreply.github.com>
Date: Tue, 27 Jun 2023 12:07:01 +0100
Subject: [PATCH 16/32] level 2
---
src/App.css | 7 ++++++-
src/Order.js | 18 ++++++++++++++++++
src/Restaurant.js | 14 ++++++++------
src/RestaurentButton.js | 14 ++++++++++++++
4 files changed, 46 insertions(+), 7 deletions(-)
create mode 100644 src/Order.js
create mode 100644 src/RestaurentButton.js
diff --git a/src/App.css b/src/App.css
index 5972d8ca6..64e67a9cc 100644
--- a/src/App.css
+++ b/src/App.css
@@ -94,7 +94,12 @@ font-size: 2rem;
border: 2px solid brown;
margin: 0rem 4rem 1rem 4rem;
-
+}
+
+.order {
+ display: flex;
+ flex-direction: row;
+ gap: 5rem;
}
.welcome-text{
diff --git a/src/Order.js b/src/Order.js
new file mode 100644
index 000000000..24b99b306
--- /dev/null
+++ b/src/Order.js
@@ -0,0 +1,18 @@
+import React, {useState} from "react";
+import Button from "./RestaurentButton";
+
+const Order = ({orderType}) =>{
+ const [order, setOrder] = useState(0);
+ function orderOne() {
+ setOrder(order + 1);
+ }
+return(
+
+
+ {orderType}: {order}
+
+)
+}
+
+export default Order;
\ No newline at end of file
diff --git a/src/Restaurant.js b/src/Restaurant.js
index b70ea8cfc..1e7a914a1 100644
--- a/src/Restaurant.js
+++ b/src/Restaurant.js
@@ -1,17 +1,19 @@
import React from "react";
+import Order from "./Order";
+
const Restaurant = () => {
- const Orders = 0;
return (
Restaurant Orders
-
-
- Orders: {Orders} Add
-
+
);
-};
+
+ }
export default Restaurant;
diff --git a/src/RestaurentButton.js b/src/RestaurentButton.js
new file mode 100644
index 000000000..54a498793
--- /dev/null
+++ b/src/RestaurentButton.js
@@ -0,0 +1,14 @@
+import React from "react";
+
+const Button = ({orderOne}) => {
+
+ return (
+
+
+ Add
+
+
+ );
+};
+
+export default Button;
From bd96a2e14e1b499e151456ef4288a9b830eb2dac Mon Sep 17 00:00:00 2001
From: Junitalama <113072416+Junitalama@users.noreply.github.com>
Date: Wed, 28 Jun 2023 14:20:25 +0100
Subject: [PATCH 17/32] 15
---
README.md | 2 +-
src/App.css | 3 +++
src/Bookings.js | 7 ++++---
src/SearchResults.js | 31 ++++++++++++++++++++++++-------
4 files changed, 32 insertions(+), 11 deletions(-)
diff --git a/README.md b/README.md
index 5711ee7f8..fb5c3420d 100644
--- a/README.md
+++ b/README.md
@@ -127,7 +127,7 @@ A hotel booking application in React. Homework for the [CodeYourFuture React mod
#### 15. Highlight booking row when clicked
**Instructions:** Within the `
` component or its child components, add an `onClick` handler to each row in the table (hint: on the `
` element). When clicked, the row is "selected" and highlighted with a different colour. When clicked again, the row is unselected and the coloured highlighting is removed.
-
+.
**Hint:** Use a new state variable for each row to record if the row is selected or not, and use this value to set a class to the `className` prop of the row.
**Test:** Verify that each row of your table can be highlighted (on and off) independently when being clicked.
diff --git a/src/App.css b/src/App.css
index 64e67a9cc..65295bf12 100644
--- a/src/App.css
+++ b/src/App.css
@@ -119,6 +119,9 @@ th{
td{
color: beige;
}
+.selected {
+ background-color: green;
+}
@media only screen and (max-width: 600px) {
.card {
diff --git a/src/Bookings.js b/src/Bookings.js
index 8b519bb0b..d353f0ae4 100644
--- a/src/Bookings.js
+++ b/src/Bookings.js
@@ -1,10 +1,11 @@
-import React from "react";
+import React, {useState} from "react";
import Search from "./Search.js";
import SearchResults from "./SearchResults.js";
import FakeBookings from "./data/fakeBookings.json";
const Bookings = () => {
- const search = searchVal => {
+ const[bookings, setBookings] = useState(FakeBookings)
+ const search = searchVal => {
console.info("TO DO!", searchVal);
};
@@ -12,7 +13,7 @@ const Bookings = () => {
);
diff --git a/src/SearchResults.js b/src/SearchResults.js
index c9e2066c3..fa14d8233 100644
--- a/src/SearchResults.js
+++ b/src/SearchResults.js
@@ -1,7 +1,18 @@
-import React from "react";
+import React,{useState} from "react";
import moment from "moment";
-const SearchResults = (props) => {
+function SearchResults(props) {
+ const [rowSelected, rowSetSelected] = useState([]);
+
+ function handleClick(index) {
+ if (rowSelected.includes(index)) {
+ rowSetSelected((selected) => {
+ return selected.filter((item) => item !== index);
+ });
+ } else {
+ rowSetSelected([...rowSelected, index]);
+ }
+ }
return (
@@ -20,7 +31,11 @@ const SearchResults = (props) => {
{props.results.map((result, index) => {
return (
-
+ handleClick(index)}
+ >
{result.id}
{result.title}
{result.firstName}
@@ -29,10 +44,12 @@ const SearchResults = (props) => {
{result.roomId}
{result.checkInDate}
{result.checkOutDate}
- {moment(result.checkOutDate).diff(
- moment(result.checkInDate),
- "days"
- )}
+
+ {moment(result.checkOutDate).diff(
+ moment(result.checkInDate),
+ "days"
+ )}
+
);
})}
From c821b788e228a1fa99bf3e05d586e8ee43e90f4a Mon Sep 17 00:00:00 2001
From: Junitalama <113072416+Junitalama@users.noreply.github.com>
Date: Fri, 7 Jul 2023 09:50:36 +0100
Subject: [PATCH 18/32] search bar done
---
src/Bookings.js | 27 ++++++++++++++++++++-------
1 file changed, 20 insertions(+), 7 deletions(-)
diff --git a/src/Bookings.js b/src/Bookings.js
index d353f0ae4..d24bf672f 100644
--- a/src/Bookings.js
+++ b/src/Bookings.js
@@ -1,19 +1,32 @@
-import React, {useState} from "react";
+import React, { useState, useEffect } from "react";
import Search from "./Search.js";
import SearchResults from "./SearchResults.js";
-import FakeBookings from "./data/fakeBookings.json";
const Bookings = () => {
- const[bookings, setBookings] = useState(FakeBookings)
- const search = searchVal => {
- console.info("TO DO!", searchVal);
- };
+ const [bookings, setBookings] = useState([]);
+
+ useEffect(() => {
+ fetch(`https://cyf-react.glitch.me`)
+ .then((res) => res.json())
+ .then((data) => {
+ console.log(data);
+ setBookings(data);
+ });
+ }, []);
+
+ const search = (searchVal) => {
+ const filteredBookings = bookings.filter((booking) =>
+ booking.firstName.toLowerCase().includes(searchVal.toLowerCase()) ||
+ booking.surname.toLowerCase().includes(searchVal.toLowerCase())
+ );
+ setBookings(filteredBookings);
+ }
return (
);
From c158c756ea8b91bf217eb4fa434ed002be86e129 Mon Sep 17 00:00:00 2001
From: Junitalama <113072416+Junitalama@users.noreply.github.com>
Date: Fri, 7 Jul 2023 09:50:59 +0100
Subject: [PATCH 19/32] added cuctomer profile components
---
src/CustomerProfile.js | 5 +++++
1 file changed, 5 insertions(+)
create mode 100644 src/CustomerProfile.js
diff --git a/src/CustomerProfile.js b/src/CustomerProfile.js
new file mode 100644
index 000000000..29ef1952d
--- /dev/null
+++ b/src/CustomerProfile.js
@@ -0,0 +1,5 @@
+import React from 'react';
+import SearchResults from './SearchResults';
+
+const customerProfile= (id) => {
+ return
\ No newline at end of file
From 839b9355a2dee2324c4b4601c0f9c31ca77e584b Mon Sep 17 00:00:00 2001
From: Junitalama <113072416+Junitalama@users.noreply.github.com>
Date: Fri, 7 Jul 2023 09:51:53 +0100
Subject: [PATCH 20/32] added usestate for search
---
src/Search.js | 19 +++++++++++++++----
1 file changed, 15 insertions(+), 4 deletions(-)
diff --git a/src/Search.js b/src/Search.js
index 85b954e44..1d3815898 100644
--- a/src/Search.js
+++ b/src/Search.js
@@ -1,7 +1,16 @@
-import React from "react";
+import React, { useState } from "react";
import SearchButton from "./SearchButton";
-const Search = () => {
+const Search = (props) => {
+ const [searchInput, setSearchInput] = useState("");
+
+ function handleSearchInput(e) {
+ setSearchInput(e.target.value);
+ }
+ function handleSubmit(e) {
+ e.preventDefault();
+ props.search(searchInput);
+ }
return (
@@ -9,16 +18,18 @@ const Search = () => {
From 6e6ae666f6d8179a46f271d455bee5d3a62d95b8 Mon Sep 17 00:00:00 2001
From: Junitalama <113072416+Junitalama@users.noreply.github.com>
Date: Fri, 7 Jul 2023 09:52:39 +0100
Subject: [PATCH 21/32] added new column and button to show customer profile
---
src/SearchResults.js | 2 ++
1 file changed, 2 insertions(+)
diff --git a/src/SearchResults.js b/src/SearchResults.js
index fa14d8233..cffb4e673 100644
--- a/src/SearchResults.js
+++ b/src/SearchResults.js
@@ -26,6 +26,7 @@ function SearchResults(props) {
Check in date
Check out date
Stay nights
+
Customer's Profile
@@ -50,6 +51,7 @@ function SearchResults(props) {
"days"
)}
+ Show Profile ` in the ` component. A customer profile should show the customer ID, their email, if they are VIP and their phone number in a list.
**Hint:** You need to use `useEffect` and the correct dependency array. You'll need to fetch customers data from the API every time a "Show profile" button is clicked and render it accordingly.
diff --git a/src/App.css b/src/App.css
index 8363f66eb..2ca0c5c08 100644
--- a/src/App.css
+++ b/src/App.css
@@ -124,6 +124,11 @@ td {
.profile {
background-color: burlywood;
}
+
+.customer {
+ border: 1px solid gray;
+ margin-bottom: 30px;
+}
@media only screen and (max-width: 600px) {
.card {
flex-direction: column;
From b914cc1ea1fea734946fd11d818031f947ec0f10 Mon Sep 17 00:00:00 2001
From: Junitalama <113072416+Junitalama@users.noreply.github.com>
Date: Fri, 7 Jul 2023 18:05:57 +0100
Subject: [PATCH 24/32] added props in customerprofile component
---
src/CustomerProfile.js | 21 ++++++++++++++++++---
1 file changed, 18 insertions(+), 3 deletions(-)
diff --git a/src/CustomerProfile.js b/src/CustomerProfile.js
index 29ef1952d..d910348e6 100644
--- a/src/CustomerProfile.js
+++ b/src/CustomerProfile.js
@@ -1,5 +1,20 @@
import React from 'react';
-import SearchResults from './SearchResults';
-const customerProfile= (id) => {
- return
\ No newline at end of file
+
+const CustomerProfile= (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} }
+
+
-
-
- Id
- Title
- First Name
- Surname
- Email
- Room id
- Check in date
- Check out date
- Stay nights
- Customer's Profile
-
-
-
- {props.results.map((result, index) => {
- return (
- handleClick(index)}
- >
- {result.id}
- {result.title}
- {result.firstName}
- {result.surname}
- {result.email}
- {result.roomId}
- {result.checkInDate}
- {result.checkOutDate}
-
- {moment(result.checkOutDate).diff(
- moment(result.checkInDate),
- "days"
- )}
-
- Show Profile
- );
- })}
-
-
+
+
+
+
+ Id
+ Title
+ First Name
+ Surname
+ Email
+ Room id
+ Check in date
+ Check out date
+ Stay nights
+ Customer's Profile
+
+
+
+ {props.results.map((result, index) => {
+ return (
+ handleClick(index)}
+ >
+ {result.id}
+ {result.title}
+ {result.firstName}
+ {result.surname}
+ {result.email}
+ {result.roomId}
+ {result.checkInDate}
+ {result.checkOutDate}
+
+ {moment(result.checkOutDate).diff(
+ moment(result.checkInDate),
+ "days"
+ )}
+
+
+
+ showProfile(result.id)}>
+ Show profile
+
+
+
+ );
+ })}
+
+
+
+
+ {orderType}: {order}
+
+ );
+};
-
- {orderType}: {order}
-
-)
-}
-
-export default Order;
\ No newline at end of file
+export default Order;
From 6f62c07e5bbe0e4b1c7b9eb7a17c563b9e1ba35a Mon Sep 17 00:00:00 2001
From: Junitalama <113072416+Junitalama@users.noreply.github.com>
Date: Fri, 7 Jul 2023 18:07:22 +0100
Subject: [PATCH 28/32] formatting
---
src/Restaurant.js | 4 +---
1 file changed, 1 insertion(+), 3 deletions(-)
diff --git a/src/Restaurant.js b/src/Restaurant.js
index 1e7a914a1..1a9baae2b 100644
--- a/src/Restaurant.js
+++ b/src/Restaurant.js
@@ -1,7 +1,6 @@
import React from "react";
import Order from "./Order";
-
const Restaurant = () => {
return (
@@ -13,7 +12,6 @@ const Restaurant = () => {
);
-
- }
+};
export default Restaurant;
From 46fe0f585b2a890ee028947061ccfd4f59a76827 Mon Sep 17 00:00:00 2001
From: Junitalama <113072416+Junitalama@users.noreply.github.com>
Date: Fri, 7 Jul 2023 18:07:30 +0100
Subject: [PATCH 29/32] formatting
---
src/RestaurentButton.js | 11 ++++-------
1 file changed, 4 insertions(+), 7 deletions(-)
diff --git a/src/RestaurentButton.js b/src/RestaurentButton.js
index 54a498793..75090accf 100644
--- a/src/RestaurentButton.js
+++ b/src/RestaurentButton.js
@@ -1,13 +1,10 @@
import React from "react";
-const Button = ({orderOne}) => {
-
+const Button = ({ orderOne }) => {
return (
-
-
- Add
-
-
+
+ Add
+
);
};
From 87a7bf458057a28c3ee9603b725318c856312440 Mon Sep 17 00:00:00 2001
From: Junitalama <113072416+Junitalama@users.noreply.github.com>
Date: Fri, 7 Jul 2023 18:07:39 +0100
Subject: [PATCH 30/32] formatting
---
src/Search.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/Search.js b/src/Search.js
index 1d3815898..4691377fa 100644
--- a/src/Search.js
+++ b/src/Search.js
@@ -29,7 +29,7 @@ const Search = (props) => {
className="form-control"
placeholder="Customer name"
/>
-
+
+ "123 Fake Street, London, E1 4UD",
+ "hello@fakehotel.com",
+ "0123 456789",
+ ];
+ return (
+
);
};
diff --git a/src/Bookings.js b/src/Bookings.js
index d24bf672f..7d271e6c7 100644
--- a/src/Bookings.js
+++ b/src/Bookings.js
@@ -4,28 +4,37 @@ import SearchResults from "./SearchResults.js";
const Bookings = () => {
const [bookings, setBookings] = useState([]);
+ const [loading, setLoading] = useState(true);
useEffect(() => {
- fetch(`https://cyf-react.glitch.me`)
- .then((res) => res.json())
+ 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);
- }
+ const filteredBookings = bookings.filter(
+ (booking) =>
+ booking.firstName.toLowerCase().includes(searchVal.toLowerCase()) ||
+ booking.surname.toLowerCase().includes(searchVal.toLowerCase())
+ );
+ setBookings(filteredBookings);
+ };
return (
+
{loading ?
Loading...
: null}
From c8c6cef5f0d7197fcf16a3d33402b416847bb6e0 Mon Sep 17 00:00:00 2001
From: Junitalama <113072416+Junitalama@users.noreply.github.com>
Date: Mon, 10 Jul 2023 23:50:06 +0100
Subject: [PATCH 32/32] formatted
---
src/CustomerProfile.js | 33 +++++++++++++++------------------
1 file changed, 15 insertions(+), 18 deletions(-)
diff --git a/src/CustomerProfile.js b/src/CustomerProfile.js
index d910348e6..acdb5b953 100644
--- a/src/CustomerProfile.js
+++ b/src/CustomerProfile.js
@@ -1,20 +1,17 @@
-import React from 'react';
+import React from "react";
+const CustomerProfile = (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} }
+
+
+ );
+};
-const CustomerProfile= (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 CustomerProfile;
\ No newline at end of file
+export default CustomerProfile;
+ 
+ 
+ 
+