build for prod

frontend/src/components/AddIngredientsForm.tsx

@@ -1,79 +0,0 @@
-import React, { useState } from 'react';
-import { type Ingredient } from "../types/Recipe";
-
-interface AddIngredientFormProps {
-  ingredients: Ingredient[];
-  onSubmit?: (ingredients: Ingredient[]) => void;
-}
-
-const AddIngredientsForm: React.FC<AddIngredientFormProps> = ({ ingredients, onSubmit }) => {
-  const [newIngredient, setNewIngredient] = useState<Partial<Ingredient>>({});
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const { name, value } = e.target;
-    setNewIngredient(prev => ({ ...prev, [name]: value }));
-  };
-
-  const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    const { name, value } = e.target;
-    setNewIngredient(prev => ({ ...prev, [name]: value }));
-  };
-
-  const handleIngredientSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-
-    if (!newIngredient.name || !newIngredient.quantity || !newIngredient.unit) {
-      return;
-    }
-
-    const newIngredientObj: Ingredient = {
-      quantity: parseFloat(newIngredient.quantity.toString()),
-      unit: newIngredient.unit,
-      name: newIngredient.name
-    };
-
-    const updatedIngredients = [...ingredients, newIngredientObj];
-
-
-    setNewIngredient({});
-
-    if (onSubmit) onSubmit(updatedIngredients);
-  };
-
-  return (
-    <div>
-      <form onSubmit={handleIngredientSubmit}>
-        <input
-          type="number"
-          name="quantity"
-          placeholder="Quantity"
-          value={(newIngredient.quantity !== undefined ? newIngredient.quantity : '')}
-          onChange={handleChange}
-        />
-
-        <select
-          name="unit"
-          value={newIngredient.unit || ''}
-          onChange={handleSelectChange}
-        >
-          <option value="">Select Unit</option>
-          <option value="grams">Grams</option>
-          <option value="kilograms">Kilograms</option>
-          <option value="cups">Cups</option>
-        </select>
-
-        <input
-          type="text"
-          name="name"
-          placeholder="Ingredient Name"
-          value={newIngredient.name || ''}
-          onChange={handleChange}
-        />
-
-        <button type="submit">Add Ingredient</button>
-      </form>
-    </div>
-  );
-};
-
-export default AddIngredientsForm;

frontend/src/components/AddStepsForm.tsx

@@ -1,51 +0,0 @@
-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/components/CookbookRecipeTile.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { type RecipeSmall } from "../types/Recipe"
 import Modal from '../components/Modal.tsx'
 import DemoModal from '../components/DemoModal.tsx'

frontend/src/components/RecipeBookTabs.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { useState, useEffect } from "react";
 import { Link, useLocation } from 'react-router-dom';
 import { getRecipes } from "../services/frontendApi.js";

frontend/src/components/StarRating.tsx

@@ -7,7 +7,7 @@ const StarRating = ({ rating, onRatingChange }: StarRatingProps) => {
 
   return (
     <div>
-      {[...Array(5)].map((star, index) => {
+      {[...Array(5)].map((_, index) => {
         index += 1;
         return (
           <span

frontend/src/pages/AddRecipe.tsx

@@ -38,7 +38,7 @@ function AddRecipe() {
     if (recipeName && recipeCuisine && Object.keys(stepsHash).length > 0 && ingredients.length > 0) {
       const recipeData = {
         name: recipeName,
-        cuisine: recipeCuisine,
+        cuisine: recipeCuisine.toLowerCase(),
         author: author,
         prep_minutes: prepMinutes,
         cook_minutes: cookMinutes,
@@ -92,7 +92,7 @@ function AddRecipe() {
               placeholder="prep time in minutes"
               className="recipe-cusine p-2 border border-gray-300 rounded w-24"
               value={prepMinutes}
-              onChange={(e) => setPrepMinutes(e.target.value)}
+              onChange={(e) => setPrepMinutes(parseInt(e.target.value))}
             />
             <span className="ml-2">minutes</span>
           </div>
@@ -103,7 +103,7 @@ function AddRecipe() {
               placeholder="cook time in minutes"
               className="recipe-cusine p-2 border border-gray-300 rounded w-24"
               value={cookMinutes}
-              onChange={(e) => setCookMinutes(e.target.value)}
+              onChange={(e) => setCookMinutes(parseInt(e.target.value))}
             />
             <span className="ml-2">minutes</span>
           </div>