API Changes

src/components/EditRecipePage.vue

@@ -4,21 +4,22 @@
         <input class="recipe-link" type="text" v-model="link" placeholder="Link to Recipe" />
         <button @click="parseLink">Parse</button>
     </div>
-    <div v-if="parsed && !recipe">
+    <div v-if="parse_failed">
         <p>Recipe not found</p>
     </div>
 
-    <div v-if="parsed && recipe">
+    <div v-if="!parse_failed && recipe">
         <h1><input class="recipe-name" type="text" :value="recipe.name"></h1>
         <h3>Ingredients</h3>
         <ul>
             <li v-for="ingredient in recipe.ingredients" :key="ingredient.line">
                 <ingredient-line 
-                    :ingredient="ingredient"
-                    @update-ingredient="updateIngredient"
-                    @update-product-link="updateProduct" />
+                :ingredient="ingredient"
+                @update-ingredient="updateIngredient"
+                @update-product-link="updateProduct" />
             </li>
         </ul>
+        <button class="submit-btn" @click="saveRecipe">Save</button>
     </div>
 </div>
 </template>
@@ -63,33 +64,35 @@ export default {
     },
     data() {
         return {
-            link: "",
-            parsed: null,
+            link: this.$route.query.url ?? "",
+            parse_failed: false,
             recipe: null,
             chefs: []
         }
     },
     mounted() {
-        if (this.$route.query.url) {
-            this.link = this.$route.query.url
-            data.parseRecipe(this.link).then((response) => {
-                if (!response)
-                {
-                    this.parsed = true;
-                    return;
-                }
-
-                this.recipe = response.recipe;
-                this.parsed = response.raw;
-            });
-        }
+        this.refreshRecipe();
     },
     methods: {
         parseLink() {
             this.$router.push({ path: '/recipes/add', query: { url: this.link }})
+            this.refreshRecipe();
+        },
+        refreshRecipe() {
+            if (!this.link) {
+                this.recipe = null;
+                return 
+            }
+
             data.parseRecipe(this.link).then((response) => {
-                this.recipe = response.recipe;
-                this.parsed = response.raw;
+                if (!response)
+                {
+                    this.parse_failed = true;
+                    return;
+                }
+
+                this.parse_failed = false;
+                this.recipe = response;
             });
         },
         updateProduct(ingredient, product_link) {
@@ -102,13 +105,19 @@ export default {
                 const newIngredient = newIngredients[0];
                 ingredient.line = line;
                 ingredient.name = newIngredient.name;
-                ingredient.measure = newIngredient.measure;
+                ingredient.quantity = newIngredient.quantity;
+                ingredient.unit = newIngredient.unit;
                 ingredient.preparation = newIngredient.preparation;
                 if (newIngredient.product) {
                     ingredient.product = newIngredient.product;
                 }
             });
         },
+        saveRecipe() {
+            data.saveRecipe(this.recipe).then((response) => {
+                this.$router.push(`/recipes/${response.id}`)
+            });
+        }
     },
 }
 </script>

src/components/IngredientLine.vue

@@ -17,8 +17,8 @@
         <div class="ingredient-details" v-if="ingredient">
             <div class="parse-result">
                 <p><small>Ingredient: </small><strong>{{ ingredient.name }}</strong></p>
-                <p><small>Quantity: </small> <strong>{{ ingredient.measure.qty }}</strong></p>
-                <p><small>Unit: </small> <strong>{{ ingredient.measure.unit }}</strong></p>
+                <p><small>Quantity: </small> <strong>{{ ingredient.quantity }}</strong></p>
+                <p><small>Unit: </small> <strong>{{ ingredient.unit }}</strong></p>
                 <p><small>Preparation: </small> <strong>{{ ingredient.preparation }}</strong></p>
             </div>
             <div  v-if="ingredient.product" class="product-result">

src/data.js

@@ -32,5 +32,14 @@ export default {
         const params = lines.map(line => "ingredients=" + encodeURIComponent(line)).join("&");
         return fetch(BASE_URL + "/recipes/ingredients/parse?" + params)
             .then(response => response.json())
+    },
+    saveRecipe(recipe) {
+        return fetch(BASE_URL + "/recipes", {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json"
+            },
+            body: JSON.stringify(recipe),
+        }).then(response => response.json())
     }
 }