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 (you’ll need to install it with npm install dayjs --save) and using the .diff() method 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.

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.

Test:

• A table should render with a column for each booking attribute.
• The table can show more than one booking.

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.

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

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

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:

• 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.