From 6dffeb5766a0290552882ddeccb07f5cc153c91f Mon Sep 17 00:00:00 2001
From: Ruidy <ruidy.nemausat@gmail.com>
Date: Sat, 14 Dec 2024 13:19:28 +0100
Subject: [PATCH] improve search results displays

---
 components/app/footer.vue      |  4 +-
 components/app/navbar.vue      |  2 +-
 components/recipe/search.vue   |  4 +-
 pages/search.vue               | 86 +++++++++++++++++-----------------
 server/trpc/routers/recipes.ts |  5 +-
 5 files changed, 48 insertions(+), 53 deletions(-)

diff --git a/components/app/footer.vue b/components/app/footer.vue
index f0a873d..3107bce 100644
--- a/components/app/footer.vue
+++ b/components/app/footer.vue
@@ -18,7 +18,7 @@
         >
           <path
             d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
-          ></path>
+          />
         </svg>
       </nuxt-link>
       <nuxt-link
@@ -35,7 +35,7 @@
         >
           <path
             d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm1 16.057v-3.057h2.994c-.059 1.143-.212 2.24-.456 3.279-.823-.12-1.674-.188-2.538-.222zm1.957 2.162c-.499 1.33-1.159 2.497-1.957 3.456v-3.62c.666.028 1.319.081 1.957.164zm-1.957-7.219v-3.015c.868-.034 1.721-.103 2.548-.224.238 1.027.389 2.111.446 3.239h-2.994zm0-5.014v-3.661c.806.969 1.471 2.15 1.971 3.496-.642.084-1.3.137-1.971.165zm2.703-3.267c1.237.496 2.354 1.228 3.29 2.146-.642.234-1.311.442-2.019.607-.344-.992-.775-1.91-1.271-2.753zm-7.241 13.56c-.244-1.039-.398-2.136-.456-3.279h2.994v3.057c-.865.034-1.714.102-2.538.222zm2.538 1.776v3.62c-.798-.959-1.458-2.126-1.957-3.456.638-.083 1.291-.136 1.957-.164zm-2.994-7.055c.057-1.128.207-2.212.446-3.239.827.121 1.68.19 2.548.224v3.015h-2.994zm1.024-5.179c.5-1.346 1.165-2.527 1.97-3.496v3.661c-.671-.028-1.329-.081-1.97-.165zm-2.005-.35c-.708-.165-1.377-.373-2.018-.607.937-.918 2.053-1.65 3.29-2.146-.496.844-.927 1.762-1.272 2.753zm-.549 1.918c-.264 1.151-.434 2.36-.492 3.611h-3.933c.165-1.658.739-3.197 1.617-4.518.88.361 1.816.67 2.808.907zm.009 9.262c-.988.236-1.92.542-2.797.9-.89-1.328-1.471-2.879-1.637-4.551h3.934c.058 1.265.231 2.488.5 3.651zm.553 1.917c.342.976.768 1.881 1.257 2.712-1.223-.49-2.326-1.211-3.256-2.115.636-.229 1.299-.435 1.999-.597zm9.924 0c.7.163 1.362.367 1.999.597-.931.903-2.034 1.625-3.257 2.116.489-.832.915-1.737 1.258-2.713zm.553-1.917c.27-1.163.442-2.386.501-3.651h3.934c-.167 1.672-.748 3.223-1.638 4.551-.877-.358-1.81-.664-2.797-.9zm.501-5.651c-.058-1.251-.229-2.46-.492-3.611.992-.237 1.929-.546 2.809-.907.877 1.321 1.451 2.86 1.616 4.518h-3.933z"
-          ></path>
+          />
         </svg>
       </nuxt-link>
     </nav>
