BAKI TUNCER/LONDON-10/CFY HOTEL#618
Conversation
|
Kudos, SonarCloud Quality Gate passed!
|
BGIvanG
left a comment
BGIvanG
left a comment
There was a problem hiding this comment.
Great Work on working with the Apis and handling the error. Just a few comments mostly about moving components out into their own file. its normally best as it keeps the project clean and makes the components more reusable.
| import Restaurant from "./components/Restaurant"; | ||
|
|
||
| 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.
3 participants
No description provided.