From 925135d08c78d70712fbf00e7bdb2563f3dbfff3 Mon Sep 17 00:00:00 2001
From: fred <>
Date: Wed, 9 Jul 2025 11:02:23 -0700
Subject: [PATCH] ingredients and steps on recipe page

---
 backend/backendServer.js               |  2 +-
 frontend/src/components/RecipeCard.tsx | 18 +++++++++++++++---
 frontend/src/pages/RecipePage.tsx      | 10 +++++++---
 frontend/src/types/Recipe.ts           | 25 ++++++++++++++++++++-----
 4 files changed, 43 insertions(+), 12 deletions(-)

diff --git a/backend/backendServer.js b/backend/backendServer.js
index 2713b8c..73af699 100644
--- a/backend/backendServer.js
+++ b/backend/backendServer.js
@@ -33,7 +33,7 @@ app.get("/recipe/:id", async (req, res) => {
     const [recipe, ingredients, steps] = await Promise.all([recipeQuery, ingredientsQuery, stepsQuery]);
 
     const result = {
-      recipe: recipe[0],
+      details: recipe[0],
       ingredients: ingredients.map(ingredient => ({
         name: ingredient.name,
         quantity: ingredient.quantity,
diff --git a/frontend/src/components/RecipeCard.tsx b/frontend/src/components/RecipeCard.tsx
index 60f26e1..33b858f 100644
--- a/frontend/src/components/RecipeCard.tsx
+++ b/frontend/src/components/RecipeCard.tsx
@@ -1,11 +1,23 @@
-import { type Recipe } from "../types/Recipe"
+import { type Recipe, type Ingredient } from "../types/Recipe"
 
 function RecipeCard({ recipe }: { recipe: Recipe }) {
   return (
     <div className="recipe-card">
       <div className="recipe-info">
-        <h3>{recipe.name}</h3>
-        <p>{recipe.cuisine}</p>
+        <h3>{recipe.details.name}</h3>
+        <p>{recipe.details.cuisine}</p>
+        <h4>Ingredients:</h4>
+        <ul>
+          {recipe.ingredients.map((ingredient: Ingredient, index) => (
+            <li key={index}>{ingredient.name} {ingredient.quantity} {ingredient.unit}</li>
+          ))}
+        </ul>
+        <h4>Steps:</h4>
+        <ol>
+          {recipe.steps && Object.keys(recipe.steps || {}).map((stepNumber) => (
+            <li key={stepNumber}>{recipe.steps?.[parseInt(stepNumber)]}</li>
+          ))}
+        </ol>
       </div>
     </div>
   );
diff --git a/frontend/src/pages/RecipePage.tsx b/frontend/src/pages/RecipePage.tsx
index 97dd14f..88c5a4c 100644
--- a/frontend/src/pages/RecipePage.tsx
+++ b/frontend/src/pages/RecipePage.tsx
@@ -5,7 +5,11 @@ import { getRecipeById } from "../services/frontendApi.js";
 import { type Recipe } from "../types/Recipe"
 
 function RecipePage() {
-  const [recipe, setRecipe] = useState<Recipe>({});
+  const [recipe, setRecipe] = useState<Recipe>({
+    details: {},
+    ingredients: [],
+    steps: {}
+  });
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(true);
   const { id } = useParams();
@@ -24,7 +28,7 @@ function RecipePage() {
       }
     };
     loadRecipe();
-  }, []);
+  }, [id]);
 
   return (
     <div className="recipe">
@@ -35,7 +39,7 @@ function RecipePage() {
         <div className="loading">Loading...</div>
       ) : (
         <div className="recipe-card">
-          <RecipeCard recipe={recipe} key={recipe.id} />
+          <RecipeCard recipe={recipe} key={recipe.details.id} />
         </div>
       )}
     </div>
diff --git a/frontend/src/types/Recipe.ts b/frontend/src/types/Recipe.ts
index c34903d..43e5989 100644
--- a/frontend/src/types/Recipe.ts
+++ b/frontend/src/types/Recipe.ts
@@ -1,7 +1,22 @@
-interface Recipe {
-  id?: number;
-  name?: string;
-  cuisine?: string;
+interface Step {
+  [key: string]: string;
+  // [index: number]: string;
 }
 
-export type { Recipe }
+interface Ingredient {
+  name: string;
+  quantity: number;
+  unit: string;
+}
+interface Recipe {
+  details: {
+    id?: number;
+    name?: string;
+    cuisine?: string;
+  },
+  ingredients: Ingredient[],
+  steps?: Step;
+}
+
+
+export type { Recipe, Ingredient, Step }