Instructions:

Add a form with <input>s for each of the booking fields (first name, surname, email, title, room id, check in date, check out date) and a ‘Submit’ <button> element 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.

Test:

• When adding a new booking in the form, it should be displayed in the table.

Show an error message

Instructions:

Display an error message in <Bookings /> if there is an HTTP error when fetching data from the server. To test this, try loading data from https://cyf-react.glitch.me/error, which will return a 500 HTTP error.

Hint: Try looking at your Pokemon app for an example.

If you complete #22 and merge it, you will likely reduce the work needed here

Test:

• When loading bookings data from the /error endpoint, an error message should be displayed on the screen.

Display a customer profile - iteration 2

Depends on #20

Instructions:

When a “Show profile” button is clicked in the table, fetch the corresponding customer profile from https://cyf-react.glitch.me/customers/<ID> in the <CustomerProfile /> component. A customer profile should show the customer ID, their email, if they are VIP and their phone number in a list.

Hint: You need to use useEffect and the correct dependency array. You’ll need to fetch customers data from the API every time a “Show profile” button is clicked and render it accordingly.

Test:

When you click on a “Show profile” button in the table, the corresponding customer profile is loaded and rendered on the screen.

20. Display a customer profile - iteration 1

Instructions:

Ccreate a new <CustomerProfile /> component. This component should be rendered next to the table in the <SearchResults /> component. This component should receive one prop id.

Add a new column in the table of the <SearchResults /> component and display a <button> for each row.
The text of the button should read “Show profile”

When clicking on a “Show profile” button for a given row, the component <CustomerProfile /> should display the text “Customer Profile”, where is the id of the selected customer. Initially, the <CustomerProfile /> component doesn’t show anything.

Hint: You need to record the selected customer id after clicking on a “Show profile” button. In which component do you think this state should be defined?

Test:

When first showing the page, no customer profile is displayed. When clicking the first “Show profile” button of the table, the text “Customer 1 profile” appears. When clicking the second “Show profile” button of the table, the text “Customer 2 profile” appears instead.

Depends on #18

Instructions:

Still in the <Bookings /> component, implement the search method. It must use the searchVal variable (that you just passed from the <Search /> component) to filter the search results. The filter function should return bookings where firstName or surname match searchVal. Once filtered, use the setBookings function to update the results rendered in <SearchResults />.

Test:

Verify that when you enter an existing first name or surname and submit the form, the results are filtered accordingly in the customers table.

18. Triggering search when submitting the form

Depends on #17

Instructions:

Still in the <Search /> component, add a onSubmit handler to the <form> tag. When the form is submitted (try clicking the search button), get the value of the state searchInput and pass it as a parameter to the search prop function that has been provided for you (the search prop is passed from the <Bookings /> component).

Note: Your submit handler should take an event parameter and add the line event.preventDefault() to prevent the browser from implicitly submitting the form

Test:

Given a searchInput field with input values entered
When the form is submitted
Then the value of searchInput is passed as a parameter to search

Storing the search input in a state

Instructions:

Implement the functionality to search for a customer name given the text typed into the customer name field.

In the src/Search.js file, declare a new state variable named searchInput with the corresponding setter function setSearchInput (hint: use the React function useState). The initial value of the searchInput variable can be an empty string. Add a value property to the <input> tag that is set to the new searchInput state variable.

Create a new function handleSearchInput taking an event parameter. This function should use the setSearchInput function to update the state variable searchInput with what the user typed in the input field. Finally, add a onChange prop to the <input> tag that is set to the function handleSearchInput. Use console.log() to output the value received in the handleSearchInput function.

Hint: Use event.target.value to get the input value.

Test:

• Given a searchInput
• When I type in the field
• Then the value is logged

16. Load bookings remotely

Instructions:

Instead of getting the existing bookings from the file data/fakeBookings.json, we will get and load the bookings from a remote API. In the <Bookings /> component, use the React function useEffect to console.log() some text only when the page first renders on the screen. Verify that when you refresh the page, the text appears once in the console. Then, in the useEffect function, use the fetch() function to get data from https://cyf-react.glitch.me.

Try to pair or mob on this feature.

Hints:

• Replace FakeBookings in the bookings state and initialise it with [] (because we haven’t fetched any results yet!)
• After calling the fetch() function, 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 setBookings to update the results

Test:

• Verify the customers data are still displayed correctly in the table.