| A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | Y | Z | AA | |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
1 | Number | Title | Body | Revision | Labels | ||||||||||||||||||||||
2 | 27 | Feature Datepicker | ### 28. Date picker **Instructions:** Add the [js-datepicker](https://www.npmjs.com/package/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](https://www.npmjs.com/package/js-datepicker#basic-usage) **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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date) 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](https://www.npmjs.com/search?q=validate)' shows multiple packages, such as '[validator](https://www.npmjs.com/package/validator)' and '[Validate](https://www.npmjs.com/package/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? | ### Feature: Datepicker AS A user of the hotel booking app I WANT to select check-in and check-out dates SO THAT I can specify my booking dates easily. #### Acceptance Criteria/Tests ##### Scenario: Select check-in date GIVEN I am on the booking form WHEN I click on the 'check in date' input THEN a datepicker should appear allowing me to select a date. ##### Scenario: Select check-out date GIVEN I am on the booking form WHEN I click on the 'check out date' input THEN a datepicker should appear allowing me to select a date. | 🏝️ Priority Stretch, 🦑 Size Large, 📅 Week 4, 🧩 Feature | ||||||||||||||||||||||
3 | 26 | 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'? | ### Feature: Validate AddBooking AS A user of the hotel booking app I WANT validation feedback when adding a booking SO THAT I can ensure my booking details are correct. #### Acceptance Criteria/Tests ##### Scenario: Validate first and last name GIVEN I am adding a booking WHEN I submit the form without a first or last name THEN I should see an error message indicating they are required. ##### Scenario: Validate email format GIVEN I am adding a booking WHEN I submit the form with an incorrect email format THEN I should see an error message indicating the correct format is needed. ##### Scenario: Validate room ID GIVEN I am adding a booking WHEN I submit the form with a room ID not between 0 and 100 THEN I should see an error message indicating the valid room ID range. | 🏝️ Priority Stretch, 🐂 Size Medium, 📅 Week 4, 🧩 Feature | ||||||||||||||||||||||
4 | 25 | 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. | ### Feature: Sort Table Columns AS A user of the hotel booking app I WANT to sort the booking table columns SO THAT I can view the bookings in ascending or descending order. #### Acceptance Criteria/Tests ##### Scenario: Sort columns in ascending order GIVEN I am viewing the booking table WHEN I click on a column header THEN the results should be sorted in ascending order based on that column. ##### Scenario: Toggle sort order on column click GIVEN I have already sorted a column in ascending order WHEN I click on the same column header again THEN the results should be sorted in descending order based on that column. | 🏕 Priority Mandatory, 🐂 Size Medium, 📅 Week 4, 🧩 Feature | ||||||||||||||||||||||
5 | 24 | 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. | ### Feature: AddBooking Form AS A user of the hotel booking app I WANT to submit a new booking through a form SO THAT I can add bookings to the table dynamically. #### Acceptance Criteria/Tests ##### Scenario: Add new booking via form GIVEN I am on the booking form page WHEN I fill in all the booking details and submit the form THEN the new booking should be displayed in the result table. | 🏝️ Priority Stretch, 📅 Week 3, 🧩 Feature | ||||||||||||||||||||||
6 | 23 | 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. | ### Feature: Error Message for Bookings Data Fetch Failure AS A user of the hotel booking app I WANT to be informed of any errors during data fetching SO THAT I am aware of issues preventing data from being displayed. #### Acceptance Criteria/Tests ##### Scenario: Display error message on data fetch failure GIVEN I am accessing the bookings section of the app WHEN there is an HTTP error while fetching data from `https://cyf-react.glitch.me/error` THEN an error message should be displayed on the screen. | 🏕 Priority Mandatory, 🐇 Size Small, 📅 Week 3, 📅 Week 4, ♟️ Dependent ticket | ||||||||||||||||||||||
7 | 22 | 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. | ### Feature: Loading Message for Bookings Data AS A user of the hotel booking app I WANT to see a loading message while bookings data is being fetched SO THAT I understand the app is working on retrieving the data. #### Acceptance Criteria/Tests ##### Scenario: Display loading message during data fetch GIVEN I am accessing the bookings section of the app WHEN the bookings data is being fetched from `https://cyf-react.glitch.me/delayed` THEN a message should be displayed inviting me to wait. ##### Scenario: Hide loading message once data is loaded GIVEN the loading message is displayed WHEN the bookings data has been successfully fetched and rendered THEN the loading message should be hidden. | 🏕 Priority Mandatory, 🐂 Size Medium, 📅 Week 4, 🧩 Feature | ||||||||||||||||||||||
8 | 21 | 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. | ### Feature: Customer Profile Display - Iteration 2 AS A user of the hotel booking app I WANT to fetch and view detailed customer profiles by clicking a button SO THAT I can see more detailed information about customers, including their VIP status and contact details. #### Acceptance Criteria/Tests ##### Scenario: Fetch and display customer profile on button click GIVEN I am viewing the search results WHEN I click the "Show profile" button for a customer THEN the customer's profile, including ID, email, VIP status, and phone number, should be fetched from `https://cyf-react.glitch.me/customers/<ID>` and displayed. | 🏕 Priority Mandatory, 🐇 Size Small, 📅 Week 3, ♟️ Dependent ticket | ||||||||||||||||||||||
9 | 20 | 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 <ID> Profile", where <ID> 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. | ### Feature: Customer Profile Display - Iteration 1 AS A user of the hotel booking app I WANT to view a customer's profile by clicking a button SO THAT I can access more information about the customer. #### Acceptance Criteria/Tests ##### Scenario: Initial state with no profile displayed GIVEN I am on the bookings page with the search results displayed WHEN no profile button has been clicked THEN no customer profile should be displayed. ##### Scenario: Display customer profile on button click GIVEN I am viewing the search results WHEN I click the "Show profile" button for a customer THEN the text "Customer <ID> Profile" should appear, where <ID> is the id of the clicked customer. | 🏕 Priority Mandatory, 🐇 Size Small, 📅 Week 3, 🧩 Feature | ||||||||||||||||||||||
10 | 19 | 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. | ### Feature: Implement Search Functionality AS A developer working on the hotel booking app I WANT to filter bookings based on user search input SO THAT users can find bookings by first name or surname. #### Acceptance Criteria/Tests ##### Scenario: Filter bookings by name GIVEN I have entered a name into the search input WHEN I submit the search form THEN the bookings table should only display bookings that match the entered first name or surname. | 🐂 Size Medium, 📅 Week 3, 🧩 Feature, ♟️ Dependent ticket | ||||||||||||||||||||||
11 | 18 | 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 | ### Feature: Form Submission for Search AS A developer working on the hotel booking app I WANT to trigger a search when the form is submitted SO THAT I can filter bookings based on the search input. #### Acceptance Criteria/Tests ##### Scenario: Trigger search on form submission GIVEN I have entered text into the search input field WHEN I submit the search form THEN the search should be performed using the entered input, and the form submission does not reload the page. | 🐇 Size Small, 📅 Week 3, 🧩 Feature, ♟️ Dependent ticket | ||||||||||||||||||||||
12 | 17 | 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 | ### Feature: Search Input State Management AS A developer working on the hotel booking app I WANT to store search input in a state SO THAT I can dynamically filter bookings based on user input. #### Acceptance Criteria/Tests ##### Scenario: Update search input state on user input GIVEN I am on the search page of the app WHEN I type into the search input field THEN the `searchInput` state should be updated with the text I typed, and the current value is logged to the console. | 🐂 Size Medium, 📅 Week 3, 🧩 Feature | ||||||||||||||||||||||
13 | 16 | 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. | ### Feature: Remote Bookings Loading AS A developer working on the hotel booking app I WANT to load bookings from a remote API SO THAT the app displays up-to-date booking information. #### Acceptance Criteria/Tests ##### Scenario: Load and display bookings from API GIVEN I am on the bookings page of the app WHEN the page loads THEN the bookings should be fetched from `https://cyf-react.glitch.me` and displayed on the page. | 🐂 Size Medium, 📅 Week 3, 🧩 Feature | ||||||||||||||||||||||
14 | 15 | 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. | ### Feature: Interactive Booking Table Rows AS A user of the hotel booking app I WANT to highlight booking rows when clicked SO THAT I can visually manage selected bookings. #### Acceptance Criteria/Tests ##### Scenario: Highlight booking row on click GIVEN I am viewing the booking table WHEN I click on a booking row THEN the row should be highlighted with a different colour. ##### Scenario: Unhighlight booking row on second click GIVEN a booking row is highlighted WHEN I click on the same booking row again THEN the row's highlight should be removed, returning it to its original state. | 🏝️ Priority Stretch, 🐂 Size Medium, 📅 Week 2, 🧩 Feature | ||||||||||||||||||||||
15 | 14 | 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. | ### Feature: State Management for Bookings AS A developer working on the hotel booking app I WANT to manage bookings through state SO THAT the app can dynamically display bookings data. #### Acceptance Criteria/Tests ##### Scenario: Render bookings from state GIVEN I am on the bookings page of the app WHEN the page loads THEN the bookings should be displayed on the page, sourced from the `bookings` state variable. | 🏕 Priority Mandatory, 🐇 Size Small, 📅 Week 2, 🧩 Feature | ||||||||||||||||||||||
16 | 13 | 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 | ### Feature: Dynamic Order Types in Restaurant Component AS A user of the restaurant app I WANT to order different types of items (Pizzas, Salads, Chocolate cake) SO THAT I can see separate order counts for each item type. #### Acceptance Criteria/Tests ##### Scenario: Display and increment different order types GIVEN I am on the restaurant section of the app WHEN the page loads THEN I should see separate order components for Pizzas, Salads, and Chocolate cake, each displaying a count of orders. ##### Scenario: Independently increment order counts GIVEN I am viewing the order components for Pizzas, Salads, and Chocolate cake WHEN I click the "Add" button for any order type THEN only the count for that specific order type should increment, without affecting the others. | 🐂 Size Medium, 📅 Week 2, 🧩 Feature, ♟️ Dependent ticket | ||||||||||||||||||||||
17 | 12 | 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. | ### Feature: Order Component Refactor AS A developer working on the restaurant app I WANT to modularize the order functionality into its own component SO THAT the app's structure is more maintainable and scalable. #### Acceptance Criteria/Tests ##### Scenario: Render pizza order in Order component GIVEN I am on the restaurant section of the app WHEN the page loads THEN the pizza order should be displayed within an `Order` component. ##### Scenario: Increment pizza orders GIVEN I am viewing the pizza order in the `Order` component WHEN I click on the "Add" button THEN the number of pizza orders should increment accordingly. | 🐇 Size Small, 📅 Week 2, 🧩 Feature, ♟️ Dependent ticket | ||||||||||||||||||||||
18 | 11 | Feature RestaurantButton | **Instructions:** Extract the `<button>` currently in the `<Restaurant />` component to a new component named `RestaurantButton`. Pass the `orderOne` function as a prop to the `<RestaurantButton />` component and use this prop in the `onClick` handler. **Test:** - [ ] Clicking the button should increment the number of pizzas. | ### Feature: RestaurantButton AS A user of the restaurant app I WANT a dedicated button component for ordering SO THAT I can increment the number of pizzas ordered. #### Acceptance Criteria/Tests ##### Scenario: Increment pizza order GIVEN I am on the restaurant app page WHEN I click on the 'Order' button THEN the number of pizzas ordered should increase by one. | 🏕 Priority Mandatory, 🦔 Size Tiny, ♟️ Dependent ticket | ||||||||||||||||||||||
19 | 10 | 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 | ### Feature: Add more pizzas AS A user of the restaurant app I WANT to increase my pizza order with a button click SO THAT I can add more pizzas to my order easily. #### Acceptance Criteria/Tests ##### Scenario: Increase pizza order count GIVEN I am on the restaurant app page WHEN I click the 'Add' button THEN the number of pizzas ordered should increase by one. | 🏕 Priority Mandatory, 🐇 Size Small, 📅 Week 2, 🧩 Feature, ♟️ Dependent ticket | ||||||||||||||||||||||
20 | 9 | 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. | ### Feature: Restaurant State Management AS A user of the restaurant component in the hotel booking app I WANT to dynamically manage the number of pizzas ordered SO THAT the order count updates when I add pizzas. #### Acceptance Criteria/Tests ##### Scenario: Initialize pizza order count GIVEN I am on the restaurant section of the app WHEN no orders have been made THEN the number of ordered pizzas should display as **0** on the screen. | 🏕 Priority Mandatory, 🦔 Size Tiny, 📅 Week 2 | ||||||||||||||||||||||
21 | 8 | 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. | ### Feature: Display Restaurant Component AS A user of the hotel booking app I WANT to see the restaurant orders section SO THAT I can interact with the restaurant ordering system. #### Acceptance Criteria/Tests ##### Scenario: Render restaurant orders on the app GIVEN I am on the hotel booking app page WHEN the page loads THEN the restaurant orders section should be displayed underneath the bookings section. | 🏕 Priority Mandatory, 🦔 Size Tiny, 📅 Week 2 | ||||||||||||||||||||||
22 | 7 | Feature Calculate Duration | **Instructions:** ## Dependent ticket : complete #6 before beginning this Add another column to your `<SearchResults />` table which shows the number of nights a guest is staying. **Hint:** Try installing the [day.js library](ttps://day.js.org/) (you'll need to install it with `npm install dayjs --save`) and using the [`.diff()` method](https://day.js.org/docs/en/display/difference) to compare dates. **Test:** - [ ] Each booking in your table should show the number of nights in a separate column. For example, Mr John Doe has a booking for **2** nights. | ### Feature: Calculate Duration in SearchResults AS A user of the hotel booking app I WANT to see the number of nights for each booking SO THAT I can understand the duration of each stay. #### Acceptance Criteria/Tests ##### Scenario: Display number of nights per booking GIVEN I am viewing the booking table WHEN the table is displayed with bookings THEN each booking should include a column showing the number of nights stayed, calculated from the check-in and check-out dates. | 🏕 Priority Mandatory, 🦑 Size Large, 📅 Week 1, 🧩 Feature, ♟️ Dependent ticket | ||||||||||||||||||||||
23 | 6 | Feature SearchResults | ## Create a table to show hotel bookings **Instructions:** Create a `<SearchResults />` component that shows hotel bookings in a `<table>` element. Each booking will have an `id`, `title`, `first name`, `surname`, `email`, `room id`, `check in date` and `check out date`. You can make up data in the `<SearchResults />` component to show in the table. Then show `<SearchResults />` component within the `<Bookings />` component that is provided. Be sure to split out your components into small well-named components. **Hint:** Look in the `<Bookings />` component for how to import data from a JSON file. ## AS A TEAM This ticket is too large. Break down this ticket into smaller, well named components, just like we did with Search and SearchButton, Card and Deck, App and AppHeader. Write your tickets and share them out. You should try to pair on this larger feature as much as you can. Use class time if you can. **Hint:** You will find some useful `<table>` examples in the [Bootstrap documentation for tables](https://getbootstrap.com/docs/4.2/content/tables/#examples). **Test:** - [ ] A table should render with a column for each booking attribute. - [ ] The table can show more than one booking. | ### Feature: SearchResults Component AS A user of the hotel booking app I WANT to view hotel bookings in a table SO THAT I can easily see all booking details. #### Acceptance Criteria/Tests ##### Scenario: Display booking table GIVEN I am on the hotel booking app page WHEN I navigate to the bookings section THEN a table should render showing columns for id, title, first name, surname, email, room id, check in date, and check out date. ##### Scenario: Show multiple bookings in the table GIVEN the booking table is displayed WHEN there are multiple bookings THEN the table should show each booking with all its details. | 🏕 Priority Mandatory, 🐋 Size X-Large, 📅 Week 1, 🧩 Feature | ||||||||||||||||||||||
24 | 5 | Feature Footer | **Instructions:** Create a `<Footer />` component which should be rendered at the bottom of the page. Pass the following array as a prop to this component: `["123 Fake Street, London, E1 4UD", "hello@fakehotel.com", "0123 456789"]`. Inside the component, use the data you passed as a prop to render a `<ul>` list with each item of the array displayed as a `<li>`. **Hint:** The `.map()` method will be useful. **Test:** The footer should render at the bottom of the page with each address property displayed as a list item. | ### Feature: Footer Component AS A user of the hotel booking app I WANT to see the footer with contact information SO THAT I can find contact details easily. #### Acceptance Criteria/Tests ##### Scenario: Display footer with contact details GIVEN I am on the hotel booking app page WHEN the page loads THEN the footer should be displayed at the bottom with the address, email, and phone number listed. | 🏕 Priority Mandatory, 🐂 Size Medium, 📅 Week 1, 🧩 Feature | ||||||||||||||||||||||
25 | 4 | Feature Deck | ## Create and use a new component to show info cards ### Dependent ticket. Complete and merge #3 before beginning this ticket. **Instructions:** In `src/App.js`, above the `<Bookings />` component add a new component called `Deck` which shows 3 _cards_. The cards must link to `peoplemakeglasgow.com`, `visitmanchester.com` and `visitlondon.com`. The cards should contain the name of the city and an image of the city. There is sample data in `data/fakeCards.json` **Test:** - [ ] 3 info cards should be displayed on the page for each city (Glasgow, Manchester, London). - [ ] Each card should link to the correct website. - [ ] Each card should contain an image | ### Feature: Deck Component AS A user of the hotel booking app I WANT to see a deck of info cards SO THAT I can access information about different cities easily. #### Acceptance Criteria/Tests ##### Scenario: Display three city info cards GIVEN I am on the hotel booking app page WHEN the page loads THEN three info cards for Glasgow, Manchester, and London should be displayed. ##### Scenario: Link to city websites GIVEN the info cards are displayed WHEN I click on a card THEN it should link to the respective city's official website. ##### Scenario: Show city images on cards GIVEN the info cards are displayed WHEN I view each card THEN it should display an image representing the city. | 🏕 Priority Mandatory, 🐂 Size Medium, 📅 Week 1, 🧩 Feature, ♟️ Dependent ticket | ||||||||||||||||||||||
26 | 3 | Feature Card | **Instructions:** - [ ] Create a card component in components/Card - [ ] Your card component should accept props and render an image, title, and url **Test:** - [ ] It should render a title - [ ] It should render an image with alt Text - [ ] It should contain or be a link | ### Feature: Card Component AS A developer using the hotel booking app I WANT a reusable card component SO THAT I can display information in a consistent format. #### Acceptance Criteria/Tests ##### Scenario: Render card title GIVEN a card component is used WHEN it receives a title prop THEN the title should be displayed on the card. ##### Scenario: Render card image with alt text GIVEN a card component is used WHEN it receives image and alt text props THEN the image should be displayed on the card with the provided alt text. ##### Scenario: Card link functionality GIVEN a card component is used WHEN it receives a URL prop THEN the card should link to the provided URL. | 🐇 Size Small, 🔑 Priority Key, 📅 Week 1, 🧩 Feature | ||||||||||||||||||||||
27 | 2 | Feature AppHeader | **Instructions:** - [ ] Extract the `<header>` from the `src/App.js` file to be its own separate component called `AppHeader`. - [ ] Import and render the `<AppHeader />` component within `src/App.js`. - [ ] In the `AppHeader` component, render the hotel's logo in an `<img>` . Find the logo in /assets **Test:** - [ ] The header should be displayed with a logo on the page. | ### Feature: AppHeader AS A user of the hotel booking app I WANT a separate header component SO THAT the app's branding is clearly visible and modular. #### Acceptance Criteria/Tests ##### Scenario: Display header with logo GIVEN I am on the hotel booking app page WHEN the page loads THEN the header with the hotel's logo should be displayed. | 🐇 Size Small, 🔑 Priority Key, 📅 Week 1, 🧩 Feature | ||||||||||||||||||||||
28 | 1 | Feature SearchButton | **Feature:** - [ ] Extract the search `<button>` from the `src/Search.js` file to be its own separate component. - [ ] Place your extracted component in `SearchButton.jsx`. - [ ] Import and use this new component in `src/Search.js`. **Test:** - [ ] The search button should still render on the page. | ### Feature: SearchButton AS A user of the hotel booking app I WANT a separate search button component SO THAT the search functionality is modular and reusable. #### Acceptance Criteria/Tests ##### Scenario: Render search button GIVEN I am on the hotel booking app page WHEN the page loads THEN the search button should be displayed. | 🐇 Size Small, 🔑 Priority Key, 📅 Week 1, 🧩 Feature | ||||||||||||||||||||||