fix: refactor and fixes

pages/categories/[name].vue

@@ -2,36 +2,28 @@
 const route = useRoute();
 const categoryName = route.params.name as string;
 
-const { data: categories } = useCategories();
-const { data: recipes, status } = useCategoryRecipes(categoryName);
+const { data: recipes, status } = await useCategoryRecipes(categoryName);
 
-const category = computed(() => 
-  categories.value?.find((c) => c.name === categoryName)
-);
-
-if (!category.value) {
+if (!recipes.value) {
   throw createError({
     statusCode: 404,
-    message: 'Category not found',
+    statusMessage: "Category not found",
   });
 }
 </script>
 
 <template>
   <div>
-    <div 
-      class="hero h-[40vh] bg-cover bg-center relative"
-      :style="`background-image: url(${category.value.picture})`"
-    >
+    <div class="hero h-[40vh] bg-cover bg-center relative">
       <div class="hero-overlay bg-opacity-60"></div>
       <div class="hero-content text-center text-neutral-content">
-        <h1 class="text-5xl font-bold">{{ category.value.name }}</h1>
+        <h1 class="text-5xl font-bold">{{ categoryName }}</h1>
       </div>
     </div>
 
     <div class="container mx-auto px-4 py-8">
       <div class="prose max-w-none mb-12">
-        <p>{{ category.value.description }}</p>
+        <!-- <p>{{ category!.description }}</p> -->
       </div>
 
       <div v-if="status === 'pending'" class="flex justify-center my-8">

pages/categories/index.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 const { data: categories, status, error } = useCategories();
 
-console.log(categories.value);
-
 if (error.value) {
   throw createError({
     statusCode: 500,
@@ -36,7 +34,7 @@ if (error.value) {
           </p>
           <div class="card-actions justify-end">
             <nuxt-link
-              :to="`/category/${category.name}`"
+              :to="`/categories/${category.name}`"
               class="btn btn-primary"
             >
               View Recipes

server/trpc/routers/recipes.ts

@@ -2,16 +2,10 @@ import { z } from "zod";
 import { publicProcedure, router } from "../trpc";
 import type { Meal } from "~/types/recipe";
 import { parseRecipeData } from "~/utils/recipes";
+import { categoryRecipesResponseSchema } from "~/types/category";
 
 const { apiUrl } = useRuntimeConfig();
 
-type Category = {
-  idCategory: string;
-  strCategory: string;
-  strCategoryThumb: string;
-  strCategoryDescription: string;
-};
-
 export const recipeRouter = router({
   recipesByCategory: publicProcedure
     .input(z.string())
@@ -19,13 +13,17 @@ export const recipeRouter = router({
       const data = await $fetch<{ meals: Meal[] }>(
         new URL(`filter.php?c=${input}`, apiUrl).href,
       );
-      
-      if (!data?.meals) {
-        return [];
+
+      const result = categoryRecipesResponseSchema.safeParse(data);
+
+      if (!result.success) {
+        throw createError({
+          statusCode: 404,
+          statusMessage: "Recipes for category not found",
+        });
       }
-      
-      const recipes = parseRecipeData(data);
-      return recipes;
+
+      return result.data.recipes;
     }),
   recipeGet: publicProcedure
     .input(

types/category.ts

@@ -20,3 +20,23 @@ export const categoriesResponseSchema = z.object({
 
 export type Category = z.infer<typeof categorySchema>;
 export type CategoriesResponse = z.infer<typeof categoriesResponseSchema>;
+
+export const categoryRecipeSchema = z
+  .object({
+    strMeal: z.string(),
+    strMealThumb: z.string().url(),
+    idMeal: z.string(),
+  })
+  .transform((meal) => ({
+    title: meal.strMeal,
+    pictureUrl: meal.strMealThumb,
+    id: meal.idMeal,
+  }));
+
+export const categoryRecipesResponseSchema = z
+  .object({
+    meals: z.array(categoryRecipeSchema),
+  })
+  .transform((data) => ({
+    recipes: data.meals,
+  }));