liron's pr

[lirpes]

couldn't find Details.tsx

[nadav-cohen11]

1. Exporting categories: You exported categories, which is good for reusability. However, keep in mind:

   1.1. If categories is only used in this component, exporting might introduce dead code elsewhere.
   1.2. If it is reused (as we see in Card), this solution is appropriate. Consider adding a comment or utility
   folder structure for constants (like categories).

2. Performance Optimization: The categories array is recreated on every render, which is unnecessary. Instead:

You can define it as a const outside the component to ensure it's only created once.

export const categories: Category[] = [...]; // Move outside the function.

[nadav-cohen11]

Accessing categories:

Good use of categories.find. However, watch out for cases where find might return undefined. To make it more robust, provide a fallback value:

const categoryName = categories.find(category => category.id == props.product.category)?.name || 'Unknown Category';

[nadav-cohen11]

Magic Numbers (maxRatings):

Use constants or make the logic more descriptive.
const MAX_RATINGS = 5;

[nadav-cohen11]

Error Handling for Loading Image:

props.product.image is used directly. If the image URL fails, it might display a broken image. Add an onError:

<img src={props.product.image} alt={props.product.title} onError={(e) => (e.target.src = '/placeholder.png')} />

[nadav-cohen11]

Destructure Props:

Destructure props to improve readability:

const { product } = props;

[nadav-cohen11]

Great job on adding more functionality:

Loading data from the fakestoreapi with axios.
Creating reusable categories.
Making the Card component dynamic by adding props.
Attention to detail is important:

Properly componentized and streamlined logic for filtering products.

Nice work cleaning up TODO comments.

Please fix the comments that i wrote you and open the pull request again