insert ingredents

frontend/src/pages/AddRecipe.tsx

@@ -1,29 +1,30 @@
 import React, { useState } from 'react';
 import { addRecipe } from "../services/frontendApi.js";
 import { useNavigate } from "react-router-dom";
-import AddIngredientsForm from "../components/AddIngredientsForm.tsx"
 import AddBulkIngredients from "../components/AddBulkIngredients.tsx"
 
 function AddRecipe() {
   const [newRecipeId, setNewRecipeId] = useState<number | null>(null);
   const navigate = useNavigate();
+  const [ingredients, setIngredients] = useState<{ quantity: number; unit: string; name: string }[]>([]);
 
   const addRecipeForm = async (event: React.FormEvent) => {
     event.preventDefault();
     const nameElement = document.getElementById('ar-name') as HTMLInputElement | null;
     const cuisineElement = document.getElementById('ar-cuisine') as HTMLInputElement | null;
-
     if (nameElement && cuisineElement) {
       const recipeData = {
         name: nameElement.value,
-        cuisine: cuisineElement.value
+        cuisine: cuisineElement.value,
+        ingredients: ingredients,
+        steps: { 1: 'step 1', 2: 'step 2' }
       }
-
+      console.log(recipeData)
       const data = await addRecipe(recipeData);
       setNewRecipeId(data.id);
     }
-
   };
+
   React.useEffect(() => {
     if (newRecipeId !== null) {
       navigate(`/recipe/${newRecipeId}`);
@@ -50,8 +51,7 @@ function AddRecipe() {
         </button>
       </form>
       <div>
-        <AddIngredientsForm />
-        <AddBulkIngredients />
+        <AddBulkIngredients onChange={setIngredients} />
       </div>
     </div>
   )