Homework react w3 christina

[christinaghazal]

No description provided.

[christinaghazal]

..

[durw4rd]

Hi Christina,
Well done on your work and apologies for the late review!
I've added a few comments, mostly they are 'nice-to-have' recommendations aimed at making your code easier to understand. I'll leave it up to you if you want to implement those changes as the feedback can be also subjective and other people might have different views.
One thing I would like you to fix before I accept the work, though, is the product detail page - at the moment it's not working properly, possibly because you updated how the useFetch hook works.

[durw4rd]

When creating custom hooks, I think it's better if the hook code is kept fairly generic and any component-specific logic is handled in the respective components. In the case of a useFetch hook like this, I would recommend passing only the URL as an argument. The category argument is not necessary if you move the logic to ProductList component. I'm not sure what the purpose of the noFavItems attribute is? When I deleted it, I didn't see any impact; maybe I'm missing some specific scenario for which you are using it?

[durw4rd]

You will need to update the attributes passed to the useFetch hook for it to work correctly, at the moment the product details page doesn't show any content beyond the error message. I suspect you have updated the hook and forgot to update the component? :)

[durw4rd]

You can make the check for whether there are any favourite items more implicit like this:

const FavoritesPage = () => {
  const { items } = useContext(FavContext);
  const { data, loading, error } = useFetch("https://fakestoreapi.com/products");

  if (loading) {
    return <h1>Loading...</h1>;
  }

  if (error) {
    return <h1>Error!</h1>;
  }

  const favProducts = data.filter((product) => items.includes(product.id));

  return (
    <main>
      <Navbar title="Favorites" />
      {items.length > 0 ? <FavList products={favProducts} /> : <h2>Your favorite list is empty!</h2>}
    </main>
  );
};

This is not to say that your solution is incorrect. But in general if your code can be made shorter without making it more difficult to understand, that's preferable.

[durw4rd]

I don't think the toggleFavProduct function is needed here.

[durw4rd]

Nit: for application of this size & complexity, it's not necessary to break the reducer into its own file, you could also leave it in here together with the provider.

[durw4rd]

The code works just fine but seems a little inefficient. I think it's not necessary to explicitly declare the default empty array of favorite items. Unless you were planning to perhaps store the information in local storage and persist the state between page reloads?

The findIndex method could also be replaces with includes which seems like a better fit here (and you are using it already in your Favorites component!).

Moving things around a bit, you can avoid a few temporary variables - for example:

const favReducer = (favorites, action) => {
  if (action.type === "TOGGLE_FAV") {
    if (favorites.items.includes(action.id)) {
      return { items: favorites.items.filter((itemId) => itemId !== action.id) };
    } else {
      return { items: [...favorites.items, action.id] };
    }
  }
};