From 7c3bfb0ea87aa21dc57a45b337e118b674f6e1ae Mon Sep 17 00:00:00 2001
From: Ruidy <ruidy.nemausat@gmail.com>
Date: Fri, 28 Jun 2024 22:45:26 +0200
Subject: [PATCH] find meals per id

---
 pages/[id].vue                 | 12 ++++++++++--
 server/api/recipes.get.ts      |  3 ++-
 server/api/recipes/[id].get.ts | 20 ++++++++++++++++++++
 types/recipe.ts                |  1 +
 utils/recipes.ts               |  1 +
 5 files changed, 34 insertions(+), 3 deletions(-)
 create mode 100644 server/api/recipes/[id].get.ts

diff --git a/pages/[id].vue b/pages/[id].vue
index 1f4b66c..17688d7 100644
--- a/pages/[id].vue
+++ b/pages/[id].vue
@@ -1,11 +1,19 @@
 <script setup lang="ts">
 const { params } = useRoute();
-const { recipe, pending, error } = await useRecipe("lookup", params.id);
+const id = params.id;
+
+const {
+  data: recipe,
+  pending,
+  error,
+} = await useFetch(`/api/recipes/${id}`, {
+  lazy: true,
+});
 </script>
 
 <template>
   <div v-if="pending">Loading</div>
-  <div v-else-if="error">Failed: {{ error }}</div>
+  <div v-else-if="error">Failed: {{ error.statusMessage }}</div>
   <section v-else>
     <Recipe :recipe="recipe" />
   </section>
diff --git a/server/api/recipes.get.ts b/server/api/recipes.get.ts
index 9059765..fb80e2d 100644
--- a/server/api/recipes.get.ts
+++ b/server/api/recipes.get.ts
@@ -1,9 +1,10 @@
 import { parseRecipeData } from "~/utils/recipes";
+import type { Meal } from "~/types/recipe";
 
 export default defineEventHandler(async (_event) => {
   const { apiUrl } = useRuntimeConfig();
 
-  const data = await $fetch<{ meals: unknown }>(
+  const data = await $fetch<{ meals: Meal[] }>(
     new URL("random.php", apiUrl).toString(),
   );
 
diff --git a/server/api/recipes/[id].get.ts b/server/api/recipes/[id].get.ts
new file mode 100644
index 0000000..4f8f61c
--- /dev/null
+++ b/server/api/recipes/[id].get.ts
@@ -0,0 +1,20 @@
+import { parseRecipeData } from "~/utils/recipes";
+import type { Meal } from "~/types/recipe";
+
+export default defineEventHandler(async (event) => {
+  const { apiUrl } = useRuntimeConfig();
+  const id = getRouterParam(event, "id");
+
+  const data = await $fetch<{ meals: Meal[] }>(
+    new URL(`lookup.php?i=${id}`, apiUrl).toString(),
+  );
+  if (!data?.meals) {
+    throw createError({
+      statusCode: 404,
+      statusMessage: "Recipe not found",
+    });
+  }
+
+  const recipes = parseRecipeData(data);
+  return recipes[0];
+});
diff --git a/types/recipe.ts b/types/recipe.ts
index 5683d31..1f0911f 100644
--- a/types/recipe.ts
+++ b/types/recipe.ts
@@ -1,6 +1,7 @@
 import { z } from "zod";
 
 export type Recipe = {
+  id: string;
   title: string;
   pictureUrl: string;
   videoUrl: string;
diff --git a/utils/recipes.ts b/utils/recipes.ts
index 76ff094..db9f2ed 100644
--- a/utils/recipes.ts
+++ b/utils/recipes.ts
@@ -17,6 +17,7 @@ export function parseRecipeData(data: ApiResponse): Recipe[] {
     }
 
     return {
+      id: meal.idMeal,
       title: meal.strMeal,
       pictureUrl: meal.strMealThumb,
       videoUrl: meal.strYoutube,