fix ingredients on update recipe

app/javascript/components/App.tsx

@@ -7,7 +7,7 @@ import Layout from "./Layout";
 import Home from "./Home";
 import Search from "./Search";
 import Recipes from "./recipes/RecipeIndex";
-import Foods from "./foods/Index";
+import Foods from "./foods/FoodsIndex";
 import NewRecipeForm from './recipes/RecipeNew';
 import RecipeEdit from './recipes/RecipeEdit';
 

app/javascript/components/recipes/RecipeForm.tsx

@@ -68,13 +68,19 @@ const RecipeForm: React.FC<RecipeFormProps> = ({ formData, setFormData, onSubmit
         {formData.ingredients_attributes.map((ingredient, index) => (
           <div key={index} className="flex gap-4 mb-2">
             <select
-              value={ingredient.food_id}
+              value={ingredient.food_id || ''}
               onChange={(e) => handleIngredientChange(index, 'food_id', parseInt(e.target.value))}
               className="p-2 border rounded"
             >
               <option value="">Select Food</option>
               {foods.map((food) => (
-                <option key={food.id} value={food.id}>{food.name}</option>
+                <option 
+                  key={food.id} 
+                  value={food.id}
+                  selected={food.id === ingredient.food_id}
+                >
+                  {food.name}
+                </option>
               ))}
             </select>
 

app/javascript/store/recipesSlice.ts

@@ -34,14 +34,21 @@ export const createRecipe = createAsyncThunk(
 export const updateRecipe = createAsyncThunk(
   'recipes/update',
   async ({ id, data, csrfToken }: { id: number; data: RecipeFormData; csrfToken: string }) => {
-    await fetch(`/api/recipes/${id}`, {
+    const response = await fetch(`/api/recipes/${id}`, {
       method: 'PUT',
       headers: {
         'Content-Type': 'application/json',
         'X-CSRF-Token': csrfToken
       },
       body: JSON.stringify(data)
-    })
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json();
+      throw new Error(errorData.error || 'An error occurred');
+    }
+
+    return response.json();
   }
 );
 
@@ -80,6 +87,13 @@ const recipesSlice = createSlice({
           state.status = 'succeeded'
         }
       })
+      .addCase(updateRecipe.fulfilled, (state, action) => {
+        const index = state.items.findIndex(recipe => recipe.id === action.payload.recipe.id)
+        if (index !== -1) {
+          state.items[index] = action.payload.recipe
+        }
+        state.status = 'succeeded'
+      })
   },
 })
 

app/views/recipes/_recipe.json.jbuilder

@@ -1,6 +1,6 @@
 json.extract! recipe, :id, :name
 
 json.ingredients recipe.ingredients do |ingredient|
-  json.extract! ingredient, :id, :measurement
+  json.extract! ingredient, :id, :food_id, :measurement
   json.food_name ingredient.food.name
 end