From 5f3d9282650e798b546cf0b67720629ae5356063 Mon Sep 17 00:00:00 2001 From: nsaimk <103388334+nsaimk@users.noreply.github.com> Date: Tue, 4 Jul 2023 18:58:19 +0100 Subject: [PATCH 01/26] 1. Extract the search button in its own component --- src/Search.js | 3 ++- src/components/SearchButton.jsx | 7 +++++++ 2 files changed, 9 insertions(+), 1 deletion(-) create mode 100644 src/components/SearchButton.jsx diff --git a/src/Search.js b/src/Search.js index 7bd5871c0..9456858ae 100644 --- a/src/Search.js +++ b/src/Search.js @@ -1,4 +1,5 @@ import React from "react"; +import SearchButton from './components/SearchButton' const Search = () => { return ( @@ -17,7 +18,7 @@ const Search = () => { className="form-control" placeholder="Customer name" /> - + diff --git a/src/components/SearchButton.jsx b/src/components/SearchButton.jsx new file mode 100644 index 000000000..4437dcdbf --- /dev/null +++ b/src/components/SearchButton.jsx @@ -0,0 +1,7 @@ +import React from "react"; + +const SearchButton = () => { + return ; +} + +export default SearchButton; \ No newline at end of file From 7d3a58213b16687580e77fa7408b6baf970dd6fb Mon Sep 17 00:00:00 2001 From: nsaimk <103388334+nsaimk@users.noreply.github.com> Date: Tue, 4 Jul 2023 19:10:56 +0100 Subject: [PATCH 02/26] 2. Extract the header in its own component --- src/App.js | 4 +++- src/components/Heading.jsx | 12 ++++++++++++ 2 files changed, 15 insertions(+), 1 deletion(-) create mode 100644 src/components/Heading.jsx diff --git a/src/App.js b/src/App.js index 953c98560..d446e8b29 100644 --- a/src/App.js +++ b/src/App.js @@ -1,12 +1,14 @@ import React from "react"; + import Bookings from "./Bookings"; import "./App.css"; +import Heading from "./components/Heading"; const App = () => { return (
-
CYF Hotel
+
); diff --git a/src/components/Heading.jsx b/src/components/Heading.jsx new file mode 100644 index 000000000..002ff569b --- /dev/null +++ b/src/components/Heading.jsx @@ -0,0 +1,12 @@ +import React from "react"; + +const Heading = () => { + return ( +
+ + CYF Hotel +
+ ); +}; + +export default Heading; From 326d85127c2b3defcb7992d82aaa1da33b0627db Mon Sep 17 00:00:00 2001 From: nsaimk <103388334+nsaimk@users.noreply.github.com> Date: Tue, 4 Jul 2023 19:12:39 +0100 Subject: [PATCH 03/26] Necessary changes for style --- src/App.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/App.css b/src/App.css index 05fe2d52e..c90809b88 100644 --- a/src/App.css +++ b/src/App.css @@ -55,3 +55,9 @@ tr { .card { width: 18rem; } + +/* My changes */ + +.App-header img{ + width: 25px; +} \ No newline at end of file From 304855ea0584a3d3f26df716ede4ae5b2715dcaa Mon Sep 17 00:00:00 2001 From: nsaimk <103388334+nsaimk@users.noreply.github.com> Date: Tue, 4 Jul 2023 20:02:29 +0100 Subject: [PATCH 04/26] 3. Create and use a new component to show info cards --- src/App.js | 2 + src/components/TouristInfoCards.jsx | 67 +++++++++++++++++++++++++++++ src/data/infoCards.json | 0 3 files changed, 69 insertions(+) create mode 100644 src/components/TouristInfoCards.jsx create mode 100644 src/data/infoCards.json diff --git a/src/App.js b/src/App.js index d446e8b29..ee8a4b506 100644 --- a/src/App.js +++ b/src/App.js @@ -4,11 +4,13 @@ import React from "react"; import Bookings from "./Bookings"; import "./App.css"; import Heading from "./components/Heading"; +import TouristInfoCards from "./components/TouristInfoCards" const App = () => { return (
+
); diff --git a/src/components/TouristInfoCards.jsx b/src/components/TouristInfoCards.jsx new file mode 100644 index 000000000..154f63d4e --- /dev/null +++ b/src/components/TouristInfoCards.jsx @@ -0,0 +1,67 @@ +import React from "react"; + +const TouristInfoCards = () => { + return ( +
+
+ ... +
+
Glasgow
+

+ Glasgow is Scotland's largest city. It is known for its vibrant arts + scene and cultural offerings. +

+ +
+
+
+ ... +
+
Manchester
+

+ Manchester is a dynamic city in England. It is famous for its + football clubs and industrial heritage. +

+ +
+
+
+ ... +
+
London
+

+ London is the capital of the United Kingdom. It is renowned for its + iconic landmarks such as Big Ben and the Tower of London. +

+ +
+
+
+ ); +}; + +export default TouristInfoCards; diff --git a/src/data/infoCards.json b/src/data/infoCards.json new file mode 100644 index 000000000..e69de29bb From c2f9714ebbf1406cc988b6abfd9d2431364f3a5a Mon Sep 17 00:00:00 2001 From: nsaimk <103388334+nsaimk@users.noreply.github.com> Date: Tue, 4 Jul 2023 21:09:51 +0100 Subject: [PATCH 05/26] 4. Create a Footer component --- src/App.js | 10 ++++++++-- src/components/Footer.jsx | 15 +++++++++++++++ 2 files changed, 23 insertions(+), 2 deletions(-) create mode 100644 src/components/Footer.jsx diff --git a/src/App.js b/src/App.js index ee8a4b506..81fb165d7 100644 --- a/src/App.js +++ b/src/App.js @@ -1,17 +1,23 @@ import React from "react"; - import Bookings from "./Bookings"; import "./App.css"; import Heading from "./components/Heading"; -import TouristInfoCards from "./components/TouristInfoCards" +import TouristInfoCards from "./components/TouristInfoCards"; +import Footer from "./components/Footer"; const App = () => { + const footerInfo = [ + "123 Fake Street, London, E1 4UD", + "hello@fakehotel.com", + "0123 456789", + ]; return (
+
); }; diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx new file mode 100644 index 000000000..aa9c1bc2f --- /dev/null +++ b/src/components/Footer.jsx @@ -0,0 +1,15 @@ +import React from "react"; + +const Footer = ({ footerInfo }) => { + return ( + + ); +}; + +export default Footer; From 476fb2e7210d908b228a268ba367c3f57536380c Mon Sep 17 00:00:00 2001 From: nsaimk <103388334+nsaimk@users.noreply.github.com> Date: Tue, 4 Jul 2023 21:26:22 +0100 Subject: [PATCH 06/26] 5. Create a table to show hotel bookings --- src/Bookings.js | 3 ++- src/components/SearchResults.jsx | 42 ++++++++++++++++++++++++++++++++ 2 files changed, 44 insertions(+), 1 deletion(-) create mode 100644 src/components/SearchResults.jsx diff --git a/src/Bookings.js b/src/Bookings.js index e0d911b13..4d21f4b46 100644 --- a/src/Bookings.js +++ b/src/Bookings.js @@ -1,6 +1,6 @@ import React from "react"; import Search from "./Search.js"; -// import SearchResults from "./SearchResults.js"; +import SearchResults from "./components/SearchResults.jsx"; // import FakeBookings from "./data/fakeBookings.json"; const Bookings = () => { @@ -12,6 +12,7 @@ const Bookings = () => {
+ {/* */}
diff --git a/src/components/SearchResults.jsx b/src/components/SearchResults.jsx new file mode 100644 index 000000000..7888feff9 --- /dev/null +++ b/src/components/SearchResults.jsx @@ -0,0 +1,42 @@ +import React from "react"; + +const SearchResults = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
IDTitleFirstLastEmailRoom IDCheck In DateCheck Out Date
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
+ ); +}; + +export default SearchResults; From 636f5dda3a93a0eaa32626a32214b9131cd9c621 Mon Sep 17 00:00:00 2001 From: nsaimk <103388334+nsaimk@users.noreply.github.com> Date: Tue, 4 Jul 2023 22:22:38 +0100 Subject: [PATCH 07/26] 6. Show more bookings in the table --- src/Bookings.js | 6 ++---- src/components/SearchResults.jsx | 34 ++++++++++++++------------------ 2 files changed, 17 insertions(+), 23 deletions(-) diff --git a/src/Bookings.js b/src/Bookings.js index 4d21f4b46..908b30dc3 100644 --- a/src/Bookings.js +++ b/src/Bookings.js @@ -1,19 +1,17 @@ import React from "react"; import Search from "./Search.js"; import SearchResults from "./components/SearchResults.jsx"; -// import FakeBookings from "./data/fakeBookings.json"; +import FakeBookings from "./data/fakeBookings.json"; const Bookings = () => { const search = searchVal => { console.info("TO DO!", searchVal); }; - return (
- - {/* */} +
); diff --git a/src/components/SearchResults.jsx b/src/components/SearchResults.jsx index 7888feff9..012f7dff6 100644 --- a/src/components/SearchResults.jsx +++ b/src/components/SearchResults.jsx @@ -1,6 +1,6 @@ import React from "react"; -const SearchResults = () => { +const SearchResults = ({results}) => { return ( @@ -16,24 +16,20 @@ const SearchResults = () => { - - - - - - - - - - - - - - - - - - + {results.map((item, index) => { + return ( + + + + + + + + + + + ); + })}
1MarkOtto@mdo
2JacobThornton@fat
3Larrythe Bird@twitter
{index + 1}{item.title}{item.firstName}{item.surname}{item.email}{item.roomId}{item.checkInDate}{item.checkOutDate}
); From f2b13f1488d8901b0f9fc2fe766a43a4a87903f1 Mon Sep 17 00:00:00 2001 From: nsaimk <103388334+nsaimk@users.noreply.github.com> Date: Tue, 4 Jul 2023 22:45:58 +0100 Subject: [PATCH 08/26] 7. Calculate and show the number of nights for each booking --- package-lock.json | 9 +++++++++ package.json | 1 + src/components/SearchResults.jsx | 5 +++++ 3 files changed, 15 insertions(+) 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/components/SearchResults.jsx b/src/components/SearchResults.jsx index 012f7dff6..bc9974076 100644 --- a/src/components/SearchResults.jsx +++ b/src/components/SearchResults.jsx @@ -1,4 +1,5 @@ import React from "react"; +import moment from "moment"; const SearchResults = ({results}) => { return ( @@ -13,10 +14,13 @@ const SearchResults = ({results}) => { Room ID Check In Date Check Out Date + Diff Date {results.map((item, index) => { + var a = moment(item.checkInDate); + var b = moment(item.checkOutDate); return ( {index + 1} @@ -27,6 +31,7 @@ const SearchResults = ({results}) => { {item.roomId} {item.checkInDate} {item.checkOutDate} + {b.diff(a, "days")} ); })} From b78a16923afedbdbdb9ac2ccad52e3cf87c6eda8 Mon Sep 17 00:00:00 2001 From: nsaimk <103388334+nsaimk@users.noreply.github.com> Date: Tue, 4 Jul 2023 22:47:41 +0100 Subject: [PATCH 09/26] 8. Render the Restaurant component --- src/App.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/App.js b/src/App.js index 81fb165d7..77bc99d35 100644 --- a/src/App.js +++ b/src/App.js @@ -5,6 +5,7 @@ import "./App.css"; import Heading from "./components/Heading"; import TouristInfoCards from "./components/TouristInfoCards"; import Footer from "./components/Footer"; +import Restaurant from "./Restaurant" const App = () => { const footerInfo = [ @@ -17,6 +18,7 @@ const App = () => { +