From 18204c3eaf12a5be1a8e0a568c7f92c6a58ec243 Mon Sep 17 00:00:00 2001 From: AndriusIsin Date: Tue, 13 Jun 2023 20:12:12 +0100 Subject: [PATCH 01/10] 7 level --- package-lock.json | 9 +++++++++ package.json | 1 + src/App.js | 9 ++++++--- src/Bookings.js | 8 ++++---- src/Footer.js | 18 ++++++++++++++++++ src/Heading.js | 13 +++++++++++++ src/Search.js | 5 ++--- src/SearchButton.js | 5 +++++ src/SearchResults.js | 11 +++++++++++ src/TableHead.js | 18 ++++++++++++++++++ src/TableInfo.js | 23 +++++++++++++++++++++++ src/TouristInfoCards.js | 39 +++++++++++++++++++++++++++++++++++++++ 12 files changed, 149 insertions(+), 10 deletions(-) create mode 100644 src/Footer.js create mode 100644 src/Heading.js create mode 100644 src/SearchButton.js create mode 100644 src/SearchResults.js create mode 100644 src/TableHead.js create mode 100644 src/TableInfo.js create mode 100644 src/TouristInfoCards.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.js b/src/App.js index 953c98560..04b5e49bb 100644 --- a/src/App.js +++ b/src/App.js @@ -1,13 +1,16 @@ import React from "react"; - import Bookings from "./Bookings"; import "./App.css"; - +import Heading from "./Heading"; +import Footer from "./Footer"; +import TouristInfoCards from "./TouristInfoCards"; const App = () => { return (
-
CYF Hotel
+ + +
); }; diff --git a/src/Bookings.js b/src/Bookings.js index e0d911b13..fc2879c14 100644 --- a/src/Bookings.js +++ b/src/Bookings.js @@ -1,10 +1,10 @@ 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 => { + const search = (searchVal) => { console.info("TO DO!", searchVal); }; @@ -12,7 +12,7 @@ const Bookings = () => {
- {/* */} +
); diff --git a/src/Footer.js b/src/Footer.js new file mode 100644 index 000000000..473b71fae --- /dev/null +++ b/src/Footer.js @@ -0,0 +1,18 @@ +const ContactDetails = [ + "123 Fake Street, London, E1 4UD", + "hello@fakehotel.com", + "0123 456789", +]; +const Footer = () => { + return ( +
+ +
+ ); +}; + +export default Footer; diff --git a/src/Heading.js b/src/Heading.js new file mode 100644 index 000000000..fca64efe2 --- /dev/null +++ b/src/Heading.js @@ -0,0 +1,13 @@ +const Heading = () => { + return ( +
+ + CYF Hotel +
+ ); +}; + +export default Heading; diff --git a/src/Search.js b/src/Search.js index 7bd5871c0..282fae892 100644 --- a/src/Search.js +++ b/src/Search.js @@ -1,5 +1,4 @@ -import React from "react"; - +import SearchButton from "./SearchButton"; const Search = () => { return (
@@ -17,7 +16,7 @@ const Search = () => { className="form-control" placeholder="Customer name" /> - +
diff --git a/src/SearchButton.js b/src/SearchButton.js new file mode 100644 index 000000000..f78202e7f --- /dev/null +++ b/src/SearchButton.js @@ -0,0 +1,5 @@ +const SearchButton = () => { + return ; +}; + +export default SearchButton; diff --git a/src/SearchResults.js b/src/SearchResults.js new file mode 100644 index 000000000..9997cd116 --- /dev/null +++ b/src/SearchResults.js @@ -0,0 +1,11 @@ +import TableHead from "./TableHead.js"; +import TableInfo from "./TableInfo.js"; +const SearchResults = (props) => { + return ( + + + +
+ ); +}; +export default SearchResults; diff --git a/src/TableHead.js b/src/TableHead.js new file mode 100644 index 000000000..3a79cabd2 --- /dev/null +++ b/src/TableHead.js @@ -0,0 +1,18 @@ +const TableHead = () => { + return ( + + + id + Title + First name + Surname + Email + Room id + Check in date + Check out date + Number of nights + + + ); +}; +export default TableHead; diff --git a/src/TableInfo.js b/src/TableInfo.js new file mode 100644 index 000000000..81d0a4906 --- /dev/null +++ b/src/TableInfo.js @@ -0,0 +1,23 @@ +import moment from "moment"; +const TableInfo = (props) => { + return ( + + {props.results.map((data) => { + return ( + + {data.id} + {data.title} + {data.firstName} + {data.surname} + {data.email} + {data.roomId} + {data.checkInDate} + {data.checkOutDate} + {moment(data.checkOutDate).diff(data.checkInDate, "days")} + + ); + })} + + ); +}; +export default TableInfo; diff --git a/src/TouristInfoCards.js b/src/TouristInfoCards.js new file mode 100644 index 000000000..13c9c088c --- /dev/null +++ b/src/TouristInfoCards.js @@ -0,0 +1,39 @@ +const TouristInfo = [ + { + title: "Glasgow", + image: "https://media.timeout.com/images/105400989/1920/1080/image.jpg", + info: "Glasgow's city centre is home to flagship stores, impressive shopping centres and designer favourites all within an easily walkable area. The city is also rich in artists and creators which makes for a thriving and exciting independent shopping scene.", + link: "https://peoplemakeglasgow.com", + }, + { + title: "Manchester", + image: + "https://www.propertyreporter.co.uk/images/660x350/manchester_895-14609.jpg", + info: "Welcome to the official tourism site of Greater Manchester where you can search for things to do in Manchester and find out what's on, as well as getting inspiration for your visit to this fantastic city region.", + link: "https://visitmanchester.com", + }, + { + title: "London", + image: + "https://www.citysparespace.com/wp-content/uploads/2023/02/london.jpeg", + info: "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.", + link: "https://visitlondon.com", + }, +]; +const TouristInfoCards = () => { + return TouristInfo.map((card) => { + return ( +
+ +
+

{card.title}

+

{card.info}

+ + More Information + +
+
+ ); + }); +}; +export default TouristInfoCards; From 85ed5b02fb7ea08b506b6672b2d44a871459906f Mon Sep 17 00:00:00 2001 From: AndriusIsin Date: Tue, 20 Jun 2023 18:42:42 +0100 Subject: [PATCH 02/10] level 2 done --- src/App.css | 15 +++++++++++++-- src/App.js | 2 ++ src/Bookings.js | 6 ++++-- src/Heading.js | 2 +- src/Order.js | 16 ++++++++++++++++ src/Restaurant.js | 9 ++++----- src/RestaurantButton.js | 8 ++++++++ src/TableInfo.js | 11 ++++++++++- src/TouristInfoCards.js | 32 ++++++++++++++++++-------------- 9 files changed, 76 insertions(+), 25 deletions(-) create mode 100644 src/Order.js create mode 100644 src/RestaurantButton.js diff --git a/src/App.css b/src/App.css index 05fe2d52e..d1602ed70 100644 --- a/src/App.css +++ b/src/App.css @@ -4,18 +4,21 @@ .App-logo { animation: App-logo-spin infinite 20s linear; - height: 80px; + height: 50px; } .App-header { background-color: #222; - height: 50px; + height: 90px; padding: 20px; color: white; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 1em; font-weight: bold; + display: flex; + flex-direction: row; + justify-content: space-between; } .App-title { @@ -54,4 +57,12 @@ tr { .card { width: 18rem; + display: flex; + flex-direction: column; +} +.card-flex{ + display: flex; + flex-direction: row; + justify-content: space-around; + margin: 1rem; } diff --git a/src/App.js b/src/App.js index 04b5e49bb..4b2d24b06 100644 --- a/src/App.js +++ b/src/App.js @@ -4,12 +4,14 @@ import "./App.css"; import Heading from "./Heading"; import Footer from "./Footer"; import TouristInfoCards from "./TouristInfoCards"; +import Restaurant from "./Restaurant"; const App = () => { return (
+
); diff --git a/src/Bookings.js b/src/Bookings.js index fc2879c14..122179396 100644 --- a/src/Bookings.js +++ b/src/Bookings.js @@ -1,9 +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 [bookings, setBookings] = useState(FakeBookings); + const search = (searchVal) => { console.info("TO DO!", searchVal); }; @@ -12,7 +14,7 @@ const Bookings = () => {
- +
); diff --git a/src/Heading.js b/src/Heading.js index fca64efe2..63058d7fa 100644 --- a/src/Heading.js +++ b/src/Heading.js @@ -5,7 +5,7 @@ const Heading = () => { class="App-logo" src="https://img.freepik.com/premium-vector/hotel-logo-simple-illustration_434503-736.jpg?w=2000" /> - CYF Hotel +

CYF Hotel

); }; diff --git a/src/Order.js b/src/Order.js new file mode 100644 index 000000000..6c2a41ac5 --- /dev/null +++ b/src/Order.js @@ -0,0 +1,16 @@ +import React, { useState } from "react"; +import RestaurantButton from "./RestaurantButton"; +const Order = (props) => { + const [order, setOrders] = useState(0); + const orderOne = () => { + setOrders(order + 1); + }; + return ( +
  • + {props.orderType}: {order} + +
    • + ); +}; + +export default Order; diff --git a/src/Restaurant.js b/src/Restaurant.js index ecb2b43a2..31b0684ea 100644 --- a/src/Restaurant.js +++ b/src/Restaurant.js @@ -1,14 +1,13 @@ import React from "react"; - +import Order from "./Order"; const Restaurant = () => { - const pizzas = 0; return (

    Restaurant Orders

      -
    • - Pizzas: {pizzas} -
      • + + +
    ); diff --git a/src/RestaurantButton.js b/src/RestaurantButton.js new file mode 100644 index 000000000..3dc209978 --- /dev/null +++ b/src/RestaurantButton.js @@ -0,0 +1,8 @@ +const RestaurantButton = (props) => { + return ( + + ); +}; +export default RestaurantButton; diff --git a/src/TableInfo.js b/src/TableInfo.js index 81d0a4906..a67b34710 100644 --- a/src/TableInfo.js +++ b/src/TableInfo.js @@ -1,10 +1,19 @@ +import { useState } from "react"; import moment from "moment"; const TableInfo = (props) => { return ( {props.results.map((data) => { + const [active, setActive] = useState(false); + + function handleClick() { + setActive(!active); + } return ( - + {data.id} {data.title} {data.firstName} diff --git a/src/TouristInfoCards.js b/src/TouristInfoCards.js index 13c9c088c..48a94fae6 100644 --- a/src/TouristInfoCards.js +++ b/src/TouristInfoCards.js @@ -21,19 +21,23 @@ const TouristInfo = [ }, ]; const TouristInfoCards = () => { - return TouristInfo.map((card) => { - return ( -
    - -
    -

    {card.title}

    -

    {card.info}

    - - More Information - -
    -
    - ); - }); + return ( +
    + {TouristInfo.map((card) => { + return ( +
    + +
    +

    {card.title}

    +

    {card.info}

    + + More Information + +
    +
    + ); + })} +
    + ); }; export default TouristInfoCards; From 4c9435b829db447936f396eb51d62f0de2c0e0c0 Mon Sep 17 00:00:00 2001 From: AndriusIsin Date: Sat, 1 Jul 2023 11:22:24 +0100 Subject: [PATCH 03/10] up to Level 19 --- src/Bookings.js | 23 ++++++++++++++++----- src/Search.js | 15 ++++++++++++-- src/SearchButton.js | 2 +- src/SearchResults.js | 4 ++-- src/TableBody.js | 13 ++++++++++++ src/TableInfo.js | 49 ++++++++++++++++++++++---------------------- 6 files changed, 71 insertions(+), 35 deletions(-) create mode 100644 src/TableBody.js diff --git a/src/Bookings.js b/src/Bookings.js index 122179396..c480381ad 100644 --- a/src/Bookings.js +++ b/src/Bookings.js @@ -1,13 +1,26 @@ -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"; +// import FakeBookings from "./data/fakeBookings.json"; const Bookings = () => { - const [bookings, setBookings] = useState(FakeBookings); - + const [bookings, setBookings] = useState([]); + useEffect(() => { + fetch(`https://cyf-react.glitch.me`) + .then((res) => res.json()) + .then((data) => { + setBookings(data); + }); + }, []); const search = (searchVal) => { - console.info("TO DO!", searchVal); + const filteredBooking = bookings.filter((booking) => { + return ( + booking.firstName.toLowerCase().includes(searchVal.toLowerCase()) || + booking.surname.toLowerCase().includes(searchVal.toLowerCase()) + ); + }); + setBookings(filteredBooking); + // console.info("TO DO!", searchVal); }; return ( diff --git a/src/Search.js b/src/Search.js index 282fae892..e0f96a733 100644 --- a/src/Search.js +++ b/src/Search.js @@ -1,5 +1,14 @@ +import React, { useState } from "react"; import SearchButton from "./SearchButton"; -const Search = () => { +const Search = (props) => { + const [searchInput, setSearchInput] = useState(""); + const handleSearchInput = (event) => { + setSearchInput(event.target.value); + }; + const handleSubmit = (event) => { + event.preventDefault(); + props.search(searchInput); + }; return (
    @@ -7,14 +16,16 @@ const Search = () => {
    -
    +
    diff --git a/src/SearchButton.js b/src/SearchButton.js index f78202e7f..4cc9d047d 100644 --- a/src/SearchButton.js +++ b/src/SearchButton.js @@ -1,4 +1,4 @@ -const SearchButton = () => { +const SearchButton = (props) => { return ; }; diff --git a/src/SearchResults.js b/src/SearchResults.js index 9997cd116..59e6e789b 100644 --- a/src/SearchResults.js +++ b/src/SearchResults.js @@ -1,10 +1,10 @@ import TableHead from "./TableHead.js"; -import TableInfo from "./TableInfo.js"; +import TableBody from "./TableBody.js"; const SearchResults = (props) => { return ( - +
    ); }; diff --git a/src/TableBody.js b/src/TableBody.js new file mode 100644 index 000000000..f1bcc8772 --- /dev/null +++ b/src/TableBody.js @@ -0,0 +1,13 @@ +import TableInfo from "./TableInfo"; + +const TableBody = (props) => { + return ( + + {props.results.map((result) => { + return ; + })} + ; + + ); +}; +export default TableBody; diff --git a/src/TableInfo.js b/src/TableInfo.js index a67b34710..6d3c9ae1a 100644 --- a/src/TableInfo.js +++ b/src/TableInfo.js @@ -1,32 +1,31 @@ import { useState } from "react"; import moment from "moment"; const TableInfo = (props) => { - return ( - - {props.results.map((data) => { - const [active, setActive] = useState(false); + const [active, setActive] = useState(false); - function handleClick() { - setActive(!active); - } - return ( - - {data.id} - {data.title} - {data.firstName} - {data.surname} - {data.email} - {data.roomId} - {data.checkInDate} - {data.checkOutDate} - {moment(data.checkOutDate).diff(data.checkInDate, "days")} - - ); - })} - + function handleClick() { + setActive(!active); + } + return ( + + {props.result.id} + {props.result.title} + {props.result.firstName} + {props.result.surname} + {props.result.email} + {props.result.roomId} + {props.result.checkInDate} + {props.result.checkOutDate} + + {moment(props.result.checkOutDate).diff( + props.result.checkInDate, + "days" + )} + + ); }; export default TableInfo; From b108d50b62b1ee106095828e24504c791fd717ac Mon Sep 17 00:00:00 2001 From: AndriusIsin Date: Tue, 4 Jul 2023 19:04:10 +0100 Subject: [PATCH 04/10] up to level 20 --- src/CustomerProfile.js | 6 ++++++ src/SearchResults.js | 1 + src/TableBody.js | 23 ++++++++++++++++------ src/TableInfo.js | 44 ++++++++++++++++++++++++------------------ 4 files changed, 49 insertions(+), 25 deletions(-) create mode 100644 src/CustomerProfile.js diff --git a/src/CustomerProfile.js b/src/CustomerProfile.js new file mode 100644 index 000000000..88ada1a19 --- /dev/null +++ b/src/CustomerProfile.js @@ -0,0 +1,6 @@ +// import TableInfo from "./TableInfo"; + +const CustomerProfile = (props) => { + return

    Customer {props.id} profile

    ; +}; +export default CustomerProfile; diff --git a/src/SearchResults.js b/src/SearchResults.js index 59e6e789b..145c44fd6 100644 --- a/src/SearchResults.js +++ b/src/SearchResults.js @@ -1,5 +1,6 @@ import TableHead from "./TableHead.js"; import TableBody from "./TableBody.js"; + const SearchResults = (props) => { return ( diff --git a/src/TableBody.js b/src/TableBody.js index f1bcc8772..0fe9d88a6 100644 --- a/src/TableBody.js +++ b/src/TableBody.js @@ -1,13 +1,24 @@ +import { useState } from "react"; import TableInfo from "./TableInfo"; +import CustomerProfile from "./CustomerProfile"; const TableBody = (props) => { + const [showId, setShowId] = useState(""); + const IdCheck = (id) => { + setShowId(id); + console.log({ showId }); + }; return ( - - {props.results.map((result) => { - return ; - })} - ; - + <> +
    + + {props.results.map((result, id) => { + return ; + })} + +
    + {showId && } + ); }; export default TableBody; diff --git a/src/TableInfo.js b/src/TableInfo.js index 6d3c9ae1a..a1c64936c 100644 --- a/src/TableInfo.js +++ b/src/TableInfo.js @@ -6,26 +6,32 @@ const TableInfo = (props) => { function handleClick() { setActive(!active); } + return ( - - {props.result.id} - {props.result.title} - {props.result.firstName} - {props.result.surname} - {props.result.email} - {props.result.roomId} - {props.result.checkInDate} - {props.result.checkOutDate} - - {moment(props.result.checkOutDate).diff( - props.result.checkInDate, - "days" - )} - - + <> + + {props.result.id} + {props.result.title} + {props.result.firstName} + {props.result.surname} + {props.result.email} + {props.result.roomId} + {props.result.checkInDate} + {props.result.checkOutDate} + + {moment(props.result.checkOutDate).diff( + props.result.checkInDate, + "days" + )} + + + + ); }; export default TableInfo; From 5b75db8957f59cd61ded9bf1b5f84b095f5189ce Mon Sep 17 00:00:00 2001 From: AndriusIsin Date: Tue, 4 Jul 2023 19:24:54 +0100 Subject: [PATCH 05/10] updated 20, deleted TableBody component --- src/SearchResults.js | 24 +++++++++++++++++++----- 1 file changed, 19 insertions(+), 5 deletions(-) diff --git a/src/SearchResults.js b/src/SearchResults.js index 145c44fd6..43ea0626b 100644 --- a/src/SearchResults.js +++ b/src/SearchResults.js @@ -1,12 +1,26 @@ +import { useState } from "react"; import TableHead from "./TableHead.js"; -import TableBody from "./TableBody.js"; +import TableInfo from "./TableInfo"; +import CustomerProfile from "./CustomerProfile"; const SearchResults = (props) => { + const [showId, setShowId] = useState(""); + const IdCheck = (id) => { + setShowId(id); + console.log({ showId }); + }; return ( - - - -
    + <> + + + + {props.results.map((result, id) => { + return ; + })} + +
    + {showId && } + ); }; export default SearchResults; From e31e601248d5265b0034a1c95b3455735c828b0b Mon Sep 17 00:00:00 2001 From: AndriusIsin Date: Wed, 5 Jul 2023 20:15:11 +0100 Subject: [PATCH 06/10] 21 done --- src/CustomerProfile.js | 37 +++++++++++++++++++++++++++++++++++-- src/SearchResults.js | 2 +- 2 files changed, 36 insertions(+), 3 deletions(-) diff --git a/src/CustomerProfile.js b/src/CustomerProfile.js index 88ada1a19..c6d987f37 100644 --- a/src/CustomerProfile.js +++ b/src/CustomerProfile.js @@ -1,6 +1,39 @@ -// import TableInfo from "./TableInfo"; +import { useEffect, useState } from "react"; const CustomerProfile = (props) => { - return

    Customer {props.id} profile

    ; + const [customerData, setCustomerData] = useState(""); + useEffect(() => { + if (props.id) { + fetch(`https://cyf-react.glitch.me/customers/${props.id}`) + .then((response) => response.json()) + .then((data) => setCustomerData(data)); + } + }, [props.id]); + return ( + + + + + + + + + + + + + + + + + + + + + + + +
    Customer IDTitleFirst NameSurnameEmailVIPPhone number
    {props.id}{customerData.title}{customerData.firstName}{customerData.surname}{customerData.email}{customerData.vip ? "Yes" : "No"}{customerData.phoneNumber}
    + ); }; export default CustomerProfile; diff --git a/src/SearchResults.js b/src/SearchResults.js index 43ea0626b..b3f6b6b60 100644 --- a/src/SearchResults.js +++ b/src/SearchResults.js @@ -11,6 +11,7 @@ const SearchResults = (props) => { }; return ( <> + {showId && } @@ -19,7 +20,6 @@ const SearchResults = (props) => { })}
    - {showId && } ); }; From 89518dcfaf7afee0c706fcf69267e9148b5c9797 Mon Sep 17 00:00:00 2001 From: AndriusIsin Date: Thu, 6 Jul 2023 18:38:55 +0100 Subject: [PATCH 07/10] 22 done --- src/App.css | 9 +++++++++ src/Bookings.js | 11 +++++++++-- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/src/App.css b/src/App.css index d1602ed70..78a5be47d 100644 --- a/src/App.css +++ b/src/App.css @@ -66,3 +66,12 @@ tr { justify-content: space-around; margin: 1rem; } +.blink_me { + animation: blinker 1s linear infinite; +} + +@keyframes blinker { + 50% { + opacity: 0; + } +} diff --git a/src/Bookings.js b/src/Bookings.js index c480381ad..03ba9b14c 100644 --- a/src/Bookings.js +++ b/src/Bookings.js @@ -5,11 +5,14 @@ import SearchResults from "./SearchResults.js"; const Bookings = () => { const [bookings, setBookings] = useState([]); + const [loadingData, setLoadingData] = useState(false); useEffect(() => { - fetch(`https://cyf-react.glitch.me`) + setLoadingData(false); + fetch(`https://cyf-react.glitch.me/delayed`) .then((res) => res.json()) .then((data) => { setBookings(data); + setLoadingData(true); }); }, []); const search = (searchVal) => { @@ -27,7 +30,11 @@ const Bookings = () => {
    - + {loadingData ? ( + + ) : ( +

    Loading.....

    + )}
    ); From 492dd29ebcb0bb210cda4565fe23822623a73d9b Mon Sep 17 00:00:00 2001 From: AndriusIsin Date: Fri, 7 Jul 2023 16:13:05 +0100 Subject: [PATCH 08/10] 23 done --- src/Bookings.js | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/src/Bookings.js b/src/Bookings.js index 03ba9b14c..b0df3b805 100644 --- a/src/Bookings.js +++ b/src/Bookings.js @@ -6,13 +6,25 @@ import SearchResults from "./SearchResults.js"; const Bookings = () => { const [bookings, setBookings] = useState([]); const [loadingData, setLoadingData] = useState(false); + const [errorMsg, setErrorMsg] = useState(null); useEffect(() => { setLoadingData(false); fetch(`https://cyf-react.glitch.me/delayed`) - .then((res) => res.json()) + .then((res) => { + if (!res.ok) { + throw Error( + `The fetching of bookings was not successful. Error: ${res.status}` + ); + } + return res.json(); + }) .then((data) => { setBookings(data); setLoadingData(true); + setErrorMsg(null); + }) + .catch((error) => { + setErrorMsg(error.message); }); }, []); const search = (searchVal) => { @@ -22,6 +34,7 @@ const Bookings = () => { booking.surname.toLowerCase().includes(searchVal.toLowerCase()) ); }); + setBookings(filteredBooking); // console.info("TO DO!", searchVal); }; @@ -30,7 +43,9 @@ const Bookings = () => {
    - {loadingData ? ( + {errorMsg ? ( +

    {errorMsg}

    + ) : loadingData ? ( ) : (

    Loading.....

    From f2133c2a5ebb1f7e543ed4f0a7aa9594125f7f84 Mon Sep 17 00:00:00 2001 From: AndriusIsin Date: Fri, 7 Jul 2023 19:11:00 +0100 Subject: [PATCH 09/10] created components folder --- src/App.css | 5 +++++ src/App.js | 10 +++++----- src/{ => Components}/Bookings.js | 2 +- src/{ => Components}/CustomerProfile.js | 4 ++-- src/{ => Components}/Footer.js | 4 ++-- src/{ => Components}/Heading.js | 2 +- src/{ => Components}/Order.js | 6 ++++-- src/{ => Components}/Restaurant.js | 2 +- src/{ => Components}/RestaurantButton.js | 0 src/{ => Components}/Search.js | 0 src/{ => Components}/SearchButton.js | 0 src/{ => Components}/SearchResults.js | 0 src/{ => Components}/TableBody.js | 0 src/{ => Components}/TableHead.js | 0 src/{ => Components}/TableInfo.js | 11 ++++++++--- src/{ => Components}/TouristInfoCards.js | 4 ++-- 16 files changed, 31 insertions(+), 19 deletions(-) rename src/{ => Components}/Bookings.js (96%) rename src/{ => Components}/CustomerProfile.js (94%) rename src/{ => Components}/Footer.js (74%) rename src/{ => Components}/Heading.js (90%) rename src/{ => Components}/Order.js (76%) rename src/{ => Components}/Restaurant.js (90%) rename src/{ => Components}/RestaurantButton.js (100%) rename src/{ => Components}/Search.js (100%) rename src/{ => Components}/SearchButton.js (100%) rename src/{ => Components}/SearchResults.js (100%) rename src/{ => Components}/TableBody.js (100%) rename src/{ => Components}/TableHead.js (100%) rename src/{ => Components}/TableInfo.js (80%) rename src/{ => Components}/TouristInfoCards.js (95%) diff --git a/src/App.css b/src/App.css index 78a5be47d..24d1343d2 100644 --- a/src/App.css +++ b/src/App.css @@ -75,3 +75,8 @@ tr { opacity: 0; } } +.list-group-item{ + display: flex; + justify-content: space-around; + flex-direction: row; +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 4b2d24b06..f7bad888f 100644 --- a/src/App.js +++ b/src/App.js @@ -1,10 +1,10 @@ import React from "react"; -import Bookings from "./Bookings"; +import Bookings from "./Components/Bookings"; import "./App.css"; -import Heading from "./Heading"; -import Footer from "./Footer"; -import TouristInfoCards from "./TouristInfoCards"; -import Restaurant from "./Restaurant"; +import Heading from "./Components/Heading"; +import Footer from "./Components/Footer"; +import TouristInfoCards from "./Components/TouristInfoCards"; +import Restaurant from "./Components/Restaurant"; const App = () => { return (
    diff --git a/src/Bookings.js b/src/Components/Bookings.js similarity index 96% rename from src/Bookings.js rename to src/Components/Bookings.js index b0df3b805..71e4fc37a 100644 --- a/src/Bookings.js +++ b/src/Components/Bookings.js @@ -48,7 +48,7 @@ const Bookings = () => { ) : loadingData ? ( ) : ( -

    Loading.....

    +

    Loading.....

    )}
    diff --git a/src/CustomerProfile.js b/src/Components/CustomerProfile.js similarity index 94% rename from src/CustomerProfile.js rename to src/Components/CustomerProfile.js index c6d987f37..d95bb80aa 100644 --- a/src/CustomerProfile.js +++ b/src/Components/CustomerProfile.js @@ -10,8 +10,8 @@ const CustomerProfile = (props) => { } }, [props.id]); return ( - - +
    + diff --git a/src/Footer.js b/src/Components/Footer.js similarity index 74% rename from src/Footer.js rename to src/Components/Footer.js index 473b71fae..444b0b6d8 100644 --- a/src/Footer.js +++ b/src/Components/Footer.js @@ -7,8 +7,8 @@ const Footer = () => { return (
      - {ContactDetails.map((contact) => ( -
    • {contact}
      • + {ContactDetails.map((contact, id) => ( +
    • {contact}
      • ))}
    diff --git a/src/Heading.js b/src/Components/Heading.js similarity index 90% rename from src/Heading.js rename to src/Components/Heading.js index 63058d7fa..79d294c05 100644 --- a/src/Heading.js +++ b/src/Components/Heading.js @@ -2,7 +2,7 @@ const Heading = () => { return (

    CYF Hotel

    diff --git a/src/Order.js b/src/Components/Order.js similarity index 76% rename from src/Order.js rename to src/Components/Order.js index 6c2a41ac5..c84e76295 100644 --- a/src/Order.js +++ b/src/Components/Order.js @@ -6,8 +6,10 @@ const Order = (props) => { setOrders(order + 1); }; return ( -
  • - {props.orderType}: {order} +
  • +

    + {props.orderType}: {order} +

    • ); diff --git a/src/Restaurant.js b/src/Components/Restaurant.js similarity index 90% rename from src/Restaurant.js rename to src/Components/Restaurant.js index 31b0684ea..718a24d6b 100644 --- a/src/Restaurant.js +++ b/src/Components/Restaurant.js @@ -4,7 +4,7 @@ const Restaurant = () => { return (

    Restaurant Orders

    -
      +
        diff --git a/src/RestaurantButton.js b/src/Components/RestaurantButton.js similarity index 100% rename from src/RestaurantButton.js rename to src/Components/RestaurantButton.js diff --git a/src/Search.js b/src/Components/Search.js similarity index 100% rename from src/Search.js rename to src/Components/Search.js diff --git a/src/SearchButton.js b/src/Components/SearchButton.js similarity index 100% rename from src/SearchButton.js rename to src/Components/SearchButton.js diff --git a/src/SearchResults.js b/src/Components/SearchResults.js similarity index 100% rename from src/SearchResults.js rename to src/Components/SearchResults.js diff --git a/src/TableBody.js b/src/Components/TableBody.js similarity index 100% rename from src/TableBody.js rename to src/Components/TableBody.js diff --git a/src/TableHead.js b/src/Components/TableHead.js similarity index 100% rename from src/TableHead.js rename to src/Components/TableHead.js diff --git a/src/TableInfo.js b/src/Components/TableInfo.js similarity index 80% rename from src/TableInfo.js rename to src/Components/TableInfo.js index a1c64936c..7f8582d48 100644 --- a/src/TableInfo.js +++ b/src/Components/TableInfo.js @@ -27,9 +27,14 @@ const TableInfo = (props) => { "days" )} - +
    ); diff --git a/src/TouristInfoCards.js b/src/Components/TouristInfoCards.js similarity index 95% rename from src/TouristInfoCards.js rename to src/Components/TouristInfoCards.js index 48a94fae6..cc4a66b12 100644 --- a/src/TouristInfoCards.js +++ b/src/Components/TouristInfoCards.js @@ -23,9 +23,9 @@ const TouristInfo = [ const TouristInfoCards = () => { return (
    - {TouristInfo.map((card) => { + {TouristInfo.map((card, id) => { return ( -
    +

    {card.title}

    From 25dc2ac05d4ae6289e7f64159e34474b9be63fb6 Mon Sep 17 00:00:00 2001 From: AndriusIsin Date: Sat, 17 Feb 2024 14:38:36 +0000 Subject: [PATCH 10/10] upgrade --- package-lock.json | 39 ++++++++++ package.json | 1 + public/.index.html.icloud | Bin 0 -> 158 bytes src/.App.css.icloud | Bin 0 -> 155 bytes src/App.css | 112 +++++++++++++---------------- src/App.js | 7 +- src/Components/Bookings.js | 13 ++-- src/Components/CustomerProfile.js | 33 ++++++--- src/Components/Footer.js | 63 ++++++++++++++-- src/Components/Heading.js | 67 ++++++++++++++--- src/Components/HotelServices.js | 49 +++++++++++++ src/Components/RoomTypes.js | 61 ++++++++++++++++ src/Components/Search.js | 1 - src/Components/SearchResults.js | 6 +- src/Components/Table.js | 67 +++++++++++++++++ src/Components/TableInfo.js | 10 ++- src/Components/TouristInfoCards.js | 43 +++++++---- 17 files changed, 459 insertions(+), 113 deletions(-) create mode 100644 public/.index.html.icloud create mode 100644 src/.App.css.icloud create mode 100644 src/Components/HotelServices.js create mode 100644 src/Components/RoomTypes.js create mode 100644 src/Components/Table.js diff --git a/package-lock.json b/package-lock.json index 94217b93a..8e973868b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "moment": "^2.29.4", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.22.1", "react-scripts": "^5.0.1" }, "devDependencies": { @@ -3057,6 +3058,14 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@remix-run/router": { + "version": "1.15.1", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.1.tgz", + "integrity": "sha512-zcU0gM3z+3iqj8UX45AmWY810l3oUmXM7uH4dt5xtzvMhRtYVhKGOmgOd1877dOPPepfCjUv57w+syamWIYe7w==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/plugin-babel": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz", @@ -14063,6 +14072,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.22.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.1.tgz", + "integrity": "sha512-0pdoRGwLtemnJqn1K0XHUbnKiX0S4X8CgvVVmHGOWmofESj31msHo/1YiqcJWK7Wxfq2a4uvvtS01KAQyWK/CQ==", + "dependencies": { + "@remix-run/router": "1.15.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.22.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.1.tgz", + "integrity": "sha512-iwMyyyrbL7zkKY7MRjOVRy+TMnS/OPusaFVxM2P11x9dzSzGmLsebkCvYirGq0DWB9K9hOspHYYtDz33gE5Duw==", + "dependencies": { + "@remix-run/router": "1.15.1", + "react-router": "6.22.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/react-scripts": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", diff --git a/package.json b/package.json index f81c28013..d38148e75 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "moment": "^2.29.4", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-router-dom": "^6.22.1", "react-scripts": "^5.0.1" }, "scripts": { diff --git a/public/.index.html.icloud b/public/.index.html.icloud new file mode 100644 index 0000000000000000000000000000000000000000..55648e1490c749488219a3befbeee8226f65caf6 GIT binary patch literal 158 zcmYc)$jK}&F)+By$i&RT$`<1n92(@~mzbOComv?$AOPmNW#*&?XI4RkB;Z0psm1xF zMaiill?5QFsLZ^S)C#?flH43Y&hzmCGFTM`rKXqWBo=Y-%jkQBMlgT@BO`=nV29E$ GsvH1}bSmfo literal 0 HcmV?d00001 diff --git a/src/.App.css.icloud b/src/.App.css.icloud new file mode 100644 index 0000000000000000000000000000000000000000..b895cba05218dcde092ed88718a1c1c997eb17b9 GIT binary patch literal 155 zcmYc)$jK}&F)+By$i&RT$`<1n92(@~mzbOComv?$AOPmNW#*&?XI4RkB;Z0psm1xF zMaiill?5QFaL0lIz2xFzL6-P<0U4~Sf>P5 { return (
    + + - +
    ); diff --git a/src/Components/Bookings.js b/src/Components/Bookings.js index 71e4fc37a..f56b13343 100644 --- a/src/Components/Bookings.js +++ b/src/Components/Bookings.js @@ -9,7 +9,7 @@ const Bookings = () => { const [errorMsg, setErrorMsg] = useState(null); useEffect(() => { setLoadingData(false); - fetch(`https://cyf-react.glitch.me/delayed`) + fetch(`https://andrius-hotel-server.onrender.com/bookings`) .then((res) => { if (!res.ok) { throw Error( @@ -40,15 +40,18 @@ const Bookings = () => { }; return ( -
    +
    - + {/* */} {errorMsg ? (

    {errorMsg}

    ) : loadingData ? ( - + ) : ( -

    Loading.....

    +
    +

    Loading.....

    +
    +
    )}
    diff --git a/src/Components/CustomerProfile.js b/src/Components/CustomerProfile.js index d95bb80aa..bd462848b 100644 --- a/src/Components/CustomerProfile.js +++ b/src/Components/CustomerProfile.js @@ -1,14 +1,26 @@ -import { useEffect, useState } from "react"; +import React, { useEffect, useState } from "react"; const CustomerProfile = (props) => { - const [customerData, setCustomerData] = useState(""); + const [customerData, setCustomerData] = useState(null); // Initialize customerData as null + useEffect(() => { if (props.id) { - fetch(`https://cyf-react.glitch.me/customers/${props.id}`) + fetch(`https://andrius-hotel-server.onrender.com/bookings/${props.id}`) .then((response) => response.json()) - .then((data) => setCustomerData(data)); + .then((data) => setCustomerData(data)) + .catch((error) => + console.error("Error fetching customer data:", error) + ); } }, [props.id]); + + if (!customerData) { + return

    Loading...

    ; // Display loading message while fetching data + } + + // Assuming customerData is an array + const customer = customerData[0]; // Assuming the data for the customer is at the first index of the array + return (
    Customer ID Title + +
    @@ -25,15 +37,16 @@ const CustomerProfile = (props) => { - - - - - - + + + + + +
    {props.id}{customerData.title}{customerData.firstName}{customerData.surname}{customerData.email}{customerData.vip ? "Yes" : "No"}{customerData.phoneNumber}{customer.title}{customer.firstName}{customer.surname}{customer.email}{customer.vip ? "Yes" : "No"}{customer.phoneNumber}
    ); }; + export default CustomerProfile; diff --git a/src/Components/Footer.js b/src/Components/Footer.js index 444b0b6d8..c8f447ac6 100644 --- a/src/Components/Footer.js +++ b/src/Components/Footer.js @@ -1,17 +1,66 @@ +import React from "react"; + const ContactDetails = [ "123 Fake Street, London, E1 4UD", "hello@fakehotel.com", "0123 456789", ]; + const Footer = () => { return ( -
    -
      - {ContactDetails.map((contact, id) => ( -
    • {contact}
      • - ))} -
    -
    +
    +
    +
    +
    +
    Contact Us
    +
      + {ContactDetails.map((contact, id) => ( +
    • {contact}
      • + ))} +
    +
    +
    + {/*
    Explore
    + */} +
    +
    +
    Social Media
    + +
    +
    +
    +
    +

    + © {new Date().getFullYear()} Andrius Isin. All rights + reserved. +

    +
    +
    +
    +
    ); }; diff --git a/src/Components/Heading.js b/src/Components/Heading.js index 79d294c05..9adc6fdc2 100644 --- a/src/Components/Heading.js +++ b/src/Components/Heading.js @@ -1,13 +1,62 @@ -const Heading = () => { +import React from "react"; + +const Navbar = () => { return ( -
    - -

    CYF Hotel

    -
    + ); }; -export default Heading; +export default Navbar; diff --git a/src/Components/HotelServices.js b/src/Components/HotelServices.js new file mode 100644 index 000000000..0db93859d --- /dev/null +++ b/src/Components/HotelServices.js @@ -0,0 +1,49 @@ +import React from "react"; + +const HotelServices = () => { + return ( +
    +

    Our Services

    +
    +
    +
    +
    + +
    Free Wi-Fi
    +

    + Stay connected with our high-speed Wi-Fi available throughout + the hotel. +

    +
    +
    +
    +
    +
    +
    + +
    Poolside Lounge
    +

    + Relax and unwind by our poolside lounge area with refreshing + drinks and snacks. +

    +
    +
    +
    +
    +
    +
    + +
    Concierge Service
    +

    + Our dedicated concierge team is available 24/7 to assist you + with all your needs. +

    +
    +
    +
    +
    +
    + ); +}; + +export default HotelServices; diff --git a/src/Components/RoomTypes.js b/src/Components/RoomTypes.js new file mode 100644 index 000000000..f1daf3eed --- /dev/null +++ b/src/Components/RoomTypes.js @@ -0,0 +1,61 @@ +import React from "react"; + +const RoomTypes = () => { + return ( +
    +

    Our Rooms

    +
    +
    +
    + Standard Room +
    +
    Standard Room
    +

    + Comfortable and spacious room equipped with all the necessary + amenities for a pleasant stay. +

    +
    +
    +
    +
    +
    + Deluxe Room +
    +
    Deluxe Room
    +

    + Luxurious room with additional amenities and elegant decor for a + truly indulgent experience. +

    +
    +
    +
    +
    +
    + Suite +
    +
    Suite
    +

    + Spacious suite with separate living and sleeping areas, perfect + for families or extended stays. +

    +
    +
    +
    +
    +
    + ); +}; + +export default RoomTypes; diff --git a/src/Components/Search.js b/src/Components/Search.js index e0f96a733..9aad06c6e 100644 --- a/src/Components/Search.js +++ b/src/Components/Search.js @@ -27,7 +27,6 @@ const Search = (props) => { placeholder="Customer name" onChange={handleSearchInput} /> -
    diff --git a/src/Components/SearchResults.js b/src/Components/SearchResults.js index b3f6b6b60..455f1f4f3 100644 --- a/src/Components/SearchResults.js +++ b/src/Components/SearchResults.js @@ -2,6 +2,7 @@ import { useState } from "react"; import TableHead from "./TableHead.js"; import TableInfo from "./TableInfo"; import CustomerProfile from "./CustomerProfile"; +import Table from "./Table.js"; const SearchResults = (props) => { const [showId, setShowId] = useState(""); @@ -11,7 +12,8 @@ const SearchResults = (props) => { }; return ( <> - {showId && } + + {/* {showId && }
    @@ -19,7 +21,7 @@ const SearchResults = (props) => { return ; })} -
    + */} ); }; diff --git a/src/Components/Table.js b/src/Components/Table.js new file mode 100644 index 000000000..02d4fef2a --- /dev/null +++ b/src/Components/Table.js @@ -0,0 +1,67 @@ +import React, { useState } from "react"; +import moment from "moment"; +import CustomerProfile from "./CustomerProfile"; + +const Table = ({ results }) => { + const [showId, setShowId] = useState(null); + + const IdCheck = (id) => { + setShowId(showId === id ? null : id); + }; + + return ( +
    + + + + + + + + + + + + + + + + + {results.map((result) => ( + + + + + + + + + + + + + ))} + +
    idTitleFirst nameSurnameEmailRoom idCheck in dateCheck out dateNumber of nightsActions
    {result.id}{result.title}{result.firstName}{result.surname}{result.email}{result.roomId}{result.checkInDate}{result.checkOutDate} + {moment(result.checkOutDate).diff(result.checkInDate, "days")} + + +
    + {showId && ( +
    + + +
    + )} +
    + ); +}; + +export default Table; diff --git a/src/Components/TableInfo.js b/src/Components/TableInfo.js index 7f8582d48..44c22bba5 100644 --- a/src/Components/TableInfo.js +++ b/src/Components/TableInfo.js @@ -27,9 +27,17 @@ const TableInfo = (props) => { "days" )} + + {/* */} +