add steps

frontend/src/pages/AddRecipe.tsx

@@ -3,23 +3,30 @@ import { addRecipe } from "../services/frontendApi.js";
 import { useNavigate } from "react-router-dom";
 import AddBulkIngredients from "../components/AddBulkIngredients.tsx"
 import AddIngredientsForm from "../components/AddIngredientsForm.tsx"
+import AddStepsForm from "../components/AddStepsForm.tsx"
+import AddBulkSteps from "../components/AddBulkSteps.tsx"
+import { type Ingredient, type Step } from "../types/Recipe";
 
 function AddRecipe() {
   const [newRecipeId, setNewRecipeId] = useState<number | null>(null);
   const navigate = useNavigate();
-  const [ingredients, setIngredients] = useState<{ quantity: number; unit: string; name: string }[]>([]);
+  const [ingredients, setIngredients] = useState<Ingredient[]>([]);
+  const [steps, setSteps] = useState<Step[]>([]);
   const [showBulkForm, setShowBulkForm] = useState(true);
 
   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;
+    const stepsHash = Object.fromEntries(
+      steps.map(step => [step.idx, step.instructions])
+    );
     if (nameElement && cuisineElement) {
       const recipeData = {
         name: nameElement.value,
         cuisine: cuisineElement.value,
         ingredients: ingredients,
-        steps: { 1: 'step 1', 2: 'step 2' }
+        steps: stepsHash
       }
       console.log(recipeData)
       const data = await addRecipe(recipeData);
@@ -28,7 +35,7 @@ function AddRecipe() {
   };
 
   React.useEffect(() => {
-    if (newRecipeId !== null) {
+    if (newRecipeId !== null && newRecipeId !== undefined) {
       navigate(`/recipe/${newRecipeId}`);
     }
   }, [newRecipeId, navigate]);
@@ -73,7 +80,17 @@ function AddRecipe() {
           ))}
         </ul>
       </div>
-
+      <div>
+        {showBulkForm ?
+          <AddBulkSteps steps={steps} onChange={setSteps} /> :
+          <AddStepsForm steps={steps} onSubmit={setSteps} />
+        }
+      </div>
+      <ul>
+        {steps.map((step) => (
+          <li key={step.idx}>{`${step.idx}. ${step.instructions}`}</li>
+        ))}
+      </ul>
     </div>
   )
 }