add steps

frontend/src/components/AddBulkSteps.tsx

@@ -0,0 +1,60 @@
+import React, { useState, useEffect } from 'react';
+import { type Step } from "../types/Recipe";
+
+interface AddBulkStepsProps {
+  steps: Step[];
+  onChange?: (steps: Step[]) => void;
+}
+
+const AddBulkSteps: React.FC<AddBulkStepsProps> = ({ steps, onChange }) => {
+  const [textValue, setTextValue] = useState<string>('');
+
+  useEffect(() => {
+    const textRepresentation = steps.map(step =>
+      `${step.instructions}`
+    ).join('\n');
+    setTextValue(textRepresentation);
+  }, [steps]);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setTextValue(e.target.value);
+  };
+
+
+  const parseAndUpdate = (value: string) => {
+    const lines = value.split('\n').filter(line => line.trim() !== '');
+
+    const parsedSteps = lines.map((line, idx) => {
+      return { idx: idx + 1, instructions: line }
+    })
+
+    if (onChange) onChange(parsedSteps);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter') {
+      parseAndUpdate(textValue);
+    }
+  };
+
+  const handleBlur = () => {
+    parseAndUpdate(textValue);
+  };
+
+  return (
+    <div>
+      <p>Please enter each step on a new line</p>
+      <textarea
+        rows={4}
+        cols={50}
+        value={textValue}
+        onChange={handleInputChange}
+        onKeyDown={handleKeyDown}
+        onBlur={handleBlur}
+        placeholder="Enter ingredients separated by newline..."
+      />
+    </div>
+  );
+};
+
+export default AddBulkSteps;

frontend/src/components/AddIngredientsForm.tsx

@@ -11,7 +11,6 @@ const AddIngredientsForm: React.FC<AddIngredientFormProps> = ({ ingredients, onS
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
-    console.log(e.target)
     setNewIngredient(prev => ({ ...prev, [name]: value }));
   };
 
@@ -20,7 +19,7 @@ const AddIngredientsForm: React.FC<AddIngredientFormProps> = ({ ingredients, onS
     setNewIngredient(prev => ({ ...prev, [name]: value }));
   };
 
-  const handleIngredientsSubmit = (e: React.FormEvent) => {
+  const handleIngredientSubmit = (e: React.FormEvent) => {
     e.preventDefault();
 
     if (!newIngredient.name || !newIngredient.quantity || !newIngredient.unit) {
@@ -43,11 +42,10 @@ const AddIngredientsForm: React.FC<AddIngredientFormProps> = ({ ingredients, onS
 
   return (
     <div>
-      <form onSubmit={handleIngredientsSubmit}>
+      <form onSubmit={handleIngredientSubmit}>
         <input
           type="number"
           name="quantity"
-          id="quantity"
           placeholder="Quantity"
           value={(newIngredient.quantity !== undefined ? newIngredient.quantity : '')}
           onChange={handleChange}
@@ -55,7 +53,6 @@ const AddIngredientsForm: React.FC<AddIngredientFormProps> = ({ ingredients, onS
 
         <select
           name="unit"
-          id="unit"
           value={newIngredient.unit || ''}
           onChange={handleSelectChange}
         >
@@ -68,7 +65,6 @@ const AddIngredientsForm: React.FC<AddIngredientFormProps> = ({ ingredients, onS
         <input
           type="text"
           name="name"
-          id="name"
           placeholder="Ingredient Name"
           value={newIngredient.name || ''}
           onChange={handleChange}

frontend/src/components/AddStepsForm.tsx

@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+import { type Step } from "../types/Recipe";
+
+interface AddStepFormProps {
+  steps: Step[];
+  onSubmit?: (steps: Step[]) => void;
+}
+
+const AddStepsForm: React.FC<AddStepFormProps> = ({ steps, onSubmit }) => {
+  const [newStep, setNewStep] = useState<Partial<Step>>({});
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setNewStep(prev => ({ ...prev, [name]: value }));
+  }
+
+  const handleStepSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!newStep.instructions) {
+      return;
+    }
+
+    const newStepObj: Step = {
+      idx: steps.length + 1,
+      instructions: newStep.instructions
+    }
+
+    const updatedSteps = [...steps, newStepObj];
+
+    setNewStep({});
+    if (onSubmit) onSubmit(updatedSteps)
+
+  }
+
+  return (
+    <div>
+      <form onSubmit={handleStepSubmit}>
+        <input
+          type="text"
+          name="instructions"
+          value={newStep.instructions || ''}
+          onChange={handleChange}
+        />
+        <button type="submit">Add Step</button>
+      </form>
+    </div>
+  )
+}
+
+export default AddStepsForm

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>
   )
 }

frontend/src/types/Recipe.ts

@@ -1,6 +1,6 @@
 interface Step {
-  [key: string]: string;
+  idx: number;
-  // [index: number]: string;
+  instructions: string;
 }
 
 interface Ingredient {
@@ -15,7 +15,7 @@ interface Recipe {
     cuisine?: string;
   },
   ingredients: Ingredient[],
-  steps?: Step;
+  steps?: Step[];
 }