basic instructions editor

frontend/src/components/recipes/RecipeEditor.tsx

@@ -3,6 +3,8 @@ import type { RecipeModel } from "../../models/RecipeModel"
 import type { IngredientGroupModel } from "../../models/IngredientGroupModel"
 import { IngredientGroupListEditor } from "./IngredientGroupListEditor"
 import Button, { ButtonType } from "../basics/Button"
+import { InstructionStepListEditor } from "./InstructionStepListEditor"
+import type { InstructionStepModel } from "../../models/InstructionStepModel"
 
 type RecipeEditorProps = {
   recipe: RecipeModel
@@ -23,11 +25,20 @@ export default function RecipeEditor({ recipe, onSave, onCancel }: RecipeEditorP
 
   /**
    * Update ingredients
-   * @param ingredients new ingredients
+   * @param ingredientGroupList updated ingredient groups and ingredients
    */
   const updateIngredientGroupList = (ingredientGroupList: IngredientGroupModel[]) => {
     setDraft({ ...draft, ingredientGroupList })
   }
+
+  /**
+   * Update instruction steps
+   * @param instructionStepList updated instructions
+   */
+  const updateInstructionList = (instructionStepList: InstructionStepModel[]) => {
+    setDraft({ ...draft, instructionStepList })
+  }
+
   /**
    * Validate recipe
    * @returns Information on the errors the validation encountered
@@ -119,14 +130,12 @@ export default function RecipeEditor({ recipe, onSave, onCancel }: RecipeEditorP
       />
       </div>
 
-      <h3 className="subsection-heading">Instructions</h3>
-      {/* Instructions */}
-      <textarea
-        className="input-field"
-        placeholder="Instructions"
-        value={draft.instructions}
-        onChange={e => setDraft({ ...draft, instructions: e.target.value })}
+      {/* Instruction List*/ }
+      <InstructionStepListEditor 
+        instructionStepList={draft.instructionStepList} 
+        onChange={updateInstructionList}        
       />
+      
 
       <div className="button-group">
         {/* Save Button */}