π·οΈ backlog for sprint 4
React-Module-Project π
Feature Datepicker π Clone
Feature Datepicker π
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?
- ποΈ Priority Stretch
- π¦ Size Large
- π Week 4
- 𧩠Feature
- 𧩠Feature
- π¦ Size Large
- π Week 4
- ποΈ Priority Stretch
Feature Error Message π Clone
Feature Error Message π
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.
- π Priority Mandatory
- π Size Small
- π Week 3
- π Week 4
- βοΈ Dependent ticket
- π Week 4
- π Week 3
- π Size Small
- π Priority Mandatory
- βοΈ Dependent ticket
Feature Loading Message π Clone
Feature Loading Message π
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.
- π Priority Mandatory
- π Size Medium
- π Week 4
- 𧩠Feature
- 𧩠Feature
- π Week 4
- π Size Medium
- π Priority Mandatory
Feature Sort Table Columns π Clone
Feature Sort Table Columns π
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.
- π Priority Mandatory
- π Size Medium
- π Week 4
- 𧩠Feature
- 𧩠Feature
- π Week 4
- π Size Medium
- π Priority Mandatory
Feature Validate AddBooking π Clone
Feature Validate AddBooking π
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’?
- ποΈ Priority Stretch
- π Size Medium
- π Week 4
- 𧩠Feature
- 𧩠Feature
- π Week 4
- π Size Medium
- ποΈ Priority Stretch