async/await

src/components/EditRecipePage.vue

@@ -121,55 +121,38 @@ export default {
             this.$router.push({ path: '/recipes/add', query: { url: this.link }})
             this.refreshRecipe();
         },
-        refreshRecipe() {
+        async refreshRecipe() {
             if (this.id) {
-                data.getRecipe(this.id).then((response) => {
+                this.recipe = await data.getRecipe(this.id);
-                    this.recipe = response;
+                this.link = this.recipe.link;
-                    this.link = response.link;
-                });
                 return;
             }
             else if (this.link) {
-                data.parseRecipe(this.link).then((response) => {
+                this.recipe = await data.parseRecipe(this.link);
-                    if (!response)
+                this.parse_failed = !this.recipe;
-                    {
-                        this.parse_failed = true;
-                        return;
-                    }
-    
-                    this.parse_failed = false;
-                    this.recipe = response;
-                });
             }
             else {
                 this.recipe = null;
             }
         },
-        updateProduct(ingredient, product_link) {
+        async updateProduct(ingredient, product_link) {
-            data.parseProduct(ingredient, product_link).then(product => {
+            ingredient.product = await data.parseProduct(ingredient, product_link);
-                ingredient.product = product
-            });
         },
-        updateIngredient(ingredient, line) {
+        async updateIngredient(ingredient, line) {
-            data.parseIngredients([line]).then(function(newIngredients) {
+            const newIngredients = await data.parseIngredients([line]);
-                const newIngredient = newIngredients[0];
+            this.recipe.ingredients = this.recipe.ingredients.map(i => i == ingredient ? newIngredients[0] : i);
-                ingredient.line = line;
-                ingredient.name = newIngredient.name;
-                ingredient.quantity = newIngredient.quantity;
-                ingredient.unit = newIngredient.unit;
-                ingredient.preparation = newIngredient.preparation;
-                if (newIngredient.product) {
-                    ingredient.product = newIngredient.product;
-                }
-            });
         },
         deleteIngredient(ingredient) {
             this.recipe.ingredients = this.recipe.ingredients.filter(i => i != ingredient);
         },
-        saveRecipe() {
+        async saveRecipe() {
-            data.saveRecipe(this.recipe).then((response) => {
+            const recipe = await data.saveRecipe(this.recipe);
-                this.$router.push(`/recipes/${response.id}`)
+            if (recipe?.id) {
-            });
+                this.$router.push(`/recipes/${recipe.id}`);
+                return;
+            }
+
+            alert('Failed to save recipe');
         }
     },
 }

src/components/IngredientAddBox.vue

@@ -26,15 +26,12 @@ export default {
             this.$emit('add-ingredient', this.ingredient);
             this.ingredient = {};
         },
-        updateProduct(ingredient, product_link) {
+        async updateProduct(ingredient, product_link) {
-            data.parseProduct(ingredient, product_link).then(product => {
+            this.ingredient.product = await data.parseProduct(ingredient, product_link);
-                this.ingredient.product = product;
-            });
         },
-        updateIngredient(ingredient, line) {
+        async updateIngredient(ingredient, line) {
-            data.parseIngredients([line]).then(newIngredients => {
+            const newIngredients = await data.parseIngredients([line]);
             this.ingredient = newIngredients[0];
-            });
         },
     }
 }

src/components/MealPlanPage.vue

@@ -74,9 +74,9 @@ export default {
             selectedMeal: null
         }
     },
-    beforeMount() {
+    async beforeMount() {
-        data.getMeals(this.from, this.to)
+        const meals = await data.getMeals(this.from, this.to)
-            .then(meals => this.meals = meals);
+        this.meals = meals;
     },
     methods: {
         editmeal(meal) {

src/components/RecipeSearchBox.vue

@@ -37,10 +37,8 @@ export default {
         }
     },
     methods: {
-        search() {
+        async search() {
-            data.searchRecipes(this.searchTerm).then((recipes) => {
+            this.recipes = await data.searchRecipes(this.searchTerm) ?? this.recipes;
-                this.recipes = recipes
-            });
         },
         selectRecipe(recipe) {
             this.$emit('select-recipe', recipe);

src/data.js

@@ -1,51 +1,66 @@
 const BASE_URL = "http://192.168.68.177:8000"
 
 export default {
-    getMeals(from, to) {
+    async getMeals(from, to) {
-        return fetch(BASE_URL + "/meals?from=" + from.toISOString() + "&to=" + to.toISOString())
+        const response = fetch(BASE_URL + "/meals?from=" + from.toISOString() + "&to=" + to.toISOString());
-            .then(response => response.json())
+        return response.json();
     },
-    getMeal(id) {
+    async getMeal(id) {
-        return fetch(BASE_URL + `/meals/${encodeURIComponent(id)}`)
+        var response = await fetch(BASE_URL + `/meals/${encodeURIComponent(id)}`);
-            .then(response => response.json())
+        return response.json();
     },
-    searchRecipes(query) {
+    async searchRecipes(query) {
-        return fetch(BASE_URL + "/recipes?q=" + encodeURIComponent(query))
+        const response = await fetch(BASE_URL + "/recipes?q=" + encodeURIComponent(query));
-            .then(response => response.json())
+        return response.json();
     },
-    parseRecipe(url) {
+    async parseRecipe(url) {
-        return fetch(BASE_URL + `/recipes/parse?url=${encodeURIComponent(url)}`)
+        const response = await fetch(BASE_URL + `/recipes/parse?url=${encodeURIComponent(url)}`);
-            .then(response => response.json())
+        return response.json();
     },
-    getRecipe(id) {
+    async getRecipe(id) {
-        return fetch(BASE_URL + `/recipes/${encodeURIComponent(id)}`)
+        const response = await fetch(BASE_URL + `/recipes/${encodeURIComponent(id)}`);
-            .then(response => response.json())
+        return response.json();
     },
-    parseProduct(ingredient, url) {
+    async parseProduct(ingredient, url) {
         const body = {
             url, tags: [ingredient.name, ingredient.line],
-        }
+        };
 
-        return fetch(BASE_URL + "/products", {
+        const response = await fetch(BASE_URL + "/products", {
             method: "POST",
             headers: {
                 "Content-Type": "application/json"
             },
             body: JSON.stringify(body),
-        }).then(response => response.json())
+        });
+
+        return response.json();
     },
-    parseIngredients(lines) {
+    async parseIngredients(lines) {
         const params = lines.map(line => "ingredients=" + encodeURIComponent(line)).join("&");
-        return fetch(BASE_URL + "/recipes/ingredients/parse?" + params)
+        const response = await fetch(BASE_URL + "/recipes/ingredients/parse?" + params);
-            .then(response => response.json())
+        return response.json();
     },
-    saveRecipe(recipe) {
+    async saveRecipe(recipe) {
-        return fetch(BASE_URL + "/recipes", {
+        const response = await fetch(BASE_URL + "/recipes", {
             method: "POST",
             headers: {
                 "Content-Type": "application/json"
             },
             body: JSON.stringify(recipe),
-        }).then(response => response.json())
+        });
-    }
+
+        return response.json();
+    },
+    async saveMeal(meal) {
+        const response = await fetch(BASE_URL + "/meals", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify(meal),
+        });
+        
+        return response.json();
+    },
 }