small cleanup

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