Introduction
In the previous update, I was able to implement the foodItemSearch service, which allowed me to search for food items, but it was buggy at best, since pagination didn’t work as expected. By this update, I was able to fix the basic fetching issues, but I also discovered another issue.
Update
- I discovered a pretty weird issue in the FDC API, that is the 0th page of
/v1/foods/searchendpoint returns the same output as the 1st page. To fix this, I’d to replace the default page count as 1, instead of 0. - There were also some other minor updates that I made to fix the issue with pagination, as only the first page was getting re-fetched every time.
- I updated the
foodItemSearchservice, to also return theservingCountvalue for both foundational and branded food, with it’s default value being 0.25 & 1 respectively. Why 0.25 as the defaultservingCountfor foundational foods? That’s because the defaultservingSizefor foundation foods is 100g, but it needs to be broken down so that users can select smaller portions. - I also added the
NutritionModal, which shows the nutritional information of a food. It is shown upon clicking the “Nutrition” button at the bottom of theFoodCardcomponent.
Next steps
- Now I can finally implement the feature to implement food item mutation, which is linked with both food and account screens. To make the food item mutation work, I’ll have to build a modal in which the users can view, add and remove food items from their list. Think of it like a cart for food, i.e. A food cart.
Screenshots

Viewing nutritional information (desktop)


Top comments (0)