App Finished

Pierre747 · Jul 4, 2022 · b575102 · b575102
1 parent 5ebca6b
commit b575102
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 16 deletions.
diff --git a/src/components/App.js b/src/components/App.js
@@ -59,18 +59,19 @@ function App() {
   function handleRecipeAdd() {
     const newRecipe = {
       id: uuidv4(),
-      name: "New",
+      name: "",
       servings: 1,
-      cookTime: "1:00",
-      instructions: "Instr.",
+      cookTime: "",
+      instructions: "",
       ingredients: [
         {
           id: uuidv4(),
-          name: "Name",
-          amount: "1 Tbs",
+          name: "",
+          amount: "",
         },
       ],
     };
+    setselectedRecipeId(newRecipe.id);
     setRecipes([...recipes, newRecipe]);
   }
 
@@ -82,6 +83,9 @@ function App() {
   }
 
   function handleRecipeDelete(id) {
+    if (selectedRecipeId != null && selectedRecipeId === id) {
+      setselectedRecipeId(undefined);
+    }
     setRecipes(recipes.filter((recipe) => recipe.id !== id));
   }
 

diff --git a/src/components/RecipeEdit.js b/src/components/RecipeEdit.js
@@ -8,11 +8,12 @@
 /* eslint-disable quotes */
 /* eslint-disable no-unused-vars */
 import React, { useContext } from "react";
+import { v4 as uuidv4 } from "uuid";
 import RecipeIngredientEdit from "./RecipeIngredientEdit";
 import { RecipeContext } from "./App";
 
 export default function RecipeEdit({ recipe }) {
-  const { handleRecipeChange } = useContext(RecipeContext);
+  const { handleRecipeChange, handleRecipeSelect } = useContext(RecipeContext);
 
   function handleChange(changes) {
     handleRecipeChange(recipe.id, { ...recipe, ...changes });
@@ -25,10 +26,30 @@ export default function RecipeEdit({ recipe }) {
     handleChange({ ingredients: newIngredients });
   }
 
+  function handleIngredientAdd() {
+    const newIngredient = {
+      id: uuidv4(),
+      name: "",
+      amount: "",
+    };
+    handleChange({ ingredients: [...recipe.ingredients, newIngredient] });
+  }
+
+  function handleIngredientDelete(id) {
+    handleChange({
+      ingredients: recipe.ingredients.filter((i) => i.id !== id),
+    });
+  }
+
   return (
     <div className="recipe-edit">
       <div className="recipe-edit__remove-button-container">
-        <button className="btn recipe-edit__remove-button">&times;</button>
+        <button
+          className="btn recipe-edit__remove-button"
+          onClick={() => handleRecipeSelect(undefined)}
+        >
+          &times;
+        </button>
       </div>
       <div className="recipe-edit__details-grid">
         <label htmlFor="name" className="recipe-edit__label">
@@ -39,7 +60,7 @@ export default function RecipeEdit({ recipe }) {
           name="name"
           id="name"
           value={recipe.name}
-          onInput={(e) => handleChange({ name: e.target.value })}
+          onChange={(e) => handleChange({ name: e.target.value })}
           className="recipe-edit__input"
         />
         <label htmlFor="cookTime" className="recipe-edit__label">
@@ -50,7 +71,7 @@ export default function RecipeEdit({ recipe }) {
           name="cookTime"
           id="cookTime"
           value={recipe.cookTime}
-          onInput={(e) => handleChange({ cookTime: e.target.value })}
+          onChange={(e) => handleChange({ cookTime: e.target.value })}
           className="recipe-edit__input"
         />
         <label htmlFor="servings" className="recipe-edit__label">
@@ -62,7 +83,7 @@ export default function RecipeEdit({ recipe }) {
           name="servings"
           id="servings"
           value={recipe.servings}
-          onInput={(e) =>
+          onChange={(e) =>
             handleChange({ servings: Number(e.target.value) || "" })
           }
           className="recipe-edit__input"
@@ -73,7 +94,7 @@ export default function RecipeEdit({ recipe }) {
         <textarea
           name="instructions"
           className="recipe-edit__input"
-          onInput={(e) => handleChange({ instructions: e.target.value })}
+          onChange={(e) => handleChange({ instructions: e.target.value })}
           value={recipe.instructions}
           id="instructions"
         />
@@ -88,12 +109,18 @@ export default function RecipeEdit({ recipe }) {
           <RecipeIngredientEdit
             key={ingredient.id}
             handleIngredientChange={handleIngredientChange}
+            handleIngredientDelete={handleIngredientDelete}
             ingredient={ingredient}
           />
         ))}
       </div>
       <div className="recipe-edit__add-ingredient-btn-container">
-        <button className="btn btn--primary">Add Ingredient</button>
+        <button
+          className="btn btn--primary"
+          onClick={() => handleIngredientAdd()}
+        >
+          Add Ingredient
+        </button>
       </div>
     </div>
   );

diff --git a/src/components/RecipeIngredientEdit.js b/src/components/RecipeIngredientEdit.js
@@ -5,7 +5,7 @@
 import React from "react";
 
 export default function RecipeIngredientEdit(props) {
-  const { ingredient, handleIngredientChange } = props;
+  const { ingredient, handleIngredientChange, handleIngredientDelete } = props;
 
   function handleChange(changes) {
     handleIngredientChange(ingredient.id, { ...ingredient, ...changes });
@@ -15,16 +15,21 @@ export default function RecipeIngredientEdit(props) {
       <input
         className="recipe-edit__input"
         type="text"
-        onInput={(e) => handleChange({ name: e.target.value })}
+        onChange={(e) => handleChange({ name: e.target.value })}
         value={ingredient.name}
       />
       <input
         className="recipe-edit__input"
         type="text"
-        onInput={(e) => handleChange({ amount: e.target.value })}
+        onChange={(e) => handleChange({ amount: e.target.value })}
         value={ingredient.amount}
       />
-      <button className="btn btn--danger">&times;</button>
+      <button
+        className="btn btn--danger"
+        onClick={() => handleIngredientDelete(ingredient.id)}
+      >
+        &times;
+      </button>
     </>
   );
 }