Ruba week2 react

[RubaMansour]

Assignment Link

https://mystored.netlify.app

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
Discussion	• 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 Ruba!! you did a GOOD job,

• Clean error and loading handling and API URL logic
• Good use of React Router's Link

since you quite advanced, I want to have a discussion with you

I really enjoyed reviewing your work!:)

[ChingHsun]

Praise:

• Excellent error state implementation
• Clean try-catch-finally structure, loading and error states handling

[ChingHsun]

Nice-to-have:
Remove unused files

[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'

[ChingHsun]

Suggested change

	import React, { useEffect, useState } from "react";
	import { useEffect, useState } from "react";

Nice-to-have:
When importing a React component, you can skip 'import React' for modern React (17+)
Reference

Also can implement Eslint to avoid unused variables

[ChingHsun]

Suggested change

	<h2 className="product-title">{product.title}</h2>
	<h1 className="product-title">{product.title}</h1>

Suggestions:
Since ProductDetail is a new page, it is better to use h1

[ChingHsun]

Discussion:
When fetching the data, did you see some logic duplicates?
There's a way to avoid repeating.
TIPS: https://react.dev/learn/reusing-logic-with-custom-hooks