Production branch

.gitignore

@@ -4,7 +4,8 @@
 /node_modules
 /.pnp
 .pnp.js
-
+.env
+/firebase
 # testing
 /coverage
 

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
+    "dotenv": "^10.0.0",
     "firebase": "8.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

src/App.css

@@ -2,5 +2,5 @@
   min-height: 100%;
 }
 .App.dark {
-  background: #282f41;
+  background: #333;
 }

src/firebase/config.js

@@ -1,14 +1,23 @@
 import firebase from "firebase/app";
 import "firebase/firestore";
 
+// const firebaseConfig = {
+//     apiKey: process.env.FIREBASE_API_KEY,
+//     authDomain: process.env.FIREBASE_AUTH_DOMAIN ,
+//     projectId: process.env.FIREBASE_PROJECT_ID,
+//     storageBucket: process.env.FIREBASE_STORAGE_BUCKET,
+//     messagingSenderId: process.env.FIREBASE_MESSAGING_SENDER_ID,
+//     appId: process.env.FIREBASE_APP_ID
+//   };
+
 const firebaseConfig = {
-    apiKey: "AIzaSyAe4IkiQyjxjgFwf32xIOkdHClG2Naz3Nc",
-    authDomain: "cooking-recipe-website.firebaseapp.com",
-    projectId: "cooking-recipe-website",
-    storageBucket: "cooking-recipe-website.appspot.com",
-    messagingSenderId: "390496285457",
-    appId: "1:390496285457:web:7aafa4ffc19bd3546792b0"
-  };
+  apiKey: "AIzaSyAe4IkiQyjxjgFwf32xIOkdHClG2Naz3Nc",
+  authDomain: "cooking-recipe-website.firebaseapp.com",
+  projectId: "cooking-recipe-website",
+  storageBucket: "cooking-recipe-website.appspot.com",
+  messagingSenderId: "390496285457",
+  appId: "1:390496285457:web:7aafa4ffc19bd3546792b0"
+};
 
 //initialize firebase
 firebase.initializeApp(firebaseConfig);

src/pages/edit/Edit.js

@@ -1,37 +1,58 @@
-// import { projectFirestore } from "../../firebase/config";
+import { projectFirestore } from "../../firebase/config";
 import { useParams, useLocation } from "react-router";
-// import { useNavigate } from 'react-router-dom';
+import { useNavigate } from "react-router-dom";
 
-import { useState, useRef} from "react";
+import { useState, useRef } from "react";
 // style
 import "./Edit.css";
 
 // Hooks
 import { useTheme } from "../../hooks/useTheme";
 
-
 export default function Edit() {
-  const location = useLocation()
+  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 [cookingTime, setCookingTime] = useState(
+    recipe.cookingTime.slice(0, 1)
+  );
   const [newIngredient, setNewIngredient] = useState("");
   const [ingredients, setIngredients] = useState(recipe.ingredients);
   // useRef
   const ingredientInput = useRef(null);
 
   const { mode } = useTheme();
+  const navigate = useNavigate();
+  // Destructuring id
+  const { id } = useParams();
 
-  const editFormHandler = (e) => {
+  const submitFormHandler = async (e) => {
     e.preventDefault();
     console.log(title, method, cookingTime, ingredients);
+    try {
+      await projectFirestore
+        .collection("recipes")
+        .doc(id)
+        .update({
+          title:title,
+          ingredients:ingredients,
+          method:method,
+          cookingTime:
+            cookingTime.slice(0, 1) === "1"
+              ? cookingTime.slice(0, 1) + "minute"
+              : cookingTime.slice(0, 1) + "minutes",
+        });
+      navigate("/");
+    } catch (err) {
+      console.log(err);
+    }
   };
 
   const addIngredientHandler = (e) => {
     e.preventDefault();
-
+    // To check no duplicate values to be repeated
     const ing = newIngredient.trim();
     if (ing && !ingredients.includes(ing)) {
       setIngredients((prevIngredients) => [...prevIngredients, ing]);
@@ -43,52 +64,64 @@ export default function Edit() {
   return (
     <div className={`edit ${mode}`}>
       <h2 className="page-title">Edit Recipe</h2>
-      <form onSubmit={editFormHandler}>
-        <label>
-          <span>Recipe Title:</span>
-          <input
-            type="text"
-            onChange={(e) => setTitle(e.target.value)}
-            value={title}
-            required
-          />
-        </label>
-        <label>
-          <span>Cooking Ingredients:</span>
-          <div className="ingredients">
+      {recipe && (
+        <form onSubmit={submitFormHandler}>
+          <label>
+            <span>Recipe Title:</span>
             <input
               type="text"
-              onChange={(e) => setNewIngredient(e.target.value)}
-              value={newIngredient}
-              ref={ingredientInput}
+              onChange={(e) => setTitle(e.target.value)}
+              value={title}
+              required
+            />
+          </label>
+
+          <label>
+            <span>Cooking Ingredients:</span>
+            <div className="ingredients">
+              <input
+                type="text"
+                onChange={(e) => setNewIngredient(e.target.value)}
+                value={newIngredient}
+                ref={ingredientInput}
+              />
+              <button onClick={addIngredientHandler} className="btn">
+                add
+              </button>
+            </div>
+          </label>
+          <p>
+            Current ingredients:{" "}
+            {ingredients.map((i) => (
+              <span
+                className="ingredient"
+                key={i}
+              >
+                {i}{" "}
+              </span>
+            ))}
+          </p>
+
+          <label>
+            <span>Recipe Method:</span>
+            <textarea
+              onChange={(e) => setMethod(e.target.value)}
+              value={method}
+              required
+            />
+          </label>
+          <label>
+            <span>Cooking Time (minutes):</span>
+            <input
+              onChange={(e) => setCookingTime(e.target.value)}
+              type="number"
+              value={cookingTime}
+              required
             />
-            <button onClick={addIngredientHandler} className="btn">
-              add
-            </button>
-          </div>
-        </label>
-        <p>Current Ingredients: {ingredients.map(i => (
-          <em key={i}>{i},</em>
-        ))}</p>
-        <label>
-          <span>Recipe Method:</span>
-          <textarea
-            onChange={(e) => setMethod(e.target.value)}
-            value={method}
-            required
-          />
-        </label>
-        <label>
-          <span>Cooking Time (minutes):</span>
-          <input
-            onChange={(e) => setCookingTime(e.target.value)}
-            type="number"
-            value={cookingTime}
-            required
-          />
-        </label>
-        <button className="btn">Update</button>
-      </form>
+          </label>
+          <button className="btn">Update</button>
+        </form>
+      )}
     </div>
   );
 }

src/pages/recipe/Recipe.css

@@ -21,9 +21,9 @@
   margin-right: 10px;
   color: #777;
 }
-.recipe li:first-child::before{
+/* .recipe li:first-child::before{
   content:": ";
-}
+} */
 .recipe li::after {
   content: ",";
 }

src/pages/recipe/Recipe.js

@@ -49,7 +49,6 @@ export default function Recipe() {
           <h2 className="page-title">{recipe.title}</h2>
           <p>Takes {recipe.cookingTime} to cook.</p>
           <ul>
-            Recipe includes
             {recipe.ingredients.map((ingredient) => (
               <li key={ingredient}>{ingredient}</li>
             ))}