Refactor code for recipes page. Updating of recipes is broken.

controllers/home.js

@@ -147,7 +147,7 @@ module.exports = {
         Merchant.findOne({_id: req.session.user})
             .populate("recipes")
             .then((merchant)=>{
-                axios.get(`https://apisandbox.dev.clover.com/v3/merchants/${merchantId}/items?access_token=${token}`)
+                axios.get(`https://apisandbox.dev.clover.com/v3/merchants/${req.session.user}/items?access_token=${token}`)
                     .then((result)=>{
                         let deletedRecipes = merchant.recipes.slice();
                         for(let i = 0; i < result.data.elements.length; i++){

views/recipesPage/controller.js

@@ -0,0 +1,11 @@
+let controller = {
+    recipesStrand: document.querySelector("#recipesStrand"),
+    singleRecipeStrand: document.querySelector("#singleRecipeStrand"),
+
+    clearScreen: function(){
+        this.recipesStrand.style.display = "none";
+        this.singleRecipeStrand.style.display = "none";
+    }
+}
+
+recipesObj.display();

views/recipesPage/recipes.css

@@ -13,7 +13,7 @@ h2{
     margin-bottom: 15px;
 }
 
-#recipes{
+#recipesStrand{
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -52,7 +52,7 @@ h2{
                 color: #001b2d;
             }
 
-#ingredient{
+#singleRecipeStrand{
     display: none;
     width: 50%;
     flex-direction: column;

views/recipesPage/recipes.ejs

@@ -9,19 +9,22 @@
 
         <% include ../shared/banner %>
 
-        <h1 id="title">Recipes</h1>
+        <div id="recipesStrand">
+            <h1>Recipes</h1>
+
+            <button id="recipeUpdate" onclick="recipesObj.updateRecipes()">Update Recipes</button>
 
-        <div id="recipes">
-            <button id="recipeUpdate" onclick="recipesPage.updateRecipes()">Update Recipes</button>
             <a href="/inventory">Return to Inventory</a>
 
             <div id="recipesContainer"></div>
         </div>
 
-        <div id="ingredient" >
+        <div id="singleRecipeStrand" >
+            <h1></h1>
+
             <button id="addButton">Add Ingredient</button>
 
-            <button onclick="recipesPage.displayRecipes()">Back to Recipes</button>
+            <button onclick="recipesObj.display()">Back to Recipes</button>
 
             <table>
                 <thead>
@@ -39,5 +42,7 @@
         <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
         <script src="../shared/validation.js"></script>
         <script src="/recipesPage/recipes.js"></script>
+        <script src="/recipesPage/singleRecipe.js"></script>
+        <script src="/recipesPage/controller.js"></script>
     </body>
 </html>

views/recipesPage/recipes.js

@@ -1,14 +1,18 @@
-let recipesPage = {
-    currentRecipe: {},
-    //Display all recipes on a card
-    displayRecipes: function(){
-        document.querySelector("#recipes").style.display = "flex";
-        document.querySelector("#ingredient").style.display = "none";
-        document.querySelector("#title").innerText = "Recipes";
+let recipesObj = {
+    isPopulated: false,
 
-        let body = document.querySelector("#recipesContainer");
+    display: function(){
+        controller.clearScreen();
+        controller.recipesStrand.style.display = "flex";
 
-        currentRecipe = {};
+        if(!this.isPopulated){
+            this.populateRecipes();
+            this.isPopulated = true;
+        }
+    },
+
+    populateRecipes: function(){
+        let body = document.querySelector("#recipesContainer");
 
         while(body.children.length > 0){
             body.removeChild(body.firstChild);
@@ -17,7 +21,7 @@ let recipesPage = {
         for(let recipe of merchant.recipes){
             let recipeDiv = document.createElement("div");
             recipeDiv.classList = "recipe-card";
-            recipeDiv.onclick = ()=>{this.displayOneRecipe(recipe._id)};
+            recipeDiv.onclick = ()=>{singleRecipeObj.display(recipe)};
             body.appendChild(recipeDiv);
 
             if(recipe.ingredients.length === 0){
@@ -41,206 +45,6 @@ let recipesPage = {
         }
     },
 
-    //Display a single recipe with all of its ingredients
-    displayOneRecipe: function(recipeId){
-        let recipesDiv = document.querySelector("#recipes");
-        let ingredientDiv = document.querySelector("#ingredient");
-        let tbody = document.querySelector("tbody");
-        let title = document.querySelector("#title");
-
-        while(tbody.children.length > 0){
-            tbody.removeChild(tbody.firstChild);
-        }
-
-        this.currentRecipe = merchant.recipes.find(r => r._id === recipeId);
-
-        document.querySelector("#addButton").onclick = ()=>{this.displayAdd(this.currentRecipe)};
-        title.innerText = this.currentRecipe.name;
-
-        recipesDiv.style.display = "none";
-        ingredientDiv.style.display = "flex";
-
-        for(let ingredient of this.currentRecipe.ingredients){
-            let row = document.createElement("tr");
-            row.recipeId = this.currentRecipe._id;
-            tbody.appendChild(row);
-
-            let name = document.createElement("td");
-            name.innerText = ingredient.ingredient.name;
-            row.appendChild(name);
-
-            let quantity = document.createElement("td");
-            quantity.innerText = `${ingredient.quantity} ${ingredient.ingredient.unit}`;
-            row.appendChild(quantity);
-
-            let actions = document.createElement("td");
-            row.appendChild(actions);
-
-            let editButton = document.createElement("button");
-            editButton.innerText = "Edit";
-            editButton.onclick = ()=>{this.editIngredient(row, ingredient);};
-            actions.appendChild(editButton);
-
-            let removeButton = document.createElement("button");
-            removeButton.innerText = "Remove";
-            removeButton.onclick = ()=>{this.deleteIngredient(recipeId, ingredient._id, row);};
-            actions.appendChild(removeButton);
-        }
-    },
-
-    //Display the box in the table for adding another ingredient to a recipe
-    displayAdd: function(recipe){
-        let tbody = document.querySelector("tbody");
-
-        let row = document.createElement("tr");
-        tbody.appendChild(row);
-
-        let nameTd = document.createElement("td");
-        row.appendChild(nameTd);
-        let name = document.createElement("select");
-        nameTd.appendChild(name);
-
-        for(let item of merchant.inventory){
-            let nameOption = document.createElement("option");
-            nameOption.innerText = item.ingredient.name;
-            nameOption.value = item.ingredient._id;
-            name.appendChild(nameOption);
-        }
-
-        let quantityTd = document.createElement("td");
-        row.appendChild(quantityTd);
-        let quantity = document.createElement("input");
-        quantity.type = "text";
-        quantity.step = "0.01";
-        quantityTd.appendChild(quantity);
-
-        let actionTd = document.createElement("td");
-        row.appendChild(actionTd);
-
-        let saveButton = document.createElement("button");
-        saveButton.innerText = "Save";
-        actionTd.appendChild(saveButton);
-        saveButton.onclick = ()=>{this.addIngredient(recipe, name.value, quantity.value, row);};
-    },
-
-    addIngredient: function(recipe, ingredientId, quantity, row){
-        let item = {
-            ingredient: ingredientId,
-            quantity: quantity
-        }
-        
-        axios.post("/merchant/recipes/ingredients/create", {recipeId: recipe._id, item: item})
-            .then((newMerchant)=>{
-                let addIngredient = merchant.inventory.find(i => i.ingredient._id === ingredientId);
-                recipe.ingredients.push({
-                    ingredient: addIngredient.ingredient,
-                    quantity: item.quantity
-                });
-
-                //Change row from displaying options to showing default display
-                while(row.children.length > 0){
-                    row.removeChild(row.firstChild);
-                }
-
-                let name = document.createElement("td");
-                name.innerText = addIngredient.ingredient.name;
-                row.appendChild(name);
-
-                let quantity = document.createElement("td");
-                quantity.innerText = `${item.quantity} ${addIngredient.ingredient.unit}`;
-                row.appendChild(quantity);
-
-                let actions = document.createElement("td");
-                row.appendChild(actions);
-
-                let editButton = document.createElement("button");
-                editButton.innerText = "Edit";
-                editButton.onclick = ()=>{this.editIngredient(row, addIngredient);};
-                actions.appendChild(editButton);
-
-                let removeButton = document.createElement("button");
-                removeButton.innerText = "Remove";
-                removeButton.onclick = ()=>{this.deleteIngredient(recipe._id, ingredientId, row);};
-                actions.appendChild(removeButton);
-
-                banner.createNotification("Ingredient successfully added to database");
-            })
-            .catch((err)=>{
-                row.parentNode.removeChild(row);
-                console.log(err);
-                banner.createError("There was an error and the recipe could not be updated");
-            });
-    },
-
-    //Delete ingredient from table
-    //Delete ingredient from database
-    deleteIngredient: function(recipeId, ingredientId, row){
-        row.parentNode.removeChild(row);
-
-        let updateRecipe = merchant.recipes.find(r => r._id === recipeId);
-        for(let i = 0; i < updateRecipe.ingredients.length; i++){
-            if(updateRecipe.ingredients[i]._id === ingredientId){
-                updateRecipe.ingredients.splice(i, 1);
-                break;
-            }
-        }
-        
-        axios.post("/merchant/recipes/ingredients/remove", {ingredientId: ingredientId, recipeId: recipeId})
-            .then((result)=>{
-                banner.createNotification("Ingredient has been removed from recipe");
-            })
-            .catch((err)=>{
-                banner.createError("There was an error and the ingredient could not be removed from the recipe");
-                console.log(err);
-            });
-    },
-
-    //Change quantity field to input
-    //Change edit button
-    editIngredient: function(row, ingredient){
-        let td = row.children[1];
-        td.innerText = "";
-
-        let input = document.createElement("input");
-        input.type = "number";
-        input.step = "0.01";
-        input.value = ingredient.quantity;
-        td.appendChild(input);
-
-        let para = document.createElement("p");
-        para.innerText = ingredient.ingredient.unit;
-        td.appendChild(para);
-
-        let button = row.children[2].children[0];
-        button.innerText = "Save";
-        button.onclick = ()=>{this.updateIngredient(row, ingredient);}; 
-    },
-
-    updateIngredient: function(row, ingredient){
-        let originalQuantity = ingredient.quantity;
-        ingredient.quantity = row.children[1].children[0].value;
-
-        let td = row.children[1];
-        while(td.children.length > 0){
-            td.removeChild(td.firstChild);
-        }
-
-        let button = row.children[2].children[0];
-        button.innerText = "Edit";
-        button.onclick = ()=>{this.editIngredient(row, ingredient);};
-
-        axios.post("/merchant/recipes/ingredients/update", {recipeId: this.currentRecipe._id, ingredient: ingredient})
-            .then(()=>{
-                td.innerText = `${ingredient.quantity} ${ingredient.ingredient.unit}`;
-                banner.createNotification("Ingredient successfully updated");
-            })
-            .catch((err)=>{
-                td.innerText = `${originalQuantity} ${ingredient.ingredient.unit}`;
-                console.log(err);
-                banner.createError("There was an error and the ingredient could not be updated");
-            });
-    },
-
     updateRecipes: function(){
         axios.get("/merchant/recipes/update")
             .then((result)=>{
@@ -252,10 +56,7 @@ let recipesPage = {
                 }
             })
             .catch((err)=>{
-                console.log(err);
                 banner.createError("There was an error and your recipes could not be updated");
             });
     }
-}
-
-recipesPage.displayRecipes();
+}

views/recipesPage/singleRecipe.js

@@ -0,0 +1,190 @@
+let singleRecipeObj = {
+    display: function(recipe){
+        controller.clearScreen();
+        controller.singleRecipeStrand.style.display = "flex";
+
+        let tbody = document.querySelector("tbody");
+
+        while(tbody.children.length > 0){
+            tbody.removeChild(tbody.firstChild);
+        }
+
+        document.querySelector("#singleRecipeStrand h1").innerText = recipe.name;
+        document.querySelector("#addButton").onclick = ()=>{this.displayAdd(recipe)};
+
+        for(let ingredient of recipe.ingredients){
+            let row = document.createElement("tr");
+            tbody.appendChild(row);
+
+            let name = document.createElement("td");
+            name.innerText = ingredient.ingredient.name;
+            row.appendChild(name);
+
+            let quantity = document.createElement("td");
+            quantity.innerText = `${ingredient.quantity} ${ingredient.ingredient.unit}`;
+            row.appendChild(quantity);
+
+            let actions = document.createElement("td");
+            row.appendChild(actions);
+
+            let editButton = document.createElement("button");
+            editButton.innerText = "Edit";
+            editButton.onclick = ()=>{this.editIngredient(row, ingredient, recipe);};
+            actions.appendChild(editButton);
+
+            let removeButton = document.createElement("button");
+            removeButton.innerText = "Remove";
+            removeButton.onclick = ()=>{this.deleteIngredient(recipe._id, ingredient._id, row);};
+            actions.appendChild(removeButton);
+        }
+    },
+
+    displayAdd: function(recipe){
+        let tbody = document.querySelector("tbody");
+
+        let row = document.createElement("tr");
+        tbody.appendChild(row);
+
+        let nameTd = document.createElement("td");
+        row.appendChild(nameTd);
+        let name = document.createElement("select");
+        nameTd.appendChild(name);
+
+        for(let item of merchant.inventory){
+            let nameOption = document.createElement("option");
+            nameOption.innerText = item.ingredient.name;
+            nameOption.value = item.ingredient._id;
+            name.appendChild(nameOption);
+        }
+
+        let quantityTd = document.createElement("td");
+        row.appendChild(quantityTd);
+        let quantity = document.createElement("input");
+        quantity.type = "text";
+        quantity.step = "0.01";
+        quantityTd.appendChild(quantity);
+
+        let actionTd = document.createElement("td");
+        row.appendChild(actionTd);
+
+        let saveButton = document.createElement("button");
+        saveButton.innerText = "Save";
+        actionTd.appendChild(saveButton);
+        saveButton.onclick = ()=>{this.addIngredient(recipe, name.value, quantity.value, row);};
+    },
+
+    addIngredient: function(recipe, ingredientId, quantity, row){
+        let item = {
+            ingredient: ingredientId,
+            quantity: quantity
+        }
+        
+        axios.post("/merchant/recipes/ingredients/create", {recipeId: recipe._id, item: item})
+            .then((newMerchant)=>{
+                let addIngredient = merchant.inventory.find(i => i.ingredient._id === ingredientId);
+                recipe.ingredients.push({
+                    ingredient: addIngredient.ingredient,
+                    quantity: item.quantity
+                });
+
+                //Change row from displaying options to showing default display
+                while(row.children.length > 0){
+                    row.removeChild(row.firstChild);
+                }
+
+                let name = document.createElement("td");
+                name.innerText = addIngredient.ingredient.name;
+                row.appendChild(name);
+
+                let quantity = document.createElement("td");
+                quantity.innerText = `${item.quantity} ${addIngredient.ingredient.unit}`;
+                row.appendChild(quantity);
+
+                let actions = document.createElement("td");
+                row.appendChild(actions);
+
+                let editButton = document.createElement("button");
+                editButton.innerText = "Edit";
+                editButton.onclick = ()=>{this.editIngredient(row, addIngredient, recipe);};
+                actions.appendChild(editButton);
+
+                let removeButton = document.createElement("button");
+                removeButton.innerText = "Remove";
+                removeButton.onclick = ()=>{this.deleteIngredient(recipe._id, ingredientId, row);};
+                actions.appendChild(removeButton);
+
+                banner.createNotification("Ingredient successfully added to database");
+            })
+            .catch((err)=>{
+                row.parentNode.removeChild(row);
+                banner.createError("There was an error and the recipe could not be updated");
+            });
+    },
+
+    //Delete ingredient from table
+    //Delete ingredient from database
+    deleteIngredient: function(recipeId, ingredientId, row){
+        row.parentNode.removeChild(row);
+
+        let updateRecipe = merchant.recipes.find(r => r._id === recipeId);
+        for(let i = 0; i < updateRecipe.ingredients.length; i++){
+            if(updateRecipe.ingredients[i]._id === ingredientId){
+                updateRecipe.ingredients.splice(i, 1);
+                break;
+            }
+        }
+        
+        axios.post("/merchant/recipes/ingredients/remove", {ingredientId: ingredientId, recipeId: recipeId})
+            .then((result)=>{
+                banner.createNotification("Ingredient has been removed from recipe");
+            })
+            .catch((err)=>{
+                banner.createError("There was an error and the ingredient could not be removed from the recipe");
+            });
+    },
+
+    //Change quantity field to input
+    //Change edit button
+    editIngredient: function(row, ingredient, recipe){
+        let td = row.children[1];
+        td.innerText = "";
+
+        let input = document.createElement("input");
+        input.type = "number";
+        input.step = "0.01";
+        input.value = ingredient.quantity;
+        td.appendChild(input);
+
+        let para = document.createElement("p");
+        para.innerText = ingredient.ingredient.unit;
+        td.appendChild(para);
+
+        let button = row.children[2].children[0];
+        button.innerText = "Save";
+        button.onclick = ()=>{this.updateIngredient(row, ingredient, recipe);}; 
+    },
+
+    updateIngredient: function(row, ingredient, recipe){
+        let originalQuantity = ingredient.quantity;
+        ingredient.quantity = row.children[1].children[0].value;
+
+        let td = row.children[1];
+        while(td.children.length > 0){
+            td.removeChild(td.firstChild);
+        }
+
+        let button = row.children[2].children[0];
+        button.innerText = "Edit";
+        button.onclick = ()=>{this.editIngredient(row, ingredient);};
+
+        axios.post("/merchant/recipes/ingredients/update", {recipeId: recipe._id, ingredient: ingredient})
+            .then(()=>{
+                td.innerText = `${ingredient.quantity} ${ingredient.ingredient.unit}`;
+                banner.createNotification("Ingredient successfully updated");
+            })
+            .catch((err)=>{
+                td.innerText = `${originalQuantity} ${ingredient.ingredient.unit}`;
+                banner.createError("There was an error and the ingredient could not be updated");
+            });
+    },
+}