From 6f8f03e206bf37a54e71e2bc117db8ee2c45f425 Mon Sep 17 00:00:00 2001
From: fred <>
Date: Fri, 11 Jul 2025 09:41:19 -0700
Subject: [PATCH] small cleanup

---
 frontend/src/pages/AddRecipe.tsx | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/frontend/src/pages/AddRecipe.tsx b/frontend/src/pages/AddRecipe.tsx
index c30fd6e..7219803 100644
--- a/frontend/src/pages/AddRecipe.tsx
+++ b/frontend/src/pages/AddRecipe.tsx
@@ -13,24 +13,26 @@ function AddRecipe() {
   const [ingredients, setIngredients] = useState<Ingredient[]>([]);
   const [steps, setSteps] = useState<Step[]>([]);
   const [showBulkForm, setShowBulkForm] = useState(true);
+  const [recipeName, setRecipeName] = useState("");
+  const [recipeCuisine, setRecipeCuisine] = useState("");
 
   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) {
+    if (recipeName && recipeCuisine && Object.keys(stepsHash).length > 0 && ingredients.length > 0) {
       const recipeData = {
-        name: nameElement.value,
-        cuisine: cuisineElement.value,
+        name: recipeName,
+        cuisine: recipeCuisine,
         ingredients: ingredients,
         steps: stepsHash
       }
       console.log(recipeData)
       const data = await addRecipe(recipeData);
       setNewRecipeId(data.id);
+    } else {
+      alert('missing required data')
     }
   };
 
@@ -46,14 +48,16 @@ function AddRecipe() {
         <input
           type="text"
           placeholder="name"
-          className="ar-name"
-          id="ar-name"
+          className="recipe-name"
+          value={recipeName}
+          onChange={(e) => setRecipeName(e.target.value)}
         />
         <input
           type="text"
           placeholder="cuisine"
-          className="ar-cusine"
-          id="ar-cuisine"
+          className="recipe-cusine"
+          value={recipeCuisine}
+          onChange={(e) => setRecipeCuisine(e.target.value)}
         />
         <button type="submit" className="ar-button">
           submit