From 4c031e3798de75e57e1061c47f3cc5246e934237 Mon Sep 17 00:00:00 2001
From: bivashy <botyrbojey@gmail.com>
Date: Sat, 12 Jul 2025 22:45:46 +0500
Subject: [PATCH] Improve search page, prevent double request to the backend

---
 pages/search.vue | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/pages/search.vue b/pages/search.vue
index edba0d2..9b58f32 100644
--- a/pages/search.vue
+++ b/pages/search.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Icon } from '#components'
 import { search, type Result } from '~/openapi/search'
 
 const route = useRoute()
@@ -14,6 +15,7 @@ watchEffect(async () => {
     try {
         isLoading.value = true
         error.value = null
+        console.log("SEARCHING")
         const response = await search({ title: searchQuery.value })
         results.value = response.data.results || []
     } catch (err) {
@@ -22,6 +24,8 @@ watchEffect(async () => {
     } finally {
         isLoading.value = false
     }
+}, {
+    flush: 'post'
 })
 </script>
 
@@ -39,16 +43,19 @@ watchEffect(async () => {
             class="grid grid-cols-[repeat(auto-fill,16rem)] justify-around gap-8 grid-flow-row">
             <div v-for="item in results" :key="item.id" class="flex w-[16rem]">
                 <NuxtLink :to="`/anime/${item.id}`" class="w-full">
-                    <div v-if="item.material_data?.anime_poster_url" :style="{ 'background-image': 'url('+item.material_data.anime_poster_url+')' }"
-                        :alt="item.title" class="flex items-end justify-end p-2 rounded-md bg-cover bg-center bg-no-repeat h-96">
-                        <Button class="backdrop-blur-none bg-primary/80">2 episodes</Button>
+                    <div v-if="item.material_data?.anime_poster_url"
+                        :style="{ 'background-image': 'url(' + item.material_data.anime_poster_url + ')' }"
+                        :alt="item.title"
+                        class="flex items-end justify-end p-2 rounded-md bg-cover bg-center bg-no-repeat h-96">
+                        <div
+                            class="flex items-center px-2 py-0.5 backdrop-blur-none bg-primary/75 text-background/80 rounded-sm text-xs">
+                            <Icon name="gg:play-list" />
+                            {{ item.material_data?.episodes_total }}
+                            episode
+                        </div>
                     </div>
                     <div>
-                        <h3 className="text-2xl font-semibold tracking-tight">{{ item.title }}</h3>
-                        <p v-if="item.material_data?.year">Year: {{ item.material_data.year }}</p>
-                        <p v-if="item.material_data?.anime_kind">Type: {{ item.material_data.anime_kind }}</p>
-                        <p v-if="item.material_data?.episodes_total">Episodes: {{ item.material_data.episodes_total }}
-                        </p>
+                        <h3 className="text-xl font-semibold tracking-tight">{{ item.title }}</h3>
                     </div>
                 </NuxtLink>
             </div>