View Saved Recipes

src/components/EditRecipePage.vue

@@ -1,6 +1,6 @@
 <template>
 <div>
-    <div>
+    <div v-if="!id">
         <input class="recipe-link" type="text" v-model="link" placeholder="Link to Recipe" />
         <button @click="parseLink">Parse</button>
     </div>
@@ -80,21 +80,28 @@ export default {
             this.refreshRecipe();
         },
         refreshRecipe() {
-            if (!this.link) {
-                this.recipe = null;
-                return 
+            if (this.id) {
+                data.getRecipe(this.id).then((response) => {
+                    this.recipe = response;
+                    this.link = response.link;
+                });
+                return;
             }
+            else if (this.link) {
+                data.parseRecipe(this.link).then((response) => {
+                    if (!response)
+                    {
+                        this.parse_failed = true;
+                        return;
+                    }
     
-            data.parseRecipe(this.link).then((response) => {
-                if (!response)
-                {
-                    this.parse_failed = true;
-                    return;
-                }
-
-                this.parse_failed = false;
-                this.recipe = response;
-            });
+                    this.parse_failed = false;
+                    this.recipe = response;
+                });
+            }
+            else {
+                this.recipe = null;
+            }
         },
         updateProduct(ingredient, product_link) {
             data.parseProduct(ingredient, product_link).then(product => {

src/data.js

@@ -15,6 +15,10 @@ export default {
         return fetch(BASE_URL + `/recipes/parse?url=${encodeURIComponent(url)}`)
             .then(response => response.json())
     },
+    getRecipe(id) {
+        return fetch(BASE_URL + `/recipes/${encodeURIComponent(id)}`)
+            .then(response => response.json())
+    },
     parseProduct(ingredient, url) {
         const body = {
             url, tags: [ingredient.name, ingredient.line],

src/main.js

@@ -20,6 +20,7 @@ const routes = [
     { path: '/meal/:id/edit', component: EditMealPage },
     { path: '/meal/:id/swap', component: SwapMealPage },
     { path: '/recipes/add', component: EditRecipePage },
+    { path: '/recipes/:id', component: EditRecipePage, props: true },
 ]
   
 // 3. Create the router instance and pass the `routes` option