From ba78374f81221ed83a38ab7afa0712fb8f1048b8 Mon Sep 17 00:00:00 2001
From: Ruidy <ruidy.nemausat@gmail.com>
Date: Sun, 15 Dec 2024 00:06:13 +0100
Subject: [PATCH] fix: refactor and fixes

---
 pages/{category => categories}/[name].vue | 20 ++++++-------------
 pages/categories/index.vue                |  4 +---
 server/trpc/routers/recipes.ts            | 24 +++++++++++------------
 types/category.ts                         | 20 +++++++++++++++++++
 4 files changed, 38 insertions(+), 30 deletions(-)
 rename pages/{category => categories}/[name].vue (73%)

diff --git a/pages/category/[name].vue b/pages/categories/[name].vue
similarity index 73%
rename from pages/category/[name].vue
rename to pages/categories/[name].vue
index 0701ba2..cec2fbb 100644
--- a/pages/category/[name].vue
+++ b/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">
diff --git a/pages/categories/index.vue b/pages/categories/index.vue
index 894880b..1db8827 100644
--- a/pages/categories/index.vue
+++ b/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
diff --git a/server/trpc/routers/recipes.ts b/server/trpc/routers/recipes.ts
index 9e46e2e..65dcfff 100644
--- a/server/trpc/routers/recipes.ts
+++ b/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(
diff --git a/types/category.ts b/types/category.ts
index 921ec92..94f8ed2 100644
--- a/types/category.ts
+++ b/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,
+  }));