create rating attribute for recipes and tie to backend

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

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,
       }}
     >

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,13 +42,19 @@ function Recipe({ recipe }) {
 
   function addRecipe() {
     recipe.user_id = currentUser.id;
+    recipe.rating = ratingValue;
     handleAddRecipe(recipe);
   }
 
   function deleteRecipe() {
     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 (
     <Card sx={{ maxWidth: 500 }}>
       <CardHeader title={title} subheader={readyInText} />
+      {user_id ? (
+        <Rating
+          name='simple-controlled'
+          value={rating}
+          precision={0.5}
+          onChange={(event, newRating) => {
+            setRatingValue(newRating);
+            updateRating(newRating);
+          }}
+        />
+      ) : null}
       <CardMedia component='img' height='194' image={image} alt='food' />
       <CardContent>
         <Typography variant='body2' color='text.secondary'>

client/src/components/RecipeBook.js

@@ -15,7 +15,7 @@ function RecipeBook() {
     color: theme.palette.text.secondary,
   }));
   const recipesDisplayed = currentUser.recipes.map((recipe) => (
-    <Grid item xs={6} md={4}>
+    <Grid item xs={6} md={4} key={recipe.id}>
       <Item>
         <Recipe key={recipe.summary} recipe={recipe} />
       </Item>