From a9f4df0071efc4f46b0d55460d21a2a36195d8b5 Mon Sep 17 00:00:00 2001
From: Ruidy <ruidy.nemausat@gmail.com>
Date: Fri, 13 Dec 2024 13:01:48 +0100
Subject: [PATCH] use trpc for recipe router

---
 composables/useGreeting.ts     |  4 ----
 composables/useRecipeById.ts   |  4 ++++
 error.vue                      |  2 +-
 pages/[id].vue                 | 31 ++++++++++++++++---------------
 pages/index.vue                |  5 -----
 server/api/recipes/[id].get.ts | 30 ------------------------------
 server/trpc/context.ts         |  1 -
 server/trpc/routers/index.ts   |  6 ++++--
 server/trpc/routers/recipes.ts | 32 ++++++++++++++++++++++++++++++++
 server/trpc/trpc.ts            |  2 ++
 types/id.ts                    | 10 ++++------
 11 files changed, 63 insertions(+), 64 deletions(-)
 delete mode 100644 composables/useGreeting.ts
 create mode 100644 composables/useRecipeById.ts
 delete mode 100644 server/api/recipes/[id].get.ts
 create mode 100644 server/trpc/routers/recipes.ts

diff --git a/composables/useGreeting.ts b/composables/useGreeting.ts
deleted file mode 100644
index f15c9c2..0000000
--- a/composables/useGreeting.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export default function useGreeting(text: string) {
-  const { $client } = useNuxtApp();
-  return $client.hello.useQuery({ text });
-}
diff --git a/composables/useRecipeById.ts b/composables/useRecipeById.ts
new file mode 100644
index 0000000..a2692de
--- /dev/null
+++ b/composables/useRecipeById.ts
@@ -0,0 +1,4 @@
+export default function useRecipeById(id: number) {
+  const { $client } = useNuxtApp();
+  return $client.recipeGet.useQuery(id);
+}
diff --git a/error.vue b/error.vue
index 4918d99..fea2d4c 100644
--- a/error.vue
+++ b/error.vue
@@ -26,7 +26,7 @@
             {{ error?.statusCode || "Error" }}
           </h1>
           <p class="text-xl mb-6">
-            {{ error?.message || "Something went wrong" }}
+            {{ error?.statusMessage || "Something went wrong" }}
           </p>
 
           <!-- Action Buttons -->
diff --git a/pages/[id].vue b/pages/[id].vue
index 5234871..92570be 100644
--- a/pages/[id].vue
+++ b/pages/[id].vue
@@ -1,31 +1,32 @@
 <script setup lang="ts">
-import { idSchema } from "~/types/id";
-
 const { params } = useRoute();
 const routeParam = params.id;
 
-const parsed = idSchema.safeParse(routeParam);
+const id =
+  typeof routeParam === "string" ? Number(routeParam) : Number(routeParam[0]);
+
+const { data: recipe, pending, error } = await useRecipeById(id);
+
+if (error.value) {
+  let statusCode = 400;
+  if (error.value.message === "Recipe not found") {
+    throw createError({
+      statusCode: 404,
+      statusMessage: "Recipe not found",
+    });
+  }
 
-if (!parsed.success) {
   throw createError({
-    statusCode: 400,
+    statusCode,
     statusMessage: "Invalid recipe id",
+    message: error.value.message,
   });
 }
-
-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.statusMessage }}</div>
   <section v-else>
-    <Recipe :recipe="recipe" />
+    <Recipe :recipe="recipe!" />
   </section>
 </template>
diff --git a/pages/index.vue b/pages/index.vue
index 4691f6e..1c55169 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,7 +1,3 @@
-<script setup lang="ts">
-const { data } = useGreeting("chef");
-</script>
-
 <template>
   <div class="hero min-h-full bg-base-200">
     <div class="hero-content flex-col lg:flex-row-reverse">
@@ -9,7 +5,6 @@ const { data } = useGreeting("chef");
       <div>
         <h1 class="text-5xl font-bold prose">Eat Something New</h1>
 
-        <p class="py-6 prose">{{ data?.greeting }}</p>
         <p class="py-6 prose">Generate a random recipe.</p>
         <NuxtLink to="/random" class="btn btn-primary">
           Random Recipe Now
