From 7a5e7ca938bb281c13f3e085ba989ee2ec7dc7f0 Mon Sep 17 00:00:00 2001
From: jableader <jacobdunk@gmail.com>
Date: Sat, 13 Jan 2024 18:00:55 +1100
Subject: [PATCH] View Saved Recipes

---
 src/components/EditRecipePage.vue | 37 ++++++++++++++++++-------------
 src/data.js                       |  4 ++++
 src/main.js                       |  1 +
 3 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/src/components/EditRecipePage.vue b/src/components/EditRecipePage.vue
index 953677e..1978c85 100644
--- a/src/components/EditRecipePage.vue
+++ b/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;
+                    }
+    
+                    this.parse_failed = false;
+                    this.recipe = response;
+                });
+            }
+            else {
+                this.recipe = null;
             }
-
-            data.parseRecipe(this.link).then((response) => {
-                if (!response)
-                {
-                    this.parse_failed = true;
-                    return;
-                }
-
-                this.parse_failed = false;
-                this.recipe = response;
-            });
         },
         updateProduct(ingredient, product_link) {
             data.parseProduct(ingredient, product_link).then(product => {
diff --git a/src/data.js b/src/data.js
index fb9b29b..c605d8d 100644
--- a/src/data.js
+++ b/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],
diff --git a/src/main.js b/src/main.js
index 0c67384..466de4d 100644
--- a/src/main.js
+++ b/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