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:
{foods.map((item) => (
-
- {item.id}: {item.name}
+ {item.name}
))}
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
+
Recipe Name |
@@ -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"
/>
+
+
))}