Business details feature

[Iamogeee]

Users can view business details such as reviews, overview, photos, business hours, on a different page when a business is clicked.

Loom Message - 5 July 2024 - Watch Video

[sinap-fb]

Very nice work! The code is quite well-organized and easy to follow.

• good job using a 404 status code when the ID wasn't found (as opposed to a 500)!
• i notice we're generating the jsonFilePath at the top level now. Nice!
• Good job using appropriate heading levels with the <h1> etc tags!
• instead of fetching e.g. "http://localhost:3000/api/businesses" what if we fetched "/api/businesses"? I think this is necessary in order for your app to work when deployed.
• This is really minor so feel free to ignore, but when upserting data into the database at startup in main(), we're defaulting overview to "Overview not provided". Should we fall back to null or undefined instead? That way the UI would be responsible for rendering the "Overview not provided" message and could render it e.g. with a different font style to help indicate that it's not an actual overview. (Similarly for contactInformation)
• This will probably be covered in a future assignment, but the main() function is doing asynchronous work (using await) in a for..of loop, meaning each asynchronous operation happens sequentially. This can be made much faster since we don't need to fetch each place's details sequentially (we can fetch them all at the same time).
• For my understanding, what is the import object in const apiKey = import.meta.env.VITE_API_KEY;?
• In BusinessDetails.jsx, we render "Loading..." when there is !business, but I believe this will mean we show "Loading..." indefinitely if the server has an error handling the request and consequently sends a 500 HTTP status code, which causes the promise returned by fetch() to fail and thus never call setBusinessData(). Would love to see if we can find a way to avoid this!
• This is another advanced topic; I'd be surprised if they will cover this in the course, so I'm mainly sharing this for educational purposes. I think there is a really sneaky race-condition in the SearchBar component. On input change, we issue an asynchronous request and then update state (setResults()) when it's complete. However, we have no guarantee that, if you type two keys quickly (e.g. "ab"), the second request will complete after the first, which means that we could end up clobbering the results for "ab" with the results for "a". Something to keep in the back of your mind.

[Iamogeee]

• instead of fetching e.g. "http://localhost:3000/api/businesses" what if we fetched "/api/businesses"? I think this is necessary in order for your app to work when deployed.

Hi @sinap-fb ! Thank you for your feedback regarding the use of relative paths for API requests. I implemented the suggested changes, but I ran into some issues. Specifically, when fetching data from the /api/businesses endpoint, I received the following error: Error fetching businesses: SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON

This error indicates that the response is an HTML document, not JSON, suggesting the endpoint might not be correctly configured or accessible. Could you please advise on how to proceed with debugging this issue?

[Iamogeee]

• For my understanding, what is the import object in const apiKey = import.meta.env.VITE_API_KEY;?

@sinap-fb Regarding your question, the import.meta.env object is used to access environment variables in JavaScript modules. In the line const apiKey = import.meta.env.VITE_API_KEY;, import.meta.env.VITE_API_KEY is accessing the VITE_API_KEY environment variable that has been set up in my project.

[Iamogeee]

• In BusinessDetails.jsx, we render "Loading..." when there is !business, but I believe this will mean we show "Loading..." indefinitely if the server has an error handling the request and consequently sends a 500 HTTP status code, which causes the promise returned by fetch() to fail and thus never call setBusinessData(). Would love to see if we can find a way to avoid this!

@sinap-fb I have updated the component to include proper error handling by adding a try-catch block to handle fetch errors and update the state with an error message. Then I retained the if (!business) block to display the "Loading..." message while the data is being fetched.

[Iamogeee]

• This is another advanced topic; I'd be surprised if they will cover this in the course, so I'm mainly sharing this for educational purposes. I think there is a really sneaky race-condition in the SearchBar component. On input change, we issue an asynchronous request and then update state (setResults()) when it's complete. However, we have no guarantee that, if you type two keys quickly (e.g. "ab"), the second request will complete after the first, which means that we could end up clobbering the results for "ab" with the results for "a". Something to keep in the back of your mind.

@sinap-fb Thanks for pointing this out! I can track the latest request and ensure that only the results from the most recent request are used to update the state. One common approach I found is to use an abort controller to cancel previous requests. I have updated the component to address this issue by using an AbortController to cancel previous fetch requests when a new input change occurs.