<aside> ⭐ Each component has a css file atached to it. You can find them in the folder styles inside components with the same name as the component.

</aside>

BackButton

A simple image of a svg to use as a back button.

DietTableContainer

NEEDS TO BE SIMPLIFY

This component is to show a table with all the nutrients listed. This calls a function to sum all the ammounts of nutrients (link to function).

The component receives an array of nutrients and a filtering array to show.

It has a handleChange event to react for a checkbox for filtering the table.

This component uses bootstrap classes to style it. It has to be refactorize to stop depending on bootstrap

It may be deconstructure into two or three other components in order to simplify it.

FoodCardContainer

It is connected to Redux. The properties it uses are: isLoading and foodItems.

It returns every food item as a FoodCardSimp component passing by all the name, id and type.

If the component is Loading it returns a spinner component.

It lacks a prop types for validation and it should be added for better practices.

FoodCardDiet

This component shows a different kind of food card only for the diet report page.

It receives these props: name, value, id, onChange, portionsArray.

The portions will be calculate with the function portionsArray (link to function)