add eslint and delete button

app/controllers/foods_controller.rb

@@ -1,7 +1,7 @@
 class FoodsController < ApplicationController
 
   def index
-    @foods = Food.all
+    @foods = Food.order(:name)
   end
 
 end

app/javascript/components/foods/Index.tsx

@@ -22,11 +22,10 @@ const FetchDataComponent: React.FC = () => {
 
   return (
     <div>
-      <h2>Fetched Data:</h2>
       <ul>
         {foods.map((item) => (
           <li key={item.id}>
-            {item.id}: {item.name}
+            {item.name}
           </li>
         ))}
       </ul>

app/javascript/components/recipes/Index.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
 import { useAppDispatch, useAppSelector } from '../../store/hooks'
 import { fetchRecipes } from '../../store/recipesSlice'
+import { Link } from 'react-router-dom';
 
 const RecipeTable: React.FC = () => {
   const dispatch = useAppDispatch()
@@ -22,7 +23,8 @@ const RecipeTable: React.FC = () => {
 
   return (
     <div>
-      <table>
+      <Link to="/recipes/new" className="bg-blue-500 text-white px-4 py-2 rounded mt-2">New Recipe</Link>
+      <table className="table-auto w-full mt-4">
         <thead>
           <tr>
             <th>Recipe Name</th>
@@ -45,5 +47,4 @@ const RecipeTable: React.FC = () => {
     </div>
   )
 }
-
 export default RecipeTable

app/javascript/components/recipes/New.tsx

@@ -1,8 +1,9 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useAppDispatch, useAppSelector } from '../../store/hooks';
 import { createRecipe } from '../../store/recipesSlice';
 import { Ingredient } from '../../types/types';
 import useCsrfToken from '../../hooks/useCsrfToken';
+import { fetchFoods } from '../../store/foodsSlice';
 
 export interface RecipeFormData {
   name: string;
@@ -13,8 +14,14 @@ export interface RecipeFormData {
 const NewRecipeForm: React.FC = () => {
   const dispatch = useAppDispatch();
   const csrfToken = useCsrfToken();
-  const { items: foods } = useAppSelector((state) => state.foods);
+  const { items: foods, status: foods_status } = useAppSelector((state) => state.foods);
 
+  useEffect(() => {
+    if (foods_status === 'idle') {
+      dispatch(fetchFoods())
+    }
+  }, [dispatch]);
+
   const [formData, setFormData] = useState<RecipeFormData>({
     name: '',
     description: '',
@@ -31,6 +38,13 @@ const NewRecipeForm: React.FC = () => {
     });
   };
 
+  const deleteIngredient = (indexToDelete: number) => {
+    setFormData({
+      ...formData,
+      ingredients_attributes: formData.ingredients_attributes.filter((_, index) => index !== indexToDelete)
+    });
+  };
+
   const handleIngredientChange = (index: number, field: keyof Ingredient, value: string | number) => {
     const newIngredients = [...formData.ingredients_attributes];
     newIngredients[index] = {
@@ -103,8 +117,16 @@ const NewRecipeForm: React.FC = () => {
               value={ingredient.measurement}
               onChange={(e) => handleIngredientChange(index, 'measurement', e.target.value)}
               placeholder="Measurement"
-              className="p-2 border rounded w-24"
+              className="p-2 border rounded min-w-52"
             />
+
+            <button
+              type="button"
+              onClick={() => deleteIngredient(index)}
+              className="bg-red-500 text-white px-3 py-2 rounded"
+            >
+              Delete
+            </button>
           </div>
         ))}
         <button

eslint.config.mjs

@@ -0,0 +1,14 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import tseslint from "typescript-eslint";
+import pluginReact from "eslint-plugin-react";
+
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+  {files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"]},
+  {languageOptions: { globals: globals.browser }},
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  pluginReact.configs.flat.recommended,
+];