From c8ed5cb65635d04927a2ff242b9437e54259eb4f Mon Sep 17 00:00:00 2001 From: Kyle Zarazan Date: Wed, 20 Nov 2024 16:39:36 -0700 Subject: [PATCH] add eslint and delete button --- app/controllers/foods_controller.rb | 2 +- app/javascript/components/foods/Index.tsx | 3 +- app/javascript/components/recipes/Index.tsx | 5 +- app/javascript/components/recipes/New.tsx | 28 +- eslint.config.mjs | 14 + package-lock.json | 3421 ++++++++++++++++++- package.json | 7 + 7 files changed, 3368 insertions(+), 112 deletions(-) create mode 100644 eslint.config.mjs diff --git a/app/controllers/foods_controller.rb b/app/controllers/foods_controller.rb index ffbbc8f..4b00f2f 100644 --- a/app/controllers/foods_controller.rb +++ b/app/controllers/foods_controller.rb @@ -1,7 +1,7 @@ class FoodsController < ApplicationController def index - @foods = Food.all + @foods = Food.order(:name) end end diff --git a/app/javascript/components/foods/Index.tsx b/app/javascript/components/foods/Index.tsx index 4c6c6e7..19588c8 100644 --- a/app/javascript/components/foods/Index.tsx +++ b/app/javascript/components/foods/Index.tsx @@ -22,11 +22,10 @@ const FetchDataComponent: React.FC = () => { return (
-

Fetched Data:

diff --git a/app/javascript/components/recipes/Index.tsx b/app/javascript/components/recipes/Index.tsx index 76dc021..31f133e 100644 --- a/app/javascript/components/recipes/Index.tsx +++ b/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 (
- + New Recipe +
@@ -45,5 +47,4 @@ const RecipeTable: React.FC = () => { ) } - export default RecipeTable diff --git a/app/javascript/components/recipes/New.tsx b/app/javascript/components/recipes/New.tsx index e98ad09..4a5a461 100644 --- a/app/javascript/components/recipes/New.tsx +++ b/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({ 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" /> + + ))}
Recipe Name