Search query working

src/components/elements/InteractionBar.vue

@@ -59,8 +59,8 @@ function onSelect(suggestion?: Suggestion) {
   <header class="relative z-10 flex items-center w-full p-10 py-6 pl-4 pr-6 desktop:p-4 gap-x-2 desktop:gap-x-4">
     <img src="@/assets/logo.svg" :alt="$t('Crypto Map logo')" class="h-[22px]">
     <SearchBox
-      :autocomplete="querySearch" :suggestions="suggestions" class="flex-1 w-full" rounded-full
-      combobox-options-classes="w-[320px] desktop:!top-[88px] !rounded-t-0 !rounded-b-2xl" size="sm"
+      :autocomplete="querySearch" :suggestions="suggestions" class="flex-1 w-full " rounded-full
+      combobox-options-classes="!rounded-t-0 !rounded-b-2xl desktop:w-[320px] desktop:!top-[88px] max-desktop:w-full max-desktop:!left-0 max-desktop:!top-[78px]" size="sm"
       :placeholder="$t('Search Map')" data-search-box @open="searchBoxOpen" @selected="onSelect"
     />
     <CryptoMapModal />

src/composables/useAutocomplete.ts

@@ -1,9 +1,9 @@
-import { useThrottleFn } from '@vueuse/core'
+import { useDebounceFn } from '@vueuse/core'
 import { computed, ref } from 'vue'
 import { detectLanguage } from '@/i18n/i18n-setup'
 import { useMap } from '@/stores/map'
 import { AutocompleteStatus, type Suggestion, SuggestionType } from '@/types'
-import { queryLocations } from '@/database'
+import { searchLocations } from '@/database'
 
 enum GoogleAutocompleteFor {
   Location = 'establishment',
@@ -14,18 +14,16 @@ export function useAutocomplete() {
   const status = ref<AutocompleteStatus>(AutocompleteStatus.NoResults)
   const dbSuggestions = ref<Suggestion[]>([])
   const googleSuggestions = ref<Suggestion[]>([])
+  const suggestions = computed(() => dbSuggestions.value.concat(googleSuggestions.value))
 
   // Google Autocomplete
   const sessionToken = ref<google.maps.places.AutocompleteSessionToken>()
   const autocompleteService = ref<google.maps.places.AutocompleteService>()
 
-  function init() {
+  async function autocompleteGoogle(query: string, autocompleteFor: GoogleAutocompleteFor) {
     sessionToken.value ||= new google.maps.places.AutocompleteSessionToken()
     autocompleteService.value ||= new google.maps.places.AutocompleteService()
-  }
 
-  async function autocompleteGoogle(query: string, autocompleteFor: GoogleAutocompleteFor) {
-    init()
     const request: google.maps.places.AutocompletionRequest = {
       input: query,
       sessionToken: sessionToken.value,
@@ -51,23 +49,36 @@ export function useAutocomplete() {
     })
   }
 
+  async function autocompleteDatabase(query: string) {
+    const locations = await searchLocations(query)
+    dbSuggestions.value = locations.map(q => Object.assign(q, { type: SuggestionType.Location }))
+  }
+
   async function querySearch(query: string) {
+    status.value = AutocompleteStatus.Loading
+
     if (!query) {
       dbSuggestions.value = []
       googleSuggestions.value = []
       return
     }
 
-    dbSuggestions.value = (await queryLocations(query)).map(q => Object.assign(q, { type: SuggestionType.Location }))
-    autocompleteGoogle(query, GoogleAutocompleteFor.Regions)
+    const result = await Promise.allSettled([autocompleteDatabase(query), autocompleteGoogle(query, GoogleAutocompleteFor.Regions)])
+
+    if (result.every(r => r.status === 'rejected')) {
+      status.value = AutocompleteStatus.Error
+      return
+    }
+
+    status.value = suggestions.value.length ? AutocompleteStatus.WithResults : AutocompleteStatus.NoResults
   }
 
   return {
     status,
-    querySearch,
+    suggestions,
     dbSuggestions,
     googleSuggestions,
-    suggestions: computed(() => dbSuggestions.value.concat(googleSuggestions.value)),
-    autocompleteGoogleLocations: useThrottleFn((query: string) => autocompleteGoogle(query, GoogleAutocompleteFor.Location), 300),
+    autocompleteGoogleLocations: useDebounceFn((query: string) => autocompleteGoogle(query, GoogleAutocompleteFor.Location), 300),
+    querySearch: useDebounceFn((query: string) => querySearch(query), 300),
   }
 }

src/database.ts

@@ -108,7 +108,7 @@ export async function getLocation(uuid: string): Promise<Location | undefined> {
   return parseLocation(location)
 }
 
-export async function queryLocations(userQuery: string) {
+export async function searchLocations(userQuery: string) {
   const url = new URL(`${databaseUrl}/rest/v1/rpc/search_locations`)
   url.searchParams.set('p_query', userQuery)
   const suggestions = await fetchDb<Omit<Suggestion, 'type'>[]>(url)

src/types.ts

@@ -159,6 +159,7 @@ export enum AutocompleteStatus {
   Loading = 'loading',
   WithResults = 'with-results',
   NoResults = 'no-results',
+  Error = 'error',
 }
 
 export interface SearchFor {