diff --git a/components/app/navbar.vue b/components/app/navbar.vue
index d80ab8d..245cfcf 100644
--- a/components/app/navbar.vue
+++ b/components/app/navbar.vue
@@ -76,7 +76,7 @@ if (route.path === "/search") {
       </ul>
     </div>
     <div class="navbar-end gap-2">
-      <recipe-search @search="handleSubmit" v-model="searchQuery" />
+      <recipe-search v-model="searchQuery" @search="handleSubmit" />
       <button class="btn btn-primary" @click="handleRandomClick">Random</button>
     </div>
   </nav>
diff --git a/components/recipe/search.vue b/components/recipe/search.vue
index 0aaff94..32b99a3 100644
--- a/components/recipe/search.vue
+++ b/components/recipe/search.vue
@@ -3,14 +3,14 @@
     class="input input-bordered input-primary flex items-center gap-2 container mx-auto px-4 lg:px-8 my-4"
   >
     <input
+      v-model="model"
       type="text"
       class="grow"
       placeholder="Search recipes..."
-      v-model="model"
       @focus="isFocused = true"
       @blur="isFocused = false"
       @keydown.enter="$emit('search')"
-    />
+    >
     <kbd class="kbd kbd-sm" :class="{ 'opacity-50': !isFocused }">⌘</kbd>
     <kbd class="kbd kbd-sm" :class="{ 'opacity-50': !isFocused }">K</kbd>
   </label>
diff --git a/pages/search.vue b/pages/search.vue
index 056514b..67002bc 100644
--- a/pages/search.vue
+++ b/pages/search.vue
@@ -4,45 +4,38 @@ import type { Recipe } from "~/types/recipe";
 const route = useRoute();
 const searchQuery = computed(() => route.query.q as string);
 const searchResults = ref<Recipe[]>([]);
-const { data, status, error, execute } = await useRecipeSearch(
-  searchQuery.value || "",
-);
+
+const { data, status, error } = await useRecipeSearch(searchQuery.value || "");
+if (error.value) {
+  throw createError({
+    statusCode: 500,
+    message: error.value.message,
+  });
+}
 
 searchResults.value = data.value;
 
 watch(searchQuery, async (newQuery) => {
-  const { data, status, error, execute } = await useRecipeSearch(
-    newQuery.trim(),
-  );
+  const { data, error } = await useRecipeSearch(newQuery.trim());
+  if (error.value) {
+    throw createError({
+      statusCode: 500,
+      message: error.value.message,
+    });
+  }
+
   searchResults.value = data.value;
 });
 </script>
 
 <template>
   <div class="container mx-auto px-4">
-    <div v-if="false" class="flex justify-center my-8">
-      <span class="loading loading-spinner loading-lg text-primary"></span>
-    </div>
-
-    <div v-else-if="error" class="alert alert-error my-8">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="stroke-current shrink-0 h-6 w-6"
-        fill="none"
-        viewBox="0 0 24 24"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
-        />
-      </svg>
-      <span>Error: {{ error.message }}</span>
+    <div v-if="status === 'pending'" class="flex justify-center my-8">
+      <span class="loading loading-spinner loading-lg text-primary" />
     </div>
 
     <div
-      v-else-if="data"
+      v-else-if="searchResults.length > 0"
       class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 my-8"
     >
       <div
@@ -55,29 +48,34 @@ watch(searchQuery, async (newQuery) => {
           <h2 class="card-title">{{ recipe.title }}</h2>
           <p>{{ recipe.category }} • {{ recipe.origin }}</p>
           <div class="card-actions justify-end">
-            <nuxt-link :to="`/${recipe.id}`" class="btn btn-primary"
-              >View Recipe</nuxt-link
-            >
+            <nuxt-link :to="`/${recipe.id}`" class="btn btn-primary">
+              View Recipe
+            </nuxt-link>
           </div>
         </div>
       </div>
     </div>
 
-    <div v-else-if="searchQuery" class="alert alert-info my-8">
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        fill="none"
-        viewBox="0 0 24 24"
-        class="stroke-current shrink-0 w-6 h-6"
-      >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-        ></path>
-      </svg>
-      <span>No recipes found for "{{ searchQuery }}"</span>
+    <div
+      v-else-if="searchQuery"
+      class="alert alert-info my-8 flex-col items-center"
+    >
+      <div class="flex items-center">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          class="stroke-current shrink-0 w-6 h-6"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+        <span>No recipes found for "{{ searchQuery }}"</span>
+      </div>
     </div>
   </div>
 </template>
diff --git a/server/trpc/routers/recipes.ts b/server/trpc/routers/recipes.ts
index 254c2a9..9103a2c 100644
--- a/server/trpc/routers/recipes.ts
+++ b/server/trpc/routers/recipes.ts
@@ -53,10 +53,7 @@ export const recipeRouter = router({
         new URL(`search.php?s=${input}`, apiUrl).href,
       );
       if (!data?.meals) {
-        throw createError({
-          statusCode: 404,
-          statusMessage: "Recipe not found",
-        });
+        return [];
       }
       const recipes = parseRecipeData(data);
       return recipes;