From d1f50ad4d6b5a9084e04a6e5a04b2b354980aac5 Mon Sep 17 00:00:00 2001 From: Mykola Vasyl'yev Date: Wed, 22 Mar 2023 17:33:32 -0400 Subject: [PATCH 1/2] create rating attribute for recipes and tie to backend --- app/controllers/recipes_controller.rb | 10 ++++++++- client/src/components/App.js | 10 +++++++++ client/src/components/Recipe.js | 30 ++++++++++++++++++++++++--- client/src/components/RecipeBook.js | 2 +- 4 files changed, 47 insertions(+), 5 deletions(-) diff --git a/app/controllers/recipes_controller.rb b/app/controllers/recipes_controller.rb index 9bd39b8..41fc504 100644 --- a/app/controllers/recipes_controller.rb +++ b/app/controllers/recipes_controller.rb @@ -6,6 +6,10 @@ def create recipe.update({ingredients: params[:ingredients]}) render json: recipe, status: :accepted end + + def update + recipe = Recipe.update!(update_recipe_params) + end def destroy recipe_to_delete = find_recipe @@ -16,7 +20,11 @@ def destroy private def new_recipe_params - params.permit(:title, :readyIn, :image, :summary, :instructions, :ingredients, :sourceURL, :user_id, rating) + params.permit(:title, :readyIn, :image, :summary, :instructions, :ingredients, :sourceURL, :user_id, :rating) + end + + def update_recipe_params + params.permit(:rating) end def find_recipe diff --git a/client/src/components/App.js b/client/src/components/App.js index 5fa9216..66127ad 100644 --- a/client/src/components/App.js +++ b/client/src/components/App.js @@ -123,6 +123,15 @@ function App() { }); } + // update a recipe with rating + function handleUpdateRecipe(recipe) { + fetch(`/recipes/${recipe.id}`, { + method: "PATCH", + headers: { "Content-Type": "application/json" }, + body: JSON.stringify(recipe.rating), + }); + } + // delete a recipe from your recipe book function handleDeleteRecipe(id) { let newRecipes = currentUser.recipes.filter((recipe) => recipe.id !== id); @@ -148,6 +157,7 @@ function App() { avatar, handleLogOut, handleAddRecipe, + handleUpdateRecipe, handleDeleteRecipe, }} > diff --git a/client/src/components/Recipe.js b/client/src/components/Recipe.js index 6988201..511de29 100644 --- a/client/src/components/Recipe.js +++ b/client/src/components/Recipe.js @@ -1,4 +1,4 @@ -import React, { useContext } from "react"; +import React, { useContext, useState } from "react"; import { UserContext } from "./App"; import Button from "@mui/material/Button"; import FavoriteIcon from "@mui/icons-material/Favorite"; @@ -13,10 +13,16 @@ import IconButton from "@mui/material/IconButton"; import Typography from "@mui/material/Typography"; // import { red } from "@mui/material/colors"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; +import { Rating } from "@mui/material"; function Recipe({ recipe }) { - const { currentUser, handleDeleteRecipe, handleAddRecipe } = - useContext(UserContext); + const { + currentUser, + handleDeleteRecipe, + handleAddRecipe, + handleUpdateRecipe, + } = useContext(UserContext); + const [ratingValue, setRatingValue] = useState(0); const { title, readyIn, @@ -25,6 +31,7 @@ function Recipe({ recipe }) { ingredients, instructions, sourceURL, + rating = 0, user_id = null, id = null, } = recipe; @@ -35,6 +42,7 @@ function Recipe({ recipe }) { function addRecipe() { recipe.user_id = currentUser.id; + recipe.rating = ratingValue; handleAddRecipe(recipe); } @@ -42,6 +50,11 @@ function Recipe({ recipe }) { handleDeleteRecipe(id); } + function updateRating(newRating) { + recipe.rating = newRating; + handleUpdateRecipe(recipe); + } + // start of card code -- DO NOT EDIT BELOW THIS LINE -- const ExpandMore = styled((props) => { @@ -68,6 +81,17 @@ function Recipe({ recipe }) { return ( + {user_id ? ( + { + setRatingValue(newRating); + updateRating(newRating); + }} + /> + ) : null} diff --git a/client/src/components/RecipeBook.js b/client/src/components/RecipeBook.js index 7ed6945..7ebf91b 100644 --- a/client/src/components/RecipeBook.js +++ b/client/src/components/RecipeBook.js @@ -15,7 +15,7 @@ function RecipeBook() { color: theme.palette.text.secondary, })); const recipesDisplayed = currentUser.recipes.map((recipe) => ( - + From 5845b80640712295790d519d96114f9065ee6ec7 Mon Sep 17 00:00:00 2001 From: Mykola Vasyl'yev Date: Wed, 22 Mar 2023 18:14:20 -0400 Subject: [PATCH 2/2] set up rating update function and update method on backend --- .byebug_history | 3 +++ app/controllers/recipes_controller.rb | 4 +++- app/serializers/recipe_serializer.rb | 2 +- client/src/components/App.js | 2 +- client/src/components/Recipe.js | 4 ++-- 5 files changed, 10 insertions(+), 5 deletions(-) diff --git a/.byebug_history b/.byebug_history index b36912e..b72daa5 100644 --- a/.byebug_history +++ b/.byebug_history @@ -1,3 +1,6 @@ +exit +params[:rating] +params q recipe recipe.update({ingredients: params[:ingredients]}) diff --git a/app/controllers/recipes_controller.rb b/app/controllers/recipes_controller.rb index 41fc504..61e0036 100644 --- a/app/controllers/recipes_controller.rb +++ b/app/controllers/recipes_controller.rb @@ -8,7 +8,9 @@ def create end def update - recipe = Recipe.update!(update_recipe_params) + recipe_to_update = find_recipe + recipe_to_update.update!(update_recipe_params) + render json: recipe, status: :accepted end def destroy diff --git a/app/serializers/recipe_serializer.rb b/app/serializers/recipe_serializer.rb index e0e4a60..91e96bc 100644 --- a/app/serializers/recipe_serializer.rb +++ b/app/serializers/recipe_serializer.rb @@ -1,3 +1,3 @@ class RecipeSerializer < ActiveModel::Serializer - attributes :id, :title, :readyIn, :image, :summary, :instructions, :ingredients, :sourceURL, :user_id + attributes :id, :title, :readyIn, :image, :summary, :instructions, :ingredients, :sourceURL, :user_id, :rating end diff --git a/client/src/components/App.js b/client/src/components/App.js index 66127ad..3302996 100644 --- a/client/src/components/App.js +++ b/client/src/components/App.js @@ -128,7 +128,7 @@ function App() { fetch(`/recipes/${recipe.id}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, - body: JSON.stringify(recipe.rating), + body: JSON.stringify({ rating: recipe.rating }), }); } diff --git a/client/src/components/Recipe.js b/client/src/components/Recipe.js index 511de29..dbff408 100644 --- a/client/src/components/Recipe.js +++ b/client/src/components/Recipe.js @@ -22,7 +22,6 @@ function Recipe({ recipe }) { handleAddRecipe, handleUpdateRecipe, } = useContext(UserContext); - const [ratingValue, setRatingValue] = useState(0); const { title, readyIn, @@ -35,6 +34,7 @@ function Recipe({ recipe }) { user_id = null, id = null, } = recipe; + const [ratingValue, setRatingValue] = useState(rating); const mappedIngredients = ingredients.map((ingredient) => (
  • {ingredient}
    • @@ -84,7 +84,7 @@ function Recipe({ recipe }) { {user_id ? ( { setRatingValue(newRating);