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,11 +80,14 @@ 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)
                     {
@@ -95,6 +98,10 @@ export default {
                     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