From 6a15b0d93926417a81e01dff3afadc6bb4a78cb6 Mon Sep 17 00:00:00 2001 From: onurat <114289826+onurat@users.noreply.github.com> Date: Sun, 27 Aug 2023 21:45:35 +0100 Subject: [PATCH 1/7] - --- src/App.js | 15 +++++++++++-- src/Bookings.js | 6 ++--- src/Footer.jsx | 18 +++++++++++++++ src/Heading.jsx | 10 +++++++++ src/Search.js | 3 ++- src/SearchButton.jsx | 10 +++++++++ src/SearchResults.jsx | 47 +++++++++++++++++++++++++++++++++++++++ src/TouristInfoCards.js | 49 +++++++++++++++++++++++++++++++++++++++++ 8 files changed, 152 insertions(+), 6 deletions(-) create mode 100644 src/Footer.jsx create mode 100644 src/Heading.jsx create mode 100644 src/SearchButton.jsx create mode 100644 src/SearchResults.jsx create mode 100644 src/TouristInfoCards.js diff --git a/src/App.js b/src/App.js index 953c98560..20ac74e75 100644 --- a/src/App.js +++ b/src/App.js @@ -1,13 +1,24 @@ import React from "react"; - +import Heading from "./Heading"; +import TouristInfoCards from "./TouristInfoCards"; import Bookings from "./Bookings"; +import Footer from "./Footer"; import "./App.css"; const App = () => { + const addressData = [ + "123 Fake Street, London, E1 4UD", + "hello@fakehotel.com", + "0123 456789" + ]; return (
-
CYF Hotel
+ + +
); }; diff --git a/src/Bookings.js b/src/Bookings.js index e0d911b13..b98c965d8 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.jsx b/src/Footer.jsx new file mode 100644 index 000000000..86c6bf500 --- /dev/null +++ b/src/Footer.jsx @@ -0,0 +1,18 @@ +import React from "react"; + + +const Footer = (props) => { + const addressItems = props.addressData.map((item, index) => ( +
  • {item}
    • + )); + + return ( + + ); +} + +export default Footer; diff --git a/src/Heading.jsx b/src/Heading.jsx new file mode 100644 index 000000000..61f2e5f6f --- /dev/null +++ b/src/Heading.jsx @@ -0,0 +1,10 @@ +import React from "react"; + +const Heading = () => { + return ( +
    +
    CYF Hotel
    + +
    ); +} +export default Heading; \ No newline at end of file diff --git a/src/Search.js b/src/Search.js index 7bd5871c0..d0c47c232 100644 --- a/src/Search.js +++ b/src/Search.js @@ -1,4 +1,5 @@ import React from "react"; +import SearchButton from "./SearchButton"; const Search = () => { return ( @@ -17,7 +18,7 @@ const Search = () => { className="form-control" placeholder="Customer name" /> - + diff --git a/src/SearchButton.jsx b/src/SearchButton.jsx new file mode 100644 index 000000000..d71e984cc --- /dev/null +++ b/src/SearchButton.jsx @@ -0,0 +1,10 @@ +import React from "react"; + +const SearchButton = () => { + return ( + +); +} + + +export default SearchButton; \ No newline at end of file diff --git a/src/SearchResults.jsx b/src/SearchResults.jsx new file mode 100644 index 000000000..9f6ae64ef --- /dev/null +++ b/src/SearchResults.jsx @@ -0,0 +1,47 @@ +import React from "react"; +const BookingRow = ({ booking }) => { + return ( + + {booking.id} + {booking.title} + {booking.firstName} + {booking.surname} + {booking.email} + {booking.roomId} + {booking.checkInDate} + {booking.checkOutDate} + + ); +}; + +const SearchResults = ({ bookings }) => { + return ( +
    +

    Search Results

    + + + + + + + + + + + + + + + + {bookings.map((booking) => ( + + + ))} + +
    IDTitleFirst NameSurnameEmailRoom IDCheck-in DateCheck-out Date
    + +
    + ); +}; + +export default SearchResults; \ No newline at end of file diff --git a/src/TouristInfoCards.js b/src/TouristInfoCards.js new file mode 100644 index 000000000..8dcd6eb90 --- /dev/null +++ b/src/TouristInfoCards.js @@ -0,0 +1,49 @@ +import React from "react"; + +const TouristInfoCards = () => { + return ( +
    +
    + Glasgow +
    +

    Glasgow

    +

    + Glasgow is a vibrant city in Scotland known for its rich cultural heritage and friendly atmosphere. + It offers a blend of stunning architecture, art galleries, and a lively music scene. +
    + Visit Glasgow +

    + +
    +
    +
    + Manchester +
    +

    Manchester

    +

    + Manchester is a city in England known for its industrial history, vibrant arts scene, and football culture. + It offers a mix of museums, galleries, and entertainment options. +
    + Visit Manchester +

    + +
    +
    +
    + London +
    +

    London

    +

    + London, the capital of England, is a global city known for its history, culture, and iconic landmarks. + It offers world-class museums, theaters, shopping, and diverse culinary experiences. +
    + Visit London +

    + +
    +
    +
    + ); +}; + +export default TouristInfoCards; From d462fb8fef361874075765658e8e9fbca287ebc8 Mon Sep 17 00:00:00 2001 From: onurat <114289826+onurat@users.noreply.github.com> Date: Sun, 27 Aug 2023 22:24:22 +0100 Subject: [PATCH 2/7] W --- package-lock.json | 9 +++++++++ package.json | 1 + src/Bookings.js | 6 +++--- src/SearchResults.jsx | 16 ++++++++++++++-- 4 files changed, 27 insertions(+), 5 deletions(-) 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/Bookings.js b/src/Bookings.js index b98c965d8..bd4d4d19c 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 Search from "./Search"; +import SearchResults from "./SearchResults"; +import FakeBookings from "./data/fakeBookings"; const Bookings = () => { const search = searchVal => { diff --git a/src/SearchResults.jsx b/src/SearchResults.jsx index 9f6ae64ef..b785abe2a 100644 --- a/src/SearchResults.jsx +++ b/src/SearchResults.jsx @@ -1,5 +1,15 @@ import React from "react"; + +function nightsInHotel(checkOutDate, checkInDate) { + const checkOut = new Date(checkOutDate); + const checkIn = new Date(checkInDate); + const timeDifference = checkOut - checkIn; + const nights = Math.ceil(timeDifference / (1000 * 3600 * 24)); + return nights; +} + const BookingRow = ({ booking }) => { + const numberOfNights = nightsInHotel(booking.checkOutDate, booking.checkInDate); return ( {booking.id} @@ -10,6 +20,7 @@ const BookingRow = ({ booking }) => { {booking.roomId} {booking.checkInDate} {booking.checkOutDate} + {numberOfNights} ); }; @@ -19,7 +30,7 @@ const SearchResults = ({ bookings }) => {

    Search Results

    - + @@ -29,12 +40,13 @@ const SearchResults = ({ bookings }) => { + {bookings.map((booking) => ( - + ))} From 9bf646fc8cef303338c541d8f888eb61bec48207 Mon Sep 17 00:00:00 2001 From: onurat <114289826+onurat@users.noreply.github.com> Date: Mon, 28 Aug 2023 17:09:44 +0100 Subject: [PATCH 3/7] - --- src/App.js | 2 + src/BookingRow.jsx | 19 ++++++++ src/Bookings.js | 6 ++- src/Order.js | 19 ++++++++ src/Restaurant.js | 8 ++-- src/RestaurantButton.jsx | 10 +++++ src/SearchResults.jsx | 94 ++++++++++++++++++---------------------- 7 files changed, 99 insertions(+), 59 deletions(-) create mode 100644 src/BookingRow.jsx create mode 100644 src/Order.js create mode 100644 src/RestaurantButton.jsx diff --git a/src/App.js b/src/App.js index 20ac74e75..26c40d934 100644 --- a/src/App.js +++ b/src/App.js @@ -3,6 +3,7 @@ import Heading from "./Heading"; import TouristInfoCards from "./TouristInfoCards"; import Bookings from "./Bookings"; import Footer from "./Footer"; +import Restaurant from "./Restaurant" import "./App.css"; const App = () => { @@ -15,6 +16,7 @@ const App = () => {
    +
    diff --git a/src/BookingRow.jsx b/src/BookingRow.jsx new file mode 100644 index 000000000..96b43e94f --- /dev/null +++ b/src/BookingRow.jsx @@ -0,0 +1,19 @@ +import React from "react"; + +const BookingRow = ({ booking, onClick, isSelected }) => { + return ( +
    + + + + + + + + + + + ); +}; + +export default BookingRow; \ No newline at end of file diff --git a/src/Bookings.js b/src/Bookings.js index bd4d4d19c..11381f382 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"; import SearchResults from "./SearchResults"; import FakeBookings from "./data/fakeBookings"; 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/Order.js b/src/Order.js new file mode 100644 index 000000000..36dc8122f --- /dev/null +++ b/src/Order.js @@ -0,0 +1,19 @@ +import React, { useState } from "react"; +import RestaurantButton from "./RestaurantButton" + +const Order = (props) => { + const [orders, setOrders] = useState(0); + + const orderOne = () => { + setOrders(prevOrders => prevOrders + 1); + }; + + return ( +
  • + {props.orderType}: {orders} + +
    • + ); +}; + +export default Order; \ No newline at end of file diff --git a/src/Restaurant.js b/src/Restaurant.js index ecb2b43a2..531105f7d 100644 --- a/src/Restaurant.js +++ b/src/Restaurant.js @@ -1,14 +1,14 @@ import React from "react"; +import Order from "./Order" const Restaurant = () => { - const pizzas = 0; return (

    Restaurant Orders

      -
    • - Pizzas: {pizzas} -
      • + + +
    ); diff --git a/src/RestaurantButton.jsx b/src/RestaurantButton.jsx new file mode 100644 index 000000000..c38f02b61 --- /dev/null +++ b/src/RestaurantButton.jsx @@ -0,0 +1,10 @@ +import React from "react" + +const RestaurantButton = ({ orderOne }) => ( + + +); + +export default RestaurantButton; \ No newline at end of file diff --git a/src/SearchResults.jsx b/src/SearchResults.jsx index b785abe2a..570745c09 100644 --- a/src/SearchResults.jsx +++ b/src/SearchResults.jsx @@ -1,59 +1,47 @@ -import React from "react"; - -function nightsInHotel(checkOutDate, checkInDate) { - const checkOut = new Date(checkOutDate); - const checkIn = new Date(checkInDate); - const timeDifference = checkOut - checkIn; - const nights = Math.ceil(timeDifference / (1000 * 3600 * 24)); - return nights; -} - -const BookingRow = ({ booking }) => { - const numberOfNights = nightsInHotel(booking.checkOutDate, booking.checkInDate); - return ( - - - - - - - - - - - - ); -}; +import React, { useState } from "react"; +import BookingRow from "./BookingRow"; const SearchResults = ({ bookings }) => { - return ( -
    -

    Search Results

    -
    ID TitleRoom ID Check-in Date Check-out DateNights
    {booking.id}{booking.title}{booking.firstName}{booking.surname}{booking.email}{booking.roomId}{booking.checkInDate}{booking.checkOutDate}{booking.numberOfNights}
    {booking.id}{booking.title}{booking.firstName}{booking.surname}{booking.email}{booking.roomId}{booking.checkInDate}{booking.checkOutDate}{numberOfNights}
    - - - - - - - - - - - - - - - - {bookings.map((booking) => ( - + const [selectedRow, setSelectedRow] = useState(null); - ))} - -
    IDTitleFirst NameSurnameEmailRoom IDCheck-in DateCheck-out DateNights
    + const handleRowClick = (index) => { + if (selectedRow === index) { + setSelectedRow(null); + } else { + setSelectedRow(index); + } + }; -
    - ); + return ( +
    +

    Search Results

    + + + + + + + + + + + + + + + + {bookings.map((booking, index) => ( + handleRowClick(index)} + isSelected={selectedRow === index} + /> + ))} + +
    IDTitleFirst NameSurnameEmailRoom IDCheck-in DateCheck-out DateNights
    +
    + ); }; -export default SearchResults; \ No newline at end of file +export default SearchResults; From 204570ed448ac7900c872db8135cf36a6b96b67e Mon Sep 17 00:00:00 2001 From: onurat <114289826+onurat@users.noreply.github.com> Date: Wed, 30 Aug 2023 14:54:02 +0100 Subject: [PATCH 4/7] Update BookingRow.jsx --- src/BookingRow.jsx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/src/BookingRow.jsx b/src/BookingRow.jsx index 96b43e94f..1942b755a 100644 --- a/src/BookingRow.jsx +++ b/src/BookingRow.jsx @@ -1,6 +1,14 @@ import React from "react"; const BookingRow = ({ booking, onClick, isSelected }) => { + const calculateNumberOfNights = () => { + const oneDay = 24 * 60 * 60 * 1000; + const checkInDate = new Date(booking.checkInDate); + const checkOutDate = new Date(booking.checkOutDate); + const nightCount = Math.round(Math.abs((checkOutDate - checkInDate) / oneDay)); + return nightCount; + }; + return ( {booking.id} @@ -11,9 +19,9 @@ const BookingRow = ({ booking, onClick, isSelected }) => { {booking.roomId} {booking.checkInDate} {booking.checkOutDate} - {booking.numberOfNights} + {calculateNumberOfNights()} ); }; -export default BookingRow; \ No newline at end of file +export default BookingRow; From 8b757a6f95750bb35d9f68f386d1d4b9d9991043 Mon Sep 17 00:00:00 2001 From: onurat <114289826+onurat@users.noreply.github.com> Date: Wed, 30 Aug 2023 15:16:41 +0100 Subject: [PATCH 5/7] Update Bookings.js --- src/Bookings.js | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/src/Bookings.js b/src/Bookings.js index 11381f382..f67eb9633 100644 --- a/src/Bookings.js +++ b/src/Bookings.js @@ -1,15 +1,26 @@ -import React, { useState } from 'react'; +import React, { useState, useEffect } from 'react'; import Search from "./Search"; import SearchResults from "./SearchResults"; -import FakeBookings from "./data/fakeBookings"; + const Bookings = () => { - const [bookings, setBookings] = useState(FakeBookings); + const [bookings, setBookings] = useState([]); const search = searchVal => { console.info("TO DO!", searchVal); }; + useEffect(() => { + fetch("https://cyf-react.glitch.me") + .then(response => response.json()) + .then(data => { + setBookings(data); + }) + .catch(error => { + console.error("Error fetching data:", error); + }); + }, []); + return (
    From 4ce20436422dc95d2b00a62068a0946484382a4d Mon Sep 17 00:00:00 2001 From: onurat <114289826+onurat@users.noreply.github.com> Date: Fri, 8 Sep 2023 16:44:00 +0100 Subject: [PATCH 6/7] . --- src/Bookings.js | 1 + src/Search.js | 25 +++++++++++++++++++++---- 2 files changed, 22 insertions(+), 4 deletions(-) diff --git a/src/Bookings.js b/src/Bookings.js index f67eb9633..b7670afcc 100644 --- a/src/Bookings.js +++ b/src/Bookings.js @@ -5,6 +5,7 @@ import SearchResults from "./SearchResults"; const Bookings = () => { const [bookings, setBookings] = useState([]); + const [filteredBookings, setFilteredBookings] = useState([]); const search = searchVal => { console.info("TO DO!", searchVal); diff --git a/src/Search.js b/src/Search.js index d0c47c232..b4bfb1858 100644 --- a/src/Search.js +++ b/src/Search.js @@ -1,7 +1,22 @@ -import React from "react"; +import React, { useState } from "react"; import SearchButton from "./SearchButton"; -const Search = () => { +const Search = ({ search }) => { + const [searchInput, setSearchInput] = useState(""); + + const handleSearchInput = (event) => { + const inputValue = event.target.value; + setSearchInput(inputValue); + console.log("Input value:", inputValue); + }; + + const handleSubmit = (event) => { + event.preventDefault(); + + search(searchInput); + + }; + return (
    @@ -9,7 +24,7 @@ const Search = () => {
    -
    +
    { id="customerName" className="form-control" placeholder="Customer name" + value={searchInput} + onChange={handleSearchInput} /> - +
    From f11a7710d163ac05b5a144cbadbd45f3a4f1179c Mon Sep 17 00:00:00 2001 From: onurat <114289826+onurat@users.noreply.github.com> Date: Mon, 11 Sep 2023 17:10:23 +0100 Subject: [PATCH 7/7] . --- src/Bookings.js | 10 +++++++++- src/Search.js | 7 ++----- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/src/Bookings.js b/src/Bookings.js index b7670afcc..3f0101bdf 100644 --- a/src/Bookings.js +++ b/src/Bookings.js @@ -8,7 +8,15 @@ const Bookings = () => { const [filteredBookings, setFilteredBookings] = useState([]); const search = searchVal => { - console.info("TO DO!", searchVal); + const filtered = bookings.filter((booking) => { + const { firstName, surname } = booking; + return ( + firstName.toLowerCase().includes(searchVal.toLowerCase()) || + surname.toLowerCase().includes(searchVal.toLowerCase()) + ); + }); + + setFilteredBookings(filtered); }; useEffect(() => { diff --git a/src/Search.js b/src/Search.js index b4bfb1858..95e5cba21 100644 --- a/src/Search.js +++ b/src/Search.js @@ -1,20 +1,17 @@ import React, { useState } from "react"; import SearchButton from "./SearchButton"; -const Search = ({ search }) => { +const Search = ({ search }) => { const [searchInput, setSearchInput] = useState(""); const handleSearchInput = (event) => { const inputValue = event.target.value; setSearchInput(inputValue); - console.log("Input value:", inputValue); }; const handleSubmit = (event) => { event.preventDefault(); - - search(searchInput); - + search(searchInput); }; return (