LidiiaStarshynova-w2-React

[starshynova]

Assignment Requirements ✅

• The fake-data directory should not be a part of your project anymore
• Your app will need to make 2 queries to the following endpoints:
  • https://fakestoreapi.com/products/categories -> To get all the categories
  • https://fakestoreapi.com/products or https://fakestoreapi.com/products/category/:selectedCategory -> To get the products. The API needs to do the filtering, not the frontend. Usually the amount of products will be too large to do the filtering on the frontend.
• Your app needs to show that it is loading when waiting on the request to come back. You can test this by mimicing a slow connection in your browsers' developer tools
• Your app needs to show an error message if the request failed
• Your app needs to go to a detail page /product/:id whenever you click on the product card in the list. This should get the details from the endpoint: https://fakestoreapi.com/products/<id>. For now we won't add a navigation bar, the browsers 'back' button will do the trick. _TIP: You will need to add the react-router-dom package and add the routing to your app regardless.
• You need to deploy your app somewhere (using something like netlify) and put the link in your PR! Make it a different one than the previous week.

Comments Rules

Type	Description
Suggestions	• Common best practices, standard improvements • Should be considered for implementation
Nice-to-have	• Based on personal preferences or coding style • Optional enhancements
Question	• Starting a discussion to understand technical decisions • Asking for clarification or exploring different solutions
Praise	• Recognizing and highlighting good practices • Encouraging positive patterns

[ChingHsun]

Hi Lidiia
it is good, clean code structure. easy to understand your code.
About error handling and loading statement, there's also need to be handle in the home page.

[ChingHsun]

Discussion:
Here are three types of UI state handling, do you think there is any difference, and which one you prefer?

// 1.
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);

// 2.
const [status, setStatus] = useState({ loading: true, error: null, success: false });

// 3.
const [status, setStatus] = useState('loading'); // 'loading' | 'error' | 'success'

[starshynova]

I prefer the first option, because now for me it is more understandable code than types 2 and 3.

[ChingHsun]

Suggestion:
In other fetching function you add below at the begining

 setLoading(true);
 setError(null);

But you don't need it here.

What is the difference? Do you need to add them or no need to?
Try to pick one and explain why you choose

[starshynova]

In this case I do not need this piece of code, because CategoryList is the part of main page. It can not be loaded separately.

[ChingHsun]

This is the code I mean

[ChingHsun]

Suggested change

	setLoading(true);
	setError(null);

I mean here, you don't need this,
since these states are already properly initialized when the component mounts.