🏷️ backlog for sprint 2

React-Module-Project πŸ”—  

Feature Active Row πŸ”— Clone

Feature Active Row πŸ”—

Highlight booking row when clicked

Instructions:

Within the <SearchResults /> component or its child components, add an onClick handler to each row in the table (hint: on the <tr> element). When clicked, the row is “selected” and highlighted with a different colour. When clicked again, the row is unselected and the coloured highlighting is removed.

Hint: Use a new state variable for each row to record if the row is selected or not, and use this value to set a class to the className prop of the row.

Test:

  • Verify that each row of your table can be highlighted (on and off) independently when being clicked.
  • 🏝️ Priority Stretch
  • πŸ‚ Size Medium
  • πŸ“… Week 2
  • 🧩 Feature
  • 🧩 Feature
  • πŸ“… Week 2
  • πŸ‚ Size Medium
  • 🏝️ Priority Stretch
Feature Add more pizzas πŸ”— Clone

Feature Add more pizzas πŸ”—

Dependent ticket: complete and merge #9 before starting this ticket

Instructions:

In the <Restaurant /> component, create a new function named orderOne. The orderOne function doesn’t take any parameters and should use the setOrders function to increment the orders state variable by 1. Then, add a onClick handler to the Add <button> that calls the orderOne function when it’s being clicked.

Test:

When the Add button is clicked, the number of pizzas increases by 1

  • πŸ• Priority Mandatory
  • πŸ‡ Size Small
  • πŸ“… Week 2
  • 🧩 Feature
  • β™ŸοΈ Dependent ticket
  • 🧩 Feature
  • πŸ“… Week 2
  • πŸ‡ Size Small
  • πŸ• Priority Mandatory
  • β™ŸοΈ Dependent ticket
Feature Bookings state πŸ”— Clone

Feature Bookings state πŸ”—

Instructions:

In the <Bookings /> component, declare a new state bookings with the corresponding setter function setBookings to hold the FakeBookings data. Instead of passing FakeBookings directly to the <SearchResults /> component, pass the new bookings state variable.

Hint: The new bookings state should be initialised with the FakeBookings variable.

Test:

  • The bookings are still rendered correctly in the page.
  • πŸ• Priority Mandatory
  • πŸ‡ Size Small
  • πŸ“… Week 2
  • 🧩 Feature
  • 🧩 Feature
  • πŸ“… Week 2
  • πŸ‡ Size Small
  • πŸ• Priority Mandatory
Feature Order πŸ”— Clone

Feature Order πŸ”—

Instructions:

Extract the <li> containing “Pizzas” from the <Restaurant /> component to a new component named Order. Also, move the declaration of the orders state and the orderOne function from the <Restaurant /> component to the new <Order /> component. Use the <Order /> component in the <ul> list of the <Restaurant /> component.

Dependent on #11

Test:

  • The pizza order is still rendered on the page
  • Clicking on the “Add” button still increments the number of orders.
  • πŸ‡ Size Small
  • πŸ“… Week 2
  • 🧩 Feature
  • β™ŸοΈ Dependent ticket
  • 🧩 Feature
  • πŸ“… Week 2
  • πŸ‡ Size Small
  • β™ŸοΈ Dependent ticket
Feature orderType πŸ”— Clone

Feature orderType πŸ”—

Instructions:

Pass a new prop named orderType to the <Order /> component with the value “Pizzas”. Then render the orderType prop instead of “Pizzas” in the <Order /> component. Make sure that “Pizzas” is still displayed on the screen. In the <ul> list of the <Restaurant /> component, render 2 others <Order /> components but this time pass different values for the orderType prop: “Salads” and “Chocolate cake”.

Depends on #12

Test:

  • For each order, the number of items can be incremented independently.
  • Explain what is happening in your test description
  • πŸ‚ Size Medium
  • πŸ“… Week 2
  • 🧩 Feature
  • β™ŸοΈ Dependent ticket
  • 🧩 Feature
  • πŸ“… Week 2
  • πŸ‚ Size Medium
  • β™ŸοΈ Dependent ticket
Feature Restaurant πŸ”— Clone

Feature Restaurant πŸ”—

Instructions:

Within the src/App.js file, render the <Restaurant /> component (that is provided for you in src/Restaurant.js) underneath the <Bookings /> component.

Test:

  • The restaurant orders should render on the page.
  • πŸ• Priority Mandatory
  • πŸ¦” Size Tiny
  • πŸ“… Week 2
  • πŸ¦” Size Tiny
  • πŸ“… Week 2
  • πŸ• Priority Mandatory
Feature Restaurant State πŸ”— Clone

Feature Restaurant State πŸ”—

Instructions:

Working in Restaurant component

At the moment, the number of pizzas a guest can order is static and set to 0, even if they click on the ‘Add’ button. We will change that in the following to let a guest add more pizzas to their order. First, declare a new state variable orders along with the function to set the orders state setOrders. The initial value of the orders state should be 0. Use the new orders variable instead of the pizzas variable (that you can now delete).

Hint: You need to use the React function useState to create a state variable. Remember to import the function at the top with import React, {useState} from "react";.

Test:

  • The number of ordered pizzas is still 0 on the screen.
  • πŸ• Priority Mandatory
  • πŸ¦” Size Tiny
  • πŸ“… Week 2
  • πŸ¦” Size Tiny
  • πŸ“… Week 2
  • πŸ• Priority Mandatory