This is the react
frontend for the CYF-Hotel.
- Follow the instructions to fork & clone the GitHub repo
- Install the dependencies by running
npm install
- Launch server using
npm start
- It should automatically open http://localhost:3000/
-
Extract the
<button>
in thesrc/Search.js
component to be its own separate component -
Create a new component named
Heading
which renders the hotel's logo in an<img>
(it doesn't matter what the logo is). Also move the<header>
insrc/App.js
to the new component. Make sure that you import and render the<Heading />
component withinsrc/App.js
. -
Above the
<Bookings />
component add a new component calledTouristInfoCards
which shows 3 cards. They must link topeoplemakeglasgow.com
,visitmanchester.com
andvisitlondon.com
. The cards should be contain the name of the city and an image of the city. You can use the CSS classes from Bootstrap, which is already installed for you -
Add a
<Footer />
component at the bottom of the page. Pass the following array as a prop to this component:["123 Fake Street, London, E1 4UD", "[email protected]", "0123 456789"]
. Inside the component, use the data you passed as a prop to show a<ul>
list. Hint: the.map()
method will by useful -
Create a
<SearchResults />
component that shows hotel bookings in a<table>
element. Each booking will have an id, title, first name, surname, email, room id, check in date and check out date. You can make up data to show in the table. Then show<SearchResults />
component within the<Bookings />
component that is provided for you. Be sure to split out your components into small well-named components, similar to the method used in exercise 1. Hint: You will find some useful<table>
examples in the Bootstrap documentation for tables -
Instead of using your hard-coded data in the
<SearchResults />
component, load data from thesrc/data/fakeBookings.json
file in the<Bookings />
component and pass it as a prop to<SearchResults />
. Hint: look in the<Bookings />
component for how to import data from a JSON file. -
Add another column to your
<SearchResults />
table which shows the number of days each booking is staying. (Hint: try installing the moment.js library and using the.diff()
method to compare dates)
-
Within
src/App.js
, render the<Restaurant />
component (that is provided for you insrc/Restaurant.js
) underneath the<Bookings />
component. Then convert the<Restaurant />
component to a class component. -
Add a method to the
Restaurant
class namedaddOrder
. Useconsole.log
to log a "Add order" message. Remember to use theaddOrder = () => {}
syntax. Add aonClick
handler to the Add<button>
that callsthis.addOrder
. Ensure that clicking on the button logs your "Add order" message in the console. -
Extract the
<button>
in the<Restaurant />
component to a new component namedRestaurantButton
. Pass thethis.addOrder
method as a prop to the<RestaurantButton />
component and use this prop in theonClick
handler. Ensure that clicking the button still logs the "Add order" message. -
Within the
<Restaurant />
component, initialise state to have a key namedorders
and a value of 0 (hint: use theconstructor
method). Then replace theorders
variable within therender
method withthis.state.orders
that we just created. -
Within the
addOrder
method of<Restaurant />
, use thethis.setState
method to increment theorders
state by 1. Hint: remember that if we are using previous state to calculate the new state, we must use a callback function withthis.setState
. -
Extract the
<li>
containing "Pizzas" within the<Restaurant />
component to a new component namedOrders
. Moveorders
initial state set up in theconstructor
and theaddOrder
method from<Restaurant />
to the new<Orders />
component. Make sure that clicking the "Add" button still increments the number of orders. Then replace the hard-coded string "Pizzas" in<Orders />
with a prop namedorderType
. Finally, render another<Orders />
component but this time with the proporderType="Salads"
. -
Within the
<SearchResults />
component or it's child components, add anonClick
handler to each row in the table (hint: on the<tr>
element). When clicked, the row is "selected" and highlighted with a different colour. Hint: use state to add a class to theclassName
. When clicking on the row for a second time, "unselect" the row and remove the coloured highlighting.
-
Within your
<Header />
component, render the<Clock />
component (that is provided for you insrc/Clock.js
). Fix the problem where thesetTimeout
timer is not cleared if the component is unmounted. Hint: look at the Clock exercise you did in class. -
Convert the
src/Search.js
component into a class component. Then use a ref to assignthis.input
to the<input>
element. -
Still in the
<Search />
component, add anonSubmit
handler to the<form>
element. When the form is submitted (try clicking the search button), get the value ofthis.input
and pass it as a parameter to thethis.props.search
prop function that has been provided for you. Look in the console, you should see the text that is typed in the search box when submitting the form. -
In the
<Bookings />
component, use state to hold theFakeBookings
data instead of directly passing it to<SearchResults />
. Hint: use aconstructor
method to initialise the state with theFakeBookings
variable. -
Still in the
<Bookings />
component, implement thesearch
method. It must use thesearchVal
(that you just passed from the<Search />
component) to filter the search results. The filter function should return results wherefirstName
orsurname
matchsearchVal
. Once filtered, usethis.setState
to update the results rendered in<SearchResults />
. -
Again in the
<Bookings />
component, use thefetch()
function to get data fromhttps://cyf-react.glitch.me
. Hints:
- Replace
FakeBookings
in the state initialise withnull
(because we haven't fetched any results yet!) - Add a
componentDidMount()
method that calls thefetch()
function and then use.then()
to handle the response. Try looking at your Pokemon app that you worked on in class for an example - When the response comes back use
this.setState
to update the results
-
Now show a loading state in
<Bookings />
while the data from the server is being fetched. To test this, try loading data fromhttps://cyf-react.glitch.me/delayed
, which has a 5 second delay before returning the data. Hint: try looking at your Pokemon app that you worked on in class for an example -
Finally, display an error message in
<Bookings />
if there is an HTTP error when fetching data from the server. To test this, try loading data fromhttps://cyf-react.glitch.me/error
, which will return a 500 HTTP error. Hint: Try looking at your Pokemon app that you worked on in class for an example
-
Add a form with
<input>
s for each of the booking fields (first name, surname, title, room id, check in date, check out date) to the bottom of the page. Submitting the form adds the booking to the result table. Note that the new booking won't persist if you refresh the page. -
Add an
onClick
handler to the columns of the result table, which sorts the results ascending (A -> Z). Clicking the column again will reverse the sort order to descending (Z -> A). Hint: try using the.sort()
method with a callback to do custom sorting