BAKI TUNCER/LONDON-10/CFY HOTEL #618
Conversation
|
Kudos, SonarCloud Quality Gate passed!
|
|
|
||
| const App = () => { | ||
| const addresses = [ |
There was a problem hiding this comment.
This variable makes it seem like the list contains only addresses. However it has an email and a phone number. It might be better to rename it to something like details.
| useEffect(() => { | ||
| console.log("Page loaded"); | ||
| setIsLoading(true); | ||
| setError(null); |
There was a problem hiding this comment.
Really nice use of error handling here on page load. However, you shouldnt need this since you already have the default set to null.
| ); | ||
| }; | ||
|
|
||
| const CustomerProfile = ({ customerId }) => { |
There was a problem hiding this comment.
You used the Id really well here to allow for searching. Only suggestion would be to move this into a separate file so it becomes its own reusable component if it needs to be used elsewhere. Similar to the other components in the app.
| @@ -0,0 +1,38 @@ | |||
| import React, { useState } from "react"; | |||
|
|
|||
| const Order = ({ orderType }) => { | |||
There was a problem hiding this comment.
This is great separation making them all into smaller components however it still might be best to split them into separate files to keep them smaller and easier to read.
| <th>Email</th> | ||
| <th>Room ID</th> | ||
| <th>Check-in Date</th> | ||
| <th>Check-out Date</th> |
There was a problem hiding this comment.
For task 6 to add the difference of nights You installed moment library which is great. The docs provide some guidance on calculating the difference here https://momentjs.com/docs/#/displaying/difference/
| </thead> | ||
| <tbody> | ||
| {bookings.map((booking) => ( | ||
| <tr key={booking.id}> |
There was a problem hiding this comment.
The map works perfectly here and it seems to function as expected. It just seems to be missing lesson 2 task 15. You can achieve it by adding a onClick here and a function to change its class
| fetch(`https://cyf-react.glitch.me/customers/${customerId}`) | ||
| .then((response) => response.json()) | ||
| .then((data) => { | ||
| setCustomerProfile(data); |
There was a problem hiding this comment.
Would be good to add a catch here aswell and some error handling similar to the other api requests. Then you can use that to display an error message.
No description provided.