From 3eefa41a2865b5dbbd3e0439f508e1fa08e9f314 Mon Sep 17 00:00:00 2001
From: Anika Raemer <araemer@laptop-anika.raemer.net>
Date: Mon, 8 Sep 2025 18:58:48 +0200
Subject: [PATCH] fix recalculating ingredients

---
 frontend/src/components/RecipeDetailView.tsx | 23 +++++++++++++-------
 frontend/src/components/RecipeEditor.tsx     |  1 -
 frontend/tsconfig.json                       | 12 +++++++++-
 3 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/RecipeDetailView.tsx b/frontend/src/components/RecipeDetailView.tsx
index 84970f5..8785dc8 100644
--- a/frontend/src/components/RecipeDetailView.tsx
+++ b/frontend/src/components/RecipeDetailView.tsx
@@ -18,17 +18,23 @@ export default function RecipeDetailView() {
     return <p className="p-6">Recipe not found.</p>
   }
 
-    // Working copy for re-calculating ingredients
+  // Working copy for re-calculating ingredients
   const [recipeWorkingCopy, updateRecipeWorkingCopy] = useState<Recipe>(recipe)
+  // Keep original immutable for scaling
+  const [originalRecipe] = useState<Recipe>(recipe)
 
+   /** recalculate ingredients based on the amount of servings */
   const recalculateIngredients = (newAmount: number) => {
     // Always calculate factor from the *original recipe*, not the working copy
-    const factor = newAmount / recipe.servings.amount
+    const factor = newAmount / originalRecipe.servings.amount
 
     // Create a new ingredient list with updated amounts
-    const updatedIngredients = recipe.ingredients.map((ing) => ({
-      ...ing,
-      amount: ing.amount * factor,
+    const updatedIngredientGroupList = recipe.ingredientGroupList.map((ingGrp) => ({
+      ...ingGrp, 
+      ingredientList: ingGrp.ingredientList.map((ing) => ({
+        ...ing,
+        amount: ing.amount * factor,
+      }))
     }))
 
     // Update working copy with new servings + recalculated ingredients
@@ -38,10 +44,10 @@ export default function RecipeDetailView() {
         ...recipeWorkingCopy.servings,
         amount: newAmount,
       },
-      ingredients: updatedIngredients,
+      ingredientGroupList: updatedIngredientGroupList,
     })
   }
-  // @todo add a feature to recalculate ingredients based on servings
+
   return (    
     <div className="p-6 max-w-2xl mx-auto">
       <h1 className="content-title">{recipeWorkingCopy.title}</h1>
@@ -72,8 +78,9 @@ export default function RecipeDetailView() {
       {/* Ingredients */}
       <h2 className="section-heading">Zutaten</h2>
       <ul>
-        {recipe.ingredientGroupList.map((group,i) => (
+        {recipeWorkingCopy.ingredientGroupList.map((group,i) => (
           <div key={i}>
+          {/* the title is optional, only print if present */}
           {group.title && group.title.trim() !== "" && (
             <h3 className="subsection-heading">{group.title}</h3>
           )}
diff --git a/frontend/src/components/RecipeEditor.tsx b/frontend/src/components/RecipeEditor.tsx
index be3acb4..18b0d4c 100644
--- a/frontend/src/components/RecipeEditor.tsx
+++ b/frontend/src/components/RecipeEditor.tsx
@@ -53,7 +53,6 @@ export default function RecipeEditor({ recipe, onSave, onCancel }: RecipeEditorP
           return !ingGrp.ingredientList || ingGrp.ingredientList.length === 0
         }
       )
-      console.log(isAnyIngredientListEmpty)
       if(isAnyIngredientListEmpty){
         newErrors.ingredients = true
       }
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 1ffef60..989cfa7 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -3,5 +3,15 @@
   "references": [
     { "path": "./tsconfig.app.json" },
     { "path": "./tsconfig.node.json" }
-  ]
+  ],
+  "compilerOptions": {
+    "strict": true,
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "jsx": "react-jsx",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true
+  }
 }