updating edit form

atharv02-git · Dec 10, 2021 · e083ab2 · e083ab2
1 parent 5c57ca5
commit e083ab2
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 39 deletions.
diff --git a/src/pages/edit/Edit.js b/src/pages/edit/Edit.js
@@ -1,3 +1,7 @@
+// import { projectFirestore } from "../../firebase/config";
+import { useParams, useLocation } from "react-router";
+// import { useNavigate } from 'react-router-dom';
+
 import { useState, useRef} from "react";
 // style
 import "./Edit.css";
@@ -7,11 +11,14 @@ import { useTheme } from "../../hooks/useTheme";
 
 
 export default function Edit() {
-  const [title, setTitle] = useState("");
-  const [method, setMethod] = useState("");
-  const [cookingTime, setCookingTime] = useState("");
+  const location = useLocation()
+  const { recipe } = location.state;
+
+  const [title, setTitle] = useState(recipe.title);
+  const [method, setMethod] = useState(recipe.method);
+  const [cookingTime, setCookingTime] = useState(recipe.cookingTime.slice(0, 1));
   const [newIngredient, setNewIngredient] = useState("");
-  const [ingredients, setIngredients] = useState([]);
+  const [ingredients, setIngredients] = useState(recipe.ingredients);
   // useRef
   const ingredientInput = useRef(null);
 

diff --git a/src/pages/home/Home.js b/src/pages/home/Home.js
@@ -19,7 +19,7 @@ export default function Home() {
   useEffect(() => {
     setIsPending(true);
     // where unSub is a cleanup function
-    const unSub = projectFirestore.collection("recipes").onSnapshot((snapshot) => {
+    const unSubscribe = projectFirestore.collection("recipes").onSnapshot((snapshot) => {
         if (snapshot.empty) {
           setError("Ops, No recipes to load :(");
           setIsPending(false);
@@ -35,8 +35,8 @@ export default function Home() {
         setError(err.message)
         setIsPending(false)
       })
-      
-      return ()=>{unSub()}
+
+      return ()=>{unSubscribe()}
   }, []);
 
   return (

diff --git a/src/pages/recipe/Recipe.css b/src/pages/recipe/Recipe.css
@@ -14,12 +14,16 @@
   padding: 0;
   justify-content: center;
   margin-top: 0;
+
 }
 .recipe li {
   list-style-type: none;
   margin-right: 10px;
   color: #777;
 }
+.recipe li:first-child::before{
+  content:": ";
+}
 .recipe li::after {
   content: ",";
 }

diff --git a/src/pages/recipe/Recipe.js b/src/pages/recipe/Recipe.js
@@ -1,41 +1,44 @@
-import { useParams } from 'react-router-dom'
-import { useTheme } from '../../hooks/useTheme'
-import { useState, useEffect } from 'react'
-import { projectFirestore } from '../../firebase/config'
+import { useParams } from "react-router-dom";
+import { useTheme } from "../../hooks/useTheme";
+import { useState, useEffect } from "react";
+import { projectFirestore } from "../../firebase/config";
+import { Link } from "react-router-dom";
 
 // styles
-import './Recipe.css'
+import "./Recipe.css";
 
 export default function Recipe() {
-  const { id } = useParams()
-  const { mode } = useTheme()
+  const { id } = useParams();
+  const { mode } = useTheme();
 
-  const [isPending, setIsPending] = useState(false)
-  const [error, setError] = useState(null)
-  const [recipe, setRecipe] = useState(null)
+  const [isPending, setIsPending] = useState(false);
+  const [error, setError] = useState(null);
+  const [recipe, setRecipe] = useState(null);
 
   useEffect(() => {
-    setIsPending(true)
+    setIsPending(true);
 
-    const unSubscribe = projectFirestore.collection('recipes').doc(id).onSnapshot(doc => {
-      if (doc.exists) {
-        setIsPending(false)
-        setRecipe(doc.data())
-      } else {
-        setIsPending(false)
-        setError(`Could not find that recipe`)
-      }
-    })
+    const unSubscribe = projectFirestore
+      .collection("recipes")
+      .doc(id)
+      .onSnapshot((doc) => {
+        if (doc.exists) {
+          setIsPending(false);
+          setRecipe(doc.data());
+        } else {
+          setIsPending(false);
+          setError(`Could not find that recipe`);
+        }
+      });
 
-    return () => unSubscribe()
+    return () => unSubscribe();
+  }, [id]);
 
-  }, [id])
-
-  const handleClick = () => {
-    projectFirestore.collection('recipes').doc(id).update({
-      title: 'Updated title'
-    })
-  }
+  // const handleClick = () => {
+  //   projectFirestore.collection('recipes').doc(id).update({
+  //     title: 'Veggie Stew'
+  //   })
+  // }
 
   return (
     <div className={`recipe ${mode}`}>
@@ -46,12 +49,21 @@ export default function Recipe() {
           <h2 className="page-title">{recipe.title}</h2>
           <p>Takes {recipe.cookingTime} to cook.</p>
           <ul>
-            {recipe.ingredients.map(ingredient => <li key={ingredient}>{ingredient}</li>)}
+            Recipe includes
+            {recipe.ingredients.map((ingredient) => (
+              <li key={ingredient}>{ingredient}</li>
+            ))}
           </ul>
           <em className="method">{recipe.method}</em>
-          <button className= "button"onClick={handleClick}>Update me</button>
+          <Link
+            className="button"
+            to={`/edit/${id}}`}
+            state={{ recipe: recipe, }}
+          >
+            Edit
+          </Link>
         </>
       )}
     </div>
-  )
-}
+  );
+}