Fixed parsing

src/api/sdk.ts

@@ -200,8 +200,8 @@ export async function deleteRecipe(id: number | string): Promise<void> {
   if (!response.ok) throw httpError(response, error)
 }
 
-export async function parseRecipe(url: string): Promise<Recipe | null> {
+export async function parseRecipe(url: string, householdSlugOverride?: string): Promise<Recipe | null> {
-  const householdSlug = requireSlug()
+  const householdSlug = requireSlug(householdSlugOverride)
   const { data, error, response } = await api.POST('/api/v1/households/{householdSlug}/recipes/parse-from-url', {
     params: { path: { householdSlug } },
     body: { url },

src/components/recipes/EditRecipePage.vue

@@ -84,6 +84,7 @@ const props = defineProps({
 
 const router = useRouter()
 const route = useRoute()
+const slug = typeof route.params.householdSlug === 'string' ? route.params.householdSlug : ''
 const { show: showAlert } = useAlert()
 
 const link = ref<string>(parseQueryString(route.query.url))
@@ -102,20 +103,19 @@ const image_styling = computed(() => {
 })
 
 function parseLink() {
-  router.push({ path: '/recipes/add', query: { url: link.value } })
+  router.push({ name: 'recipe-add', params: { householdSlug: slug }, query: { url: link.value } })
   refreshRecipe()
 }
 
 async function refreshRecipe() {
   const id = props.id ? parseInt(props.id) : null
   if (id !== null && id >= 0) {
-    const slug = typeof route.params.householdSlug === 'string' ? route.params.householdSlug : ''
+  const r = await getRecipe(slug, id)
-    const r = await getRecipe(slug, id)
     recipe.value = r
     link.value = r.link ?? ''
     return
   } else if (link.value) {
-    const r = await parseRecipe(link.value)
+    const r = await parseRecipe(link.value, slug)
     recipe.value = r
     parse_failed.value = !r
   } else {
@@ -139,7 +139,7 @@ async function saveRecipe() {
   const saved = recipe.value ? await saveRecipeApi(toRecipeCreate(recipe.value)) : null
   if (saved && saved.id >= 0) {
     showAlert({ heading: 'Recipe saved', message: 'Your recipe has been saved', type: 'success' })
-    router.push(`/recipes/${saved.id}`)
+    router.push({ name: 'recipe-edit', params: { householdSlug: slug, id: saved.id } })
     return
   }
   showAlert({ heading: 'Error saving recipe', message: 'There was an error saving your recipe', type: 'error' })
@@ -171,7 +171,7 @@ async function deleteRecipe() {
   if (confirm('Are you sure you want to delete this recipe?')) {
     if (!recipe.value) return
     await deleteRecipeApi(recipe.value.id)
-    router.push('/recipes')
+    router.push({ name: 'recipes', params: { householdSlug: slug } })
   }
 }
 

src/components/recipes/RecipesPage.vue

@@ -12,7 +12,7 @@
   </div>
 </template>
 <script setup lang="ts">
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 import ActionItem from '@/components/ActionItem.vue'
 import RecipeSearchBox from './RecipeSearchBox.vue'
 import type { Recipe } from '@/domain/types'
@@ -20,12 +20,14 @@ import type { Recipe } from '@/domain/types'
 const addRecipe = new URL('@/assets/add-recipe.svg', import.meta.url).toString()
 
 const router = useRouter()
+const route = useRoute()
+const slug = typeof route.params.householdSlug === 'string' ? route.params.householdSlug : ''
 
 function onSelectRecipe(r: Pick<Recipe, 'id'>) {
-  router.push(`/recipes/${r.id}`)
+  router.push({ name: 'recipe-edit', params: { householdSlug: slug, id: r.id } })
 }
 
 function onAddRecipe() {
-  router.push('/recipes/add')
+  router.push({ name: 'recipe-add', params: { householdSlug: slug } })
 }
 </script>