π·οΈ backlog for sprint 3
React-Module-Project π
Feature AddBooking form π Clone
Feature AddBooking form π
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.
- ποΈ Priority Stretch
- π Week 3
- 𧩠Feature
- 𧩠Feature
- π Week 3
- ποΈ Priority Stretch
Feature CustomerProfile π Clone
Feature CustomerProfile π
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.
- π Priority Mandatory
- π Size Small
- π Week 3
- 𧩠Feature
- 𧩠Feature
- π Week 3
- π Size Small
- π Priority Mandatory
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 fetch bookings π Clone
Feature fetch bookings π
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.
- π Size Medium
- π Week 3
- 𧩠Feature
- 𧩠Feature
- π Week 3
- π Size Medium
Feature fetch CustomerProfile data π Clone
Feature fetch CustomerProfile data π
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.
- π Priority Mandatory
- π Size Small
- π Week 3
- βοΈ Dependent ticket
- π Week 3
- π Size Small
- π Priority Mandatory
- βοΈ Dependent ticket
Feature implement Search functionality π Clone
Feature implement Search functionality π
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.
- π Size Medium
- π Week 3
- 𧩠Feature
- βοΈ Dependent ticket
- 𧩠Feature
- π Week 3
- π Size Medium
- βοΈ Dependent ticket
Feature Search onSubmit π Clone
Feature Search onSubmit π
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
- π Size Small
- π Week 3
- 𧩠Feature
- βοΈ Dependent ticket
- 𧩠Feature
- π Week 3
- π Size Small
- βοΈ Dependent ticket
Feature Search State π Clone
Feature Search State π
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
- π Size Medium
- π Week 3
- 𧩠Feature
- 𧩠Feature
- π Week 3
- π Size Medium