London10-Olha_Danylevska-React_Module-CYF_hotel_react #601
Conversation
Highlight booking row when clicked
fetch
| <div className="AllCards"> | ||
|
|
||
| <TouristInfoCards name="Manchester" src="https://cdn.britannica.com/42/116342-050-5AC41785/Manchester-Eng.jpg" | ||
| link="https://www.visitmanchester.com/" description="Manchester is the only UK city to feature in Lonely Planet's Best in Travel 2023 list and the only | ||
| UK city in National Geographic's influential ‘Best of the World’ list which annually sets out 25 of the must-see places to visit around the globe." /> | ||
|
|
||
| <TouristInfoCards name="London" src="https://images.musement.com/cover/0002/49/london-jpeg_header-148518.jpeg" | ||
| link="https://www.visitlondon.com/" description="Welcome to London! Discover the best of London with Visit London, the official guide to England’s | ||
| exciting capital. Find things to do in London, from iconic sightseeing spots and fun-filled days out to top restaurants, theatre and unmissable London events. If you’re not able to visit just yet, plan ahead to make the most of your next visit." /> | ||
|
|
||
| <TouristInfoCards name={"Glasgow"} src="https://www.visitscotland.com/blog/wp-content/uploads/2021/10/Park_Circus_and_Kelvingrove_Park.jpg.jpg" | ||
| link="https://peoplemakeglasgow.com/" description="You’re guaranteed to find accommodation in Glasgow which suits your taste and budget. Whether you’re looking for something uniquely Glaswegian, a trendy hotel, a vibrant hostel or | ||
| a comfortable city centre apartment, you can be assured of a warm welcome." /> | ||
|
|
||
| </div> |
There was a problem hiding this comment.
The TouristInfoCards component represents one card, yet it's plural (i.e. Cards not Card). I think it's better to have two components, first is TouristInfoCards which uses multiple TouristInfoCard components.
For example:
TouristInfoCards () =>
return (
TouristInfoCard(name = {"Glasgow"}
TouristInfoCard(name = {"London"}
etc.
)
You can also take the TouristInfoCards component to a new file to keep the App.js file simple and clean.
src/Bookings.js
Outdated
|
|
||
| }) | ||
| .then((data) => { | ||
| console.log("data----->", data) |
There was a problem hiding this comment.
nit: It's usually better to remove the debugging statements before you send your code for review.
src/SearchResults.js
Outdated
| let a = moment(client.checkOutDate) | ||
| let b = moment(client.checkInDate) |
There was a problem hiding this comment.
nit: it's better to have a more descriptive variable names.
let checkOutDate = moment(client.checkOutDate)
let checkInDate = moment(client.checkInDate)
src/App.js
Outdated
| const Heading = () => { | ||
| return ( | ||
| <div> | ||
| <header className="App-header">CYF Hotel</header> | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| const Footer = (props) => { | ||
| let data = props.address | ||
| return ( | ||
| <div className="footer"> | ||
| <ul> | ||
| { | ||
| data.map(line => { | ||
| return <li>{line}</li> | ||
| }) | ||
| } | ||
| </ul> | ||
| </div> | ||
| ) | ||
|
|
||
|
|
||
| } |
There was a problem hiding this comment.
What do you think of moving the Heading and Footer components in two separate files, Heading.js and Footer.js. It'll be more future proof in case the components get larger and require more work.
21. Display a customer profile - step 2
|
Kudos, SonarCloud Quality Gate passed!
|
No description provided.