Nutrition prices and CRUD buttons

frontend/src/App.js

@@ -47,6 +47,7 @@ function ItemList() {
     <div className="item-list">
       <h2>Items</h2>
       <button onClick={getItems}>Reload</button>
+      <button onClick={getItems}>Add (TODO)</button>
       <ul className="item-list">{itemList}</ul>
     </div>
   );
@@ -59,17 +60,20 @@ function ItemCard({ itemData }) {
         <li>Name: {itemData.name}</li>
         <li>Price: R$ {itemData.price}</li>
         <li>Weight: {itemData.weight}g</li>
+        <li>
+          Nutrition prices: <NutritionPrices nutritionPrices={itemData.nutrition_prices} />
+        </li>
         <li>
           Nutritional table: <NutritionalTable nutrition={itemData.nutrition} />
         </li>
       </ul>
-
+      <button>Edit (TODO)</button>
+      <button>Remove (TODO)</button>
     </div>
   );
 }
 
 function NutritionalTable({ nutrition }) {
-  console.log(nutrition);
   return (
     <div>
       <ul>
@@ -81,4 +85,15 @@ function NutritionalTable({ nutrition }) {
   )
 }
 
+function NutritionPrices({ nutritionPrices }) {
+  return (
+    <div>
+      <ul>
+        <li>Calories: {nutritionPrices.calories} g/R$</li>
+        <li>Protein: {nutritionPrices.protein} g/R$</li>
+      </ul>
+    </div>
+  )
+}
+
 export default App;