diff --git a/README.md b/README.md index 5711ee7f8..2f20a2d4d 100644 --- a/README.md +++ b/README.md @@ -216,13 +216,13 @@ A hotel booking application in React. Homework for the [CodeYourFuture React mod **Test:** Each column in the table should be clickable to sort results in ascending or descending order. -#### 26. Validate new booking +#### 26. Validate new booking **Instructions:** Add validation to some fields from exercise 24: the first name and last name must not be empty, the email must contain exactly 1 `@` symbol, and at least one `.` symbol after the `@`; the room ID must be a number between 0 and 100. If the fields do not contain correct information when the 'Submit' button is pressed, display a red error message at the top of the page, but do not clear the text already in the field. **Test:** An invalid input displays an error message after the 'Submit' button is pressed (e.g. an email like `react@com` is invalid). A valid input shows the correct values at the bottom of the page. -**Reflection:** Validating user input is an important part of any application. Without checking the input, you might see unexpected errors when working with the data later. +**Reflection:** Validating user input is an important part of any application. Without checking the input, you might see unexpected errors when working with the data later. What do you think would happen if you were asked to remove a booking for room number '81', but the user had typed 'eightyOne' or 'EIGHTY ONE'? @@ -234,27 +234,29 @@ What do you think would happen if you were asked to remove a booking for room nu **Test:** The 'Submit' button is initially not clickable, and becomes clickable once every field has the correct input. -**Reflection:** You have used native form validations in HTML. How have you improved this feature with React? +**Reflection:** You have used native form validations in HTML. How have you improved this feature with React? As a user of this booking system, would you prefer: + - To find out you made a mistake when you submit the whole form? - To find out you made a mistake after each input? #### 28. Date picker -**Instructions:** Add the [js-datepicker](https://www.npmjs.com/package/js-datepicker) package to your project using `npm install`, and import it at the top of the file. Add different IDs to your 'check in date' and 'check out date' `` elements, then create two date pickers using `const checkInPicker = datepicker(YOUR_ID)` (where `YOUR_ID` is the ID you assigned to your check in/check out date elements). +**Instructions:** Add the [js-datepicker](https://www.npmjs.com/package/js-datepicker) package to your project using `npm install`, and import it at the top of the file. Add different IDs to your 'check in date' and 'check out date' `` elements, then create two date pickers using `const checkInPicker = datepicker(YOUR_ID)` (where `YOUR_ID` is the ID you assigned to your check in/check out date elements). **Hint:** Read the [js-datepicker usage guide](https://www.npmjs.com/package/js-datepicker#basic-usage) **Test:** The date picker appears when you click on the 'check in date' and 'check out date' input elements. -**Reflection:** Using `js-datepicker` in this exercise allows you to practice installing and working with packages in JavaScript. +**Reflection:** Using `js-datepicker` in this exercise allows you to practice installing and working with packages in JavaScript. Packages contain new functions and properties to work with that may not be available in native JavaScript/HTML. Using packages can often save time instead of writing your own functions, as you are importing code that someone else has written. However, this can have downsides; not all packages are high quality, and some may have bugs or may reduce accessibility by recreating native elements (`js-datepicker` recreates HTML's native [datepicker](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date) element). Think about some of the code you have written in this lesson - are there any packages available that might have helped you to complete the exercises? For example, exercise 26 and 27 used validation. Searching npmjs.com for '[validate](https://www.npmjs.com/search?q=validate)' shows multiple packages, such as '[validator](https://www.npmjs.com/package/validator)' and '[Validate](https://www.npmjs.com/package/Validate)'. Open both of these packages in your browser, and consider the following questions: + - Is it clear what this package does? Will it solve my specific problem better than writing my own code? - Do I trust that the code in this package is safe to run on my machine? Do other people trust this package? (Hint: look at weekly downloads, last update, dependents, and visit the repository) - Is this package accessible? Will it work on all browsers? 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/public/images/glasgow.jpg b/public/images/glasgow.jpg new file mode 100644 index 000000000..c7f5670ea Binary files /dev/null and b/public/images/glasgow.jpg differ diff --git a/public/images/hotel.png b/public/images/hotel.png new file mode 100644 index 000000000..e5a0a3284 Binary files /dev/null and b/public/images/hotel.png differ diff --git a/public/images/london.jpg b/public/images/london.jpg new file mode 100644 index 000000000..87c98b1a0 Binary files /dev/null and b/public/images/london.jpg differ diff --git a/public/images/manchester.jpg b/public/images/manchester.jpg new file mode 100644 index 000000000..8abc99ac9 Binary files /dev/null and b/public/images/manchester.jpg differ diff --git a/src/App.css b/src/App.css index 05fe2d52e..bb637ec9e 100644 --- a/src/App.css +++ b/src/App.css @@ -9,13 +9,27 @@ .App-header { background-color: #222; - height: 50px; + height: 100px; padding: 20px; color: white; text-align: left; font-family: Arial, Helvetica, sans-serif; font-size: 1em; font-weight: bold; + display:flex; + align-items: center; + gap: 0.5rem; + +} +.hotel-title { + text-align: center; + font-size: 1.5rem; + margin-top: 20px; +} + +.hotel-logo { + width: 40px; + height: 40px; } .App-title { @@ -55,3 +69,21 @@ tr { .card { width: 18rem; } + +.cards { + display: flex; + justify-content: center; + gap: 2rem; + margin-top: 1rem; +} +/* +.selectRow { + background: red; +} */ +.profile-flex { + display:flex; + justify-content: space-around; +} +.profile-title { + text-align: center; +} \ No newline at end of file diff --git a/src/App.js b/src/App.js index 953c98560..ce2937741 100644 --- a/src/App.js +++ b/src/App.js @@ -1,4 +1,8 @@ import React from "react"; +import Heading from "./Heading"; +import TouristInfoCards from "./TouristInfoCards"; +import Footer from "./Footer"; +import Restaurant from "./Restaurant"; import Bookings from "./Bookings"; import "./App.css"; @@ -6,8 +10,17 @@ import "./App.css"; const App = () => { return (
-
CYF Hotel
+ + + +
); }; diff --git a/src/Bookings.js b/src/Bookings.js index e0d911b13..166b82822 100644 --- a/src/Bookings.js +++ b/src/Bookings.js @@ -1,18 +1,57 @@ -import React 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 SearchResults from "./SearchResults.js"; +import FakeBookings from "./data/fakeBookings.json"; const Bookings = () => { - const search = searchVal => { - console.info("TO DO!", searchVal); + const [bookings, setBookings] = useState([]); + const [isPending, setIsPending] = useState(false); + const [error, setError] = useState(null); + const search = (searchVal) => { + const filteredBooking = bookings.filter( + (booking) => + booking.firstName === searchVal || booking.surname === searchVal + ); + setBookings(filteredBooking); + + // setBookings(filteredBooking); + // console.info("TO DO!", searchVal); }; + useEffect(() => { + fetch(`https://cyf-react.glitch.me/`) + .then((res) => { + if (!res.ok) { + throw Error( + `Could not fetch the data for that resource. Error status: ${res.status}` + ); + } + return res.json(); + }) + .then((data) => { + console.log(data); + setBookings(data); + setIsPending(true); + setError(null); + }) + .catch((err) => { + setIsPending(false); + setError(err.message); + }); + }, []); return (
- {/* */} + {error ? ( +
{error}
+ ) : isPending ? ( + + ) : ( +

+ Please wait, the data is loading... +

+ )}
); diff --git a/src/CustomerProfile.js b/src/CustomerProfile.js new file mode 100644 index 000000000..793d48426 --- /dev/null +++ b/src/CustomerProfile.js @@ -0,0 +1,25 @@ +import { useState, useEffect } from "react"; + +const CustomerProfile = (props) => { + const [customerProfile, setCustomerProfile] = useState(""); + + useEffect(() => { + fetch(`https://cyf-react.glitch.me/customers/${props.id}`) + .then((res) => res.json()) + .then((data) => { + console.log(data); + setCustomerProfile(data); + }); + }, [props.id]); + return ( +
+

Customer {customerProfile.id} Profile

+
+

E-mail: {customerProfile.email}

+

Telephone number: {customerProfile.phoneNumber}

+

{customerProfile.vip ? "VIP" : null}

+
+
+ ); +}; +export default CustomerProfile; diff --git a/src/Footer.js b/src/Footer.js new file mode 100644 index 000000000..814214088 --- /dev/null +++ b/src/Footer.js @@ -0,0 +1,16 @@ +import React from "react"; + +const Footer = (props) => { + return ( +
+

Address and Contact Details

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

CYF Hotel

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

    Restaurant Orders

    ); diff --git a/src/RestaurantButton.js b/src/RestaurantButton.js new file mode 100644 index 000000000..ad10f929a --- /dev/null +++ b/src/RestaurantButton.js @@ -0,0 +1,9 @@ +const RestaurantButton = (props) => { + return ( + + ); +}; + +export default RestaurantButton; diff --git a/src/Search.js b/src/Search.js index 7bd5871c0..28789964e 100644 --- a/src/Search.js +++ b/src/Search.js @@ -1,6 +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(event) { + setSearchInput(event.target.value); + console.log(searchInput); + } + function handleSubmit(event) { + event.preventDefault(); + props.search(searchInput); + } return (
    @@ -8,7 +18,7 @@ const Search = () => {
    -
    +
    { id="customerName" className="form-control" placeholder="Customer name" + value={searchInput} + onChange={handleSearchInput} /> - +
    diff --git a/src/SearchButton.js b/src/SearchButton.js new file mode 100644 index 000000000..064ef2c27 --- /dev/null +++ b/src/SearchButton.js @@ -0,0 +1,7 @@ +import React from "react"; + +const SearchButton = () => { + return ; +}; + +export default SearchButton; diff --git a/src/SearchResults.js b/src/SearchResults.js new file mode 100644 index 000000000..4ce3f9e5d --- /dev/null +++ b/src/SearchResults.js @@ -0,0 +1,33 @@ +import { React, useState } from "react"; +import TableHead from "./TableHead"; +import TableRow from "./TableRow"; +import CustomerProfile from "./CustomerProfile"; + +const SearchResults = (props) => { + const [customerId, setCustomerId] = useState(""); + function handleIdClick(id) { + setCustomerId(id); + } + return ( +
    + + + + {props.results.map((result, index) => { + return ( + + ); + //return TableRow({props: result}); + })} + +
    + {customerId && } +
    + ); +}; + +export default SearchResults; diff --git a/src/TableHead.js b/src/TableHead.js new file mode 100644 index 000000000..6a00b41a9 --- /dev/null +++ b/src/TableHead.js @@ -0,0 +1,20 @@ +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/TableRow.js b/src/TableRow.js new file mode 100644 index 000000000..d07a0ab04 --- /dev/null +++ b/src/TableRow.js @@ -0,0 +1,30 @@ +import { useState } from "react"; +import moment from "moment"; + +const TableRow = (props) => { + const [active, setActive] = useState(false); + function handleClick() { + setActive(!active); + } + let result = props.result; + return ( + + {result.id} + {result.title} + {result.firstName} + {result.surname} + {result.email} + {result.roomId} + {result.checkInDate} + {result.checkOutDate} + {moment(result.checkOutDate).diff(result.checkInDate, "days")} + + + + + ); +}; + +export default TableRow; diff --git a/src/TouristInfoCard.js b/src/TouristInfoCard.js new file mode 100644 index 000000000..8e34de9b2 --- /dev/null +++ b/src/TouristInfoCard.js @@ -0,0 +1,17 @@ +import React from "react"; + +const TouristInfoCard = (props) => { + return ( +
    + +
    +

    {props.title}

    +

    {props.description}

    + + Read more + +
    +
    + ); +}; +export default TouristInfoCard; diff --git a/src/TouristInfoCards.js b/src/TouristInfoCards.js new file mode 100644 index 000000000..ff8bbcf58 --- /dev/null +++ b/src/TouristInfoCards.js @@ -0,0 +1,29 @@ +import React from "react"; +import TouristInfoCard from "./TouristInfoCard"; + +const TouristInfoCards = () => { + return ( +
    + + + +
    + ); +}; + +export default TouristInfoCards; diff --git a/src/index.css b/src/index.css index 4607bb217..5eb9553b0 100644 --- a/src/index.css +++ b/src/index.css @@ -24,3 +24,8 @@ body { .search-row input { margin-right: 10px; } + +.grey { + background-color: rgb(115, 112, 112); + color:white; +} \ No newline at end of file