feat: update url on success

Author: MatteoGabriele

app/components/AppHeader.vue

@@ -22,23 +22,17 @@ const isMobile = useIsMobile()
 const isSearchExpandedManually = shallowRef(false)
 const searchBoxRef = useTemplateRef('searchBoxRef')
 
-const searchQuery = shallowRef('')
-watch(
-  () => route.query.q,
-  queryValue => {
-    searchQuery.value = normalizeSearchParam(queryValue)
-  },
-  { immediate: true },
-)
+const { searchQuery, updateSearchQuery } = usePackageSearchQuery()
 
-async function handleSearchSubmit() {
-  if (!searchQuery.value) {
+const router = useRouter()
+function handleSubmitSearch() {
+  if (searchQuery.value === '') {
     return
   }
 
-  await navigateTo({
+  router.replace({
     name: 'search',
-    query: { q: searchQuery.value },
+    query: { ...route.query, q: searchQuery.value },
   })
 }
 
@@ -148,8 +142,9 @@ onKeyStroke(
           ref="searchBoxRef"
           class="max-w-sm"
           compact
-          v-model="searchQuery"
-          @submit="handleSearchSubmit"
+          :model-value="searchQuery"
+          @update:model-value="updateSearchQuery"
+          @submit="handleSubmitSearch"
           @focus="handleSearchFocus"
           @blur="handleSearchBlur"
         />

app/composables/npm/useNpmSearch.ts

@@ -41,6 +41,7 @@ export function packumentToSearchResult(
 export interface NpmSearchOptions {
   /** Number of results to fetch */
   size?: number
+  onSuccess?: (result: { query: string }) => void
 }
 
 export const emptySearchResponse = {
@@ -151,6 +152,8 @@ export function useNpmSearch(
         // Success - clear rate limit flag
         isRateLimited.value = false
 
+        opts.onSuccess?.({ query: q })
+
         return { ...response, isStale }
       } catch (error: unknown) {
         // Detect rate limit errors. npm's 429 response doesn't include CORS headers,

app/composables/usePackageSearchQuery.ts

@@ -0,0 +1,21 @@
+import { debounce } from 'perfect-debounce'
+
+export function usePackageSearchQuery() {
+  const searchQuery = useState<string>('package_search_query', () => '')
+
+  const route = useRoute()
+  onMounted(() => {
+    if (route.query.q) {
+      searchQuery.value = normalizeSearchParam(route.query.q)
+    }
+  })
+
+  const updateSearchQuery = debounce((newSearchQuery: string) => {
+    searchQuery.value = newSearchQuery
+  }, 400)
+
+  return {
+    searchQuery,
+    updateSearchQuery,
+  }
+}

app/pages/search.vue

@@ -29,8 +29,7 @@ const updateUrlPage = debounce((page: number) => {
   })
 }, 500)
 
-// The actual search query (from URL, used for API calls)
-const query = computed(() => normalizeSearchParam(route.query.q))
+const { searchQuery: query } = usePackageSearchQuery()
 
 // Track if page just loaded (for hiding "Searching..." during view transition)
 const hasInteracted = shallowRef(false)
@@ -76,6 +75,12 @@ const {
 } = useNpmSearch(query, () => ({
   size: requestedSize.value,
   incremental: true,
+  onSuccess: data => {
+    router.replace({
+      name: 'search',
+      query: { ...route.query, q: data.query },
+    })
+  },
 }))
 
 // Results to display (directly from incremental search)