From c66d5800cccfd9a7875e338295f9ce426597f987 Mon Sep 17 00:00:00 2001
From: Kyle Zarazan <zarazan@no-reply.github.com>
Date: Thu, 21 Nov 2024 22:08:47 -0700
Subject: [PATCH] fix delete button on update

---
 .../components/recipes/RecipeEdit.tsx         |  2 +-
 .../components/recipes/RecipeForm.tsx         | 26 ++++++++++++++++---
 .../components/recipes/RecipeNew.tsx          |  8 +-----
 app/javascript/types/types.ts                 |  3 ++-
 app/models/recipe.rb                          |  2 +-
 5 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/app/javascript/components/recipes/RecipeEdit.tsx b/app/javascript/components/recipes/RecipeEdit.tsx
index dd33dc0..1475f7c 100644
--- a/app/javascript/components/recipes/RecipeEdit.tsx
+++ b/app/javascript/components/recipes/RecipeEdit.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useAppDispatch, useAppSelector } from '../../store/hooks';
 import { updateRecipe } from '../../store/recipesSlice';
-import { RecipeFormData } from './RecipeNew';
+import { RecipeFormData } from './RecipeForm';
 import useCsrfToken from '../../hooks/useCsrfToken';
 import { useNavigate, useParams } from 'react-router-dom';
 import RecipeForm from './RecipeForm';
diff --git a/app/javascript/components/recipes/RecipeForm.tsx b/app/javascript/components/recipes/RecipeForm.tsx
index f71c618..b3d027f 100644
--- a/app/javascript/components/recipes/RecipeForm.tsx
+++ b/app/javascript/components/recipes/RecipeForm.tsx
@@ -1,6 +1,12 @@
 import React from 'react';
-import { RecipeFormData } from './RecipeNew';
 import { useAppSelector } from '../../store/hooks';
+import { Ingredient } from '../../types/types';
+
+export interface RecipeFormData {
+  name: string;
+  description: string;
+  ingredients_attributes: Ingredient[];
+}
 
 interface RecipeFormProps {
   formData: RecipeFormData;
@@ -25,13 +31,26 @@ const RecipeForm: React.FC<RecipeFormProps> = ({ formData, setFormData, onSubmit
   const deleteIngredient = (indexToDelete: number) => {
     setFormData({
       ...formData,
-      ingredients_attributes: formData.ingredients_attributes.filter((_, index) => index !== indexToDelete)
+      ingredients_attributes: formData.ingredients_attributes
+        .map((ingredient, index) => {
+          if (index === indexToDelete) {
+            if (ingredient.id) {
+              return { ...ingredient, _destroy: true };
+            }
+            return null;
+          }
+          return ingredient;
+        })
+        .filter((ingredient): ingredient is Ingredient => 
+          ingredient !== null
+        )
     });
   };
 
   const handleIngredientChange = (index: number, field: 'food_id' | 'measurement', value: string | number) => {
     const newIngredients = [...formData.ingredients_attributes];
     newIngredients[index] = {
+      id: newIngredients[index]?.id || undefined,
       food_id: newIngredients[index]?.food_id || 0,
       measurement: newIngredients[index]?.measurement || '',
       [field]: value
@@ -66,7 +85,7 @@ const RecipeForm: React.FC<RecipeFormProps> = ({ formData, setFormData, onSubmit
       <div className="mb-4">
         <h3 className="mb-2">Ingredients</h3>
         {formData.ingredients_attributes.map((ingredient, index) => (
-          <div key={index} className="flex gap-4 mb-2">
+          <div key={index} className={`flex gap-4 mb-2 ${ingredient._destroy && 'hidden'}`}>
             <select
               value={ingredient.food_id || ''}
               onChange={(e) => handleIngredientChange(index, 'food_id', parseInt(e.target.value))}
@@ -77,7 +96,6 @@ const RecipeForm: React.FC<RecipeFormProps> = ({ formData, setFormData, onSubmit
                 <option 
                   key={food.id} 
                   value={food.id}
-                  selected={food.id === ingredient.food_id}
                 >
                   {food.name}
                 </option>
diff --git a/app/javascript/components/recipes/RecipeNew.tsx b/app/javascript/components/recipes/RecipeNew.tsx
index 17821fb..37ad84f 100644
--- a/app/javascript/components/recipes/RecipeNew.tsx
+++ b/app/javascript/components/recipes/RecipeNew.tsx
@@ -5,13 +5,7 @@ import { fetchFoods } from '../../store/foodsSlice';
 import useCsrfToken from '../../hooks/useCsrfToken';
 import { useNavigate } from 'react-router-dom';
 import RecipeForm from './RecipeForm';
-import { Ingredient } from '../../types/types';
-
-export interface RecipeFormData {
-  name: string;
-  description: string;
-  ingredients_attributes: Ingredient[];
-}
+import { RecipeFormData } from './RecipeForm';
 
 const NewRecipeForm: React.FC = () => {
   const dispatch = useAppDispatch();
diff --git a/app/javascript/types/types.ts b/app/javascript/types/types.ts
index e379b56..6b3a984 100644
--- a/app/javascript/types/types.ts
+++ b/app/javascript/types/types.ts
@@ -1,8 +1,9 @@
 export interface Ingredient {
   id?: number;
-  food_id?: number;
+  food_id: number;
   food_name?: string;
   measurement: string;
+  _destroy?: boolean;
 }
 
 export interface Recipe {
diff --git a/app/models/recipe.rb b/app/models/recipe.rb
index ad85006..e68fe09 100644
--- a/app/models/recipe.rb
+++ b/app/models/recipe.rb
@@ -1,5 +1,5 @@
 class Recipe < ApplicationRecord
   has_many :ingredients
 
-  accepts_nested_attributes_for :ingredients
+  accepts_nested_attributes_for :ingredients, allow_destroy: true
 end