28. Date picker

Instructions: Add the js-datepicker package to your project using npm install, and import it at the top of your booking table component. Add different IDs to your ‘check in date’ and ‘check out date’ <input> 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

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.

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
• some may have bugs or may reduce accessibility by recreating native elements

(js-datepicker recreates HTML’s native datepicker element)

Think about some of the code you have written in this project. Are there any packages available that might have helped you to complete the features?

For example, #26 used validation. Searching npmjs.com for ‘validate’ shows multiple packages, such as ‘validator’ and ‘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?
• If I decide to use this package and it breaks, will I know how to fix it or replace it?

Depends on #24

Instructions:

Add validation to some fields from #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.

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’?

Instructions:

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.

Test:

• Each column in the table should be clickable to sort results in ascending or descending order.

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.

Show a loading message

Instructions:

Show a loading state in <Bookings /> while the data from the server is being fetched. To test this, try loading data from https://cyf-react.glitch.me/delayed, which has a 5 second delay before returning the data. You will need to use another state to record when your application is loading data (this can be a boolean) and display a loading message whenever the application is loading data.

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

Test:

• A message inviting the user to wait should be displayed on the screen until bookings data can be rendered on the screen.
• When bookings are rendered, the loading message should be hidden.