recipe author and stars and a bit of cleanup

frontend/src/pages/AddRecipe.tsx

@@ -2,29 +2,37 @@ import React, { useState } from 'react';
 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";
+import StarRating from "../components/StarRating.tsx"
+// import { type Step } from "../types/Recipe";
+
+interface Step {
+  step_number: number;
+  instruction: string;
+}
 
 function AddRecipe() {
   const [newRecipeId, setNewRecipeId] = useState<number | null>(null);
   const navigate = useNavigate();
-  const [ingredients, setIngredients] = useState<Ingredient[]>([]);
+  const [ingredients, setIngredients] = useState<string[]>([]);
   const [steps, setSteps] = useState<Step[]>([]);
   const [showBulkForm, setShowBulkForm] = useState(true);
   const [recipeName, setRecipeName] = useState("");
   const [recipeCuisine, setRecipeCuisine] = useState("");
+  const [author, setAuthor] = useState("");
+  const [stars, setStars] = useState(0);
 
   const addRecipeForm = async (event: React.FormEvent) => {
     event.preventDefault();
     const stepsHash = Object.fromEntries(
-      steps.map(step => [step.idx, step.instructions])
+      steps.map(step => [step.step_number, step.instruction])
     );
     if (recipeName && recipeCuisine && Object.keys(stepsHash).length > 0 && ingredients.length > 0) {
       const recipeData = {
         name: recipeName,
         cuisine: recipeCuisine,
+        author: author,
+        stars: stars,
         ingredients: ingredients,
         steps: stepsHash
       }
@@ -47,7 +55,7 @@ function AddRecipe() {
       <form onSubmit={addRecipeForm} className="add-recipe-form">
         <input
           type="text"
-          placeholder="name"
+          placeholder="recipe name"
           className="recipe-name mb-4 p-2 border border-gray-300 rounded w-full"
           value={recipeName}
           onChange={(e) => setRecipeName(e.target.value)}
@@ -59,6 +67,16 @@ function AddRecipe() {
           value={recipeCuisine}
           onChange={(e) => setRecipeCuisine(e.target.value)}
         />
+        <input
+          type="text"
+          placeholder="author or source"
+          className="recipe-cusine mb-4 p-2 border border-gray-300 rounded w-full"
+          value={author}
+          onChange={(e) => setAuthor(e.target.value)}
+        />
+        <div>
+          <StarRating rating={stars} onRatingChange={(newRating: number) => setStars(newRating)} />
+        </div>
         <button type="submit" className="ar-button bg-amber-600 text-white py-2 px-4 rounded hover:bg-amber-700">
           submit
         </button>
@@ -71,50 +89,29 @@ function AddRecipe() {
             onChange={(e) => setShowBulkForm(e.target.checked)}
             className="sr-only"
           />
-          <div className={`
-            w-12 h-6 rounded-full shadow-sm transition-all duration-75 transform
-            ${showBulkForm
-              ? 'bg-amber-300 shadow-lg'
-              : 'bg-amber-100 hover:bg-amber-200'
-            }
-          `}>
-            <div className={`
-              absolute top-0.5 left-0.5 w-5 h-5 rounded-full shadow-sm transition-all duration-100 transform
-              ${showBulkForm
-                ? 'translate-x-6 bg-white border-2 border-amber-400'
-                : 'translate-x-0 bg-white border-2 border-amber-200'
-              }
-            `}></div>
-          </div>
         </div>
         <span className="ml-3 text-amber-800 font-medium">Bulk Entry</span>
       </label>
       <div>
-        {showBulkForm ?
-          <AddBulkIngredients ingredients={ingredients} onChange={setIngredients} /> :
-          <AddIngredientsForm ingredients={ingredients} onSubmit={setIngredients} />
-        }
+        <AddBulkIngredients ingredients={ingredients} onChange={setIngredients} />
       </div>
-      <ul className="mb-4">
+      {/*<ul className="mb-4">
         {ingredients.map((ing, index) => (
           <li key={index} className="text-gray-700 flex items-start mb-2">
-            <span>{`${ing.quantity} ${ing.unit} ${ing.name}`}</span>
+            <span>{ing}</span>
           </li>
         ))}
-      </ul>
+      </ul>*/}
       <div>
-        {showBulkForm ?
-          <AddBulkSteps steps={steps} onChange={setSteps} /> :
-          <AddStepsForm steps={steps} onSubmit={setSteps} />
-        }
+        <AddBulkSteps steps={steps} onChange={setSteps} />
       </div>
-      <ul className="mb-4">
+      {/*<ul className="mb-4">
         {steps.map((step) => (
-          <li key={step.idx} className="text-gray-700 flex items-start mb-2">
-            <span>{`${step.idx}. ${step.instructions}`}</span>
+          <li key={step.step_number} className="text-gray-700 flex items-start mb-2">
+            <span>{`${step.step_number}. ${step.instruction}`}</span>
           </li>
         ))}
-      </ul>
+      </ul>*/}
     </div>
   )
 }