insert ingredents

frontend/src/components/AddBulkIngredients.tsx

@@ -1,55 +1,49 @@
 import React, { useState } from 'react';
-import { type Ingredient } from "../types/Recipe"
+import { type Ingredient } from "../types/Recipe";
 
+interface AddBulkIngredientsProps {
+  onChange?: (ingredients: { quantity: number; unit: string; name: string }[]) => void;
+}
 
-const BulkIngredientsForm: React.FC = () => {
-  const [ingredients, setIngredients] = useState<Ingredient[]>([]);
+const AddBulkIngredients: React.FC<AddBulkIngredientsProps> = ({ onChange }) => {
+  const [ingredients, setIngredients] = useState<{ quantity: number; unit: string; name: string }[]>([]);
 
   const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    // Split the input by newline to get individual ingredients
     const lines = e.target.value.split('\n').filter(line => line.trim() !== '');
     const pattern = /^([0-9/.]+)?\s*(\S+)\s*((\w+\s*)*)$/;
-    const parsedIngredients: Ingredient[] = lines.map(line => {
-      const parts = line.match(pattern); // Updated regex pattern for fractions
-      let quantity;
+    const parsedIngredients = lines.map(line => {
+      const parts = line.match(pattern);
+      let quantity = 0;
       if (parts?.[1]) {
-        // Try to parse the quantity as a fraction first
         const [num, denom] = parts[1].split('/');
         if (denom) {
           quantity = parseFloat(num) / parseFloat(denom);
         } else {
           quantity = parseFloat(parts[1]);
         }
-      } else {
-        quantity = 0; // Default to zero if no quantity is found
       }
       return {
         quantity: +quantity.toFixed(2),
-        name: parts?.[3]?.trim() || '',
-        unit: parts?.[2]?.trim() || ''
+        unit: parts?.[2]?.trim() || '',
+        name: parts?.[3]?.trim() || ''
       };
     });
     setIngredients(parsedIngredients);
+    if (onChange) onChange(parsedIngredients); // Notify parent of change
   };
 
   return (
     <div>
       <p>Please enter ingredients in the following order: Quantity, Unit, Name</p> {/* Prompt for correct input format */}
-      <textarea
-        rows={4} // Adjust the number of rows based on your input size expectations
-        cols={50} // Adjust the number of columns based on your input width expectations
-        onChange={handleInputChange}
-        placeholder="Enter ingredients separated by newline..."
-      />
+      <textarea rows={4} cols={50} onChange={handleInputChange} placeholder="Enter ingredients separated by newline..." />
       <div>
         <ul>
           {ingredients.map((ing, index) => (
-            <li key={index}>{`${ing.quantity} ${ing.unit} ${ing.name}`}</li> // Changed order to quantity, unit, name
+            <li key={index}>{`${ing.quantity} ${ing.unit} ${ing.name}`}</li>
           ))}
         </ul>
       </div>
     </div>
   );
 };
-
-export default BulkIngredientsForm;
+export default AddBulkIngredients;

frontend/src/components/RecipeCard.tsx

@@ -9,7 +9,7 @@ function RecipeCard({ recipe }: { recipe: Recipe }) {
         <h4>Ingredients:</h4>
         <ul>
           {recipe.ingredients.map((ingredient: Ingredient, index) => (
-            <li key={index}>{ingredient.name} {ingredient.quantity} {ingredient.unit}</li>
+            <li key={index}>{ingredient.quantity} {ingredient.unit} {ingredient.name}</li>
           ))}
         </ul>
         <h4>Steps:</h4>