abort controller

ppy-sb · Apr 11, 2024 · 7f74b87 · 7f74b87
1 parent 0e94fa5
commit 7f74b87
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 18 deletions.
diff --git a/src/components/app/search-modal.client.vue b/src/components/app/search-modal.client.vue
@@ -125,35 +125,24 @@ const {
       </button>
     </div>
     <div class="bg-gbase-50 dark:bg-gbase-800 shadow-2xl md:rounded-2xl relative max-h-[calc(100dvh-32px-4rem)] flex flex-col overflow-hidden">
-      <template v-if="mode === 'beatmap'">
+      <form action="#" method="post" class="w-full space-y-2" @submit.prevent="raw(true)">
         <input
           v-model="keyword"
           type="text"
           :placeholder="t('search')"
-          class="input input-shadow grow border-label-0 focus:input-primary bg-transparent !outline-0"
+          class="input input-shadow w-full border-label-0 focus:input-primary bg-transparent !outline-0"
           @input="onInput"
-          @keyup.enter="raw(true)"
         >
-        <span
-          class="bg-transparent space-x-1 transition-[margin]" :class="{
-            'mt-2': tags.length,
-          }"
+        <div
+          v-if="mode === 'beatmap' && tags.length"
+          class="bg-transparent space-x-1"
         >
           <span v-for="tag, index in tags" :key="index" class="gap-1 cursor-pointer badge badge-md badge-primary whitespace-nowrap" @click="tags.splice(index, 1)">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-4 h-4 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
             <div v-html="tag.toString()" />
           </span>
-        </span>
-      </template>
-      <input
-        v-else
-        v-model="keyword"
-        type="text"
-        :placeholder="t('search')"
-        class="input input-shadow grow border-label-0 focus:input-primary bg-transparent !outline-0"
-        @input="onInput"
-        @keyup.enter="raw(true)"
-      >
+        </div>
+      </form>
       <div class="overflow-auto">
         <template
           v-if="includes.pages && pages.length "

diff --git a/src/composables/useSearch.ts b/src/composables/useSearch.ts
@@ -53,6 +53,8 @@ const searchMode = computed(() => {
 export async function useSearchResult() {
   const app = useNuxtApp()
 
+  let cancel = new AbortController()
+
   const {
     data: users,
     pending: pendingUsers,
@@ -68,6 +70,7 @@ export async function useSearchResult() {
       context: {
         skipBatch: true,
       },
+      signal: cancel.signal,
     })
   })
 
@@ -87,6 +90,7 @@ export async function useSearchResult() {
       context: {
         skipBatch: true,
       },
+      signal: cancel.signal,
     })
   })
 
@@ -106,6 +110,7 @@ export async function useSearchResult() {
       context: {
         skipBatch: true,
       },
+      signal: cancel.signal,
     })
   })
 
@@ -122,6 +127,10 @@ export async function useSearchResult() {
         return
       }
     }
+    if (cancel) {
+      cancel.abort()
+    }
+    cancel = new AbortController()
 
     includes.users ? searchUsers() : (users.value = [])
     includes.beatmaps ? searchBeatmaps() : (beatmaps.value = [])