diff --git a/server/api/recipes/[id].get.ts b/server/api/recipes/[id].get.ts
deleted file mode 100644
index d035d26..0000000
--- a/server/api/recipes/[id].get.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { parseRecipeData } from "~/utils/recipes";
-import type { Meal } from "~/types/recipe";
-import { idSchema } from "~/types/id";
-
-export default defineEventHandler(async (event) => {
-  const { apiUrl } = useRuntimeConfig();
-  const routeParam = getRouterParam(event, "id");
-
-  const parsed = idSchema.safeParse(routeParam);
-  if (!parsed.success) {
-    throw createError({
-      statusCode: 400,
-      statusMessage: "Invalid recipe id",
-      message: parsed.error.message,
-    });
-  }
-
-  const data = await $fetch<{ meals: Meal[] }>(
-    new URL(`lookup.php?i=${parsed.data}`, apiUrl).toString(),
-  );
-  if (!data?.meals) {
-    throw createError({
-      statusCode: 404,
-      statusMessage: "Recipe not found",
-    });
-  }
-
-  const recipes = parseRecipeData(data);
-  return recipes[0];
-});
diff --git a/server/trpc/context.ts b/server/trpc/context.ts
index 44dfea8..762b3d2 100644
--- a/server/trpc/context.ts
+++ b/server/trpc/context.ts
@@ -8,7 +8,6 @@ export async function createContext(event: H3Event) {
   const authorization = getRequestHeader(event, "authorization");
   async function getUserFromHeader() {
     if (authorization) {
-      console.log("authorization:", authorization);
       return { isAdmin: true };
     }
     return null;
diff --git a/server/trpc/routers/index.ts b/server/trpc/routers/index.ts
index 32a4473..3c187e7 100644
--- a/server/trpc/routers/index.ts
+++ b/server/trpc/routers/index.ts
@@ -1,8 +1,9 @@
 import type { inferRouterOutputs } from "@trpc/server";
 import { z } from "zod";
-import { publicProcedure, privateProcedure, router } from "../trpc";
+import { privateProcedure, router, mergeRouters } from "../trpc";
+import { recipeRouter } from "./recipes";
 
-export const appRouter = router({
+export const helloRouter = router({
   // hello: publicProcedure
   hello: privateProcedure
     .input(
@@ -17,6 +18,7 @@ export const appRouter = router({
     }),
 });
 
+export const appRouter = mergeRouters(helloRouter, recipeRouter);
 // export type definition of API
 export type AppRouter = typeof appRouter;
 export type RouterOutput = inferRouterOutputs<AppRouter>;
diff --git a/server/trpc/routers/recipes.ts b/server/trpc/routers/recipes.ts
new file mode 100644
index 0000000..0418fab
--- /dev/null
+++ b/server/trpc/routers/recipes.ts
@@ -0,0 +1,32 @@
+import { z } from "zod";
+import { publicProcedure, router } from "../trpc";
+import type { Meal } from "~/types/recipe";
+import { parseRecipeData } from "~/utils/recipes";
+
+const { apiUrl } = useRuntimeConfig();
+
+export const recipeRouter = router({
+  recipeGet: publicProcedure
+    .input(
+      z.coerce
+        .number({
+          required_error: "recipe id is required",
+          invalid_type_error: "recipe id must be a number",
+        })
+        .positive("recipe id must be positive"),
+    )
+    .query(async ({ input }) => {
+      const data = await $fetch<{ meals: Meal[] }>(
+        new URL(`lookup.php?i=${input}`, apiUrl).href,
+      );
+      if (!data?.meals) {
+        throw createError({
+          statusCode: 404,
+          statusMessage: "Recipe not found",
+        });
+      }
+
+      const recipes = parseRecipeData(data);
+      return recipes[0];
+    }),
+});
diff --git a/server/trpc/trpc.ts b/server/trpc/trpc.ts
index c7cf93a..b2ff203 100644
--- a/server/trpc/trpc.ts
+++ b/server/trpc/trpc.ts
@@ -11,6 +11,7 @@ const t = initTRPC.context<Context>().create();
 export const publicProcedure = t.procedure;
 export const router = t.router;
 export const middleware = t.middleware;
+export const mergeRouters = t.mergeRouters;
 
 export const authMiddleware = middleware(({ next, ctx }) => {
   if (!ctx.user?.isAdmin) {
@@ -22,4 +23,5 @@ export const authMiddleware = middleware(({ next, ctx }) => {
     },
   });
 });
+
 export const privateProcedure = t.procedure.use(authMiddleware);
diff --git a/types/id.ts b/types/id.ts
index 4cd795f..1185e3e 100644
--- a/types/id.ts
+++ b/types/id.ts
@@ -1,8 +1,6 @@
 import { z } from "zod";
 
-export const idSchema = z
-  .number({
-    required_error: "recipe id is required",
-    invalid_type_error: "recipe id must be a number",
-  })
-  .positive("recipe id must be positive");
+export const idSchema = z.string({
+  required_error: "recipe id is required",
+  invalid_type_error: "recipe id must be a number",
+});