refactor: move trends suggestion composition

Author: pastelsky

__tests__/trendsAutocomplete.test.ts

@@ -0,0 +1,23 @@
+import type { PackageSuggestion } from '../client/api'
+import { rankSuggestionsByQuery } from '../pages/trends/trendsAutocomplete'
+
+const suggestion = (name: string, searchScore: number): PackageSuggestion => ({
+  package: { name, description: '' },
+  searchScore,
+  score: { detail: { popularity: searchScore } },
+})
+
+it('ranks matching suggestions by query before search score', () => {
+  expect(
+    rankSuggestionsByQuery(
+      [
+        suggestion('preact', 100),
+        suggestion('react-dom', 75),
+        suggestion('React', 100),
+        suggestion('react', 20),
+        suggestion('not-a-match', 500),
+      ],
+      'react'
+    ).map(item => item.package.name)
+  ).toEqual(['React', 'react-dom', 'preact'])
+})

pages/trends/index.page.tsx

@@ -21,6 +21,7 @@ import GithubIcon from '../../client/assets/github-logo.svg'
 import NPMIcon from '../../client/assets/npm-logo.svg'
 import { getTrendsRecommendations } from '../../utils/trendsRecommendations'
 import TrendsChart, { TRENDS_SERIES_COLORS } from './TrendsChart'
+import { loadRelatedPackageSuggestions } from './trendsAutocomplete'
 
 const DEFAULT_PACKAGES = ['react', 'vue']
 const MAX_PACKAGES = 5
@@ -134,7 +135,7 @@ export default function TrendsPage() {
   const [error, setError] = useState<string | null>(null)
   const [trendsData, setTrendsData] = useState<TrendsResponse | null>(null)
   const [copied, setCopied] = useState(false)
-  const [suggestionQueries, setSuggestionQueries] = useState<string[]>([])
+  const [relatedPackageNames, setRelatedPackageNames] = useState<string[]>([])
   const [suggestedPackages, setSuggestedPackages] = useState<string[]>([])
   const trendsCache = useRef(new Map<string, TrendsResponse>())
   const packageTrendsCache = useRef(
@@ -201,7 +202,7 @@ export default function TrendsPage() {
           similarResults: results,
         }
       )
-      setSuggestionQueries(autocompleteQueries)
+      setRelatedPackageNames(autocompleteQueries)
       setSuggestedPackages(recommendations)
     })
 
@@ -210,6 +211,12 @@ export default function TrendsPage() {
     }
   }, [packages])
 
+  const loadSuggestions = useCallback(
+    (query: string) =>
+      loadRelatedPackageSuggestions(query, relatedPackageNames),
+    [relatedPackageNames]
+  )
+
   // Update URL parameters without full page reload
   const updateUrl = useCallback(
     (
@@ -456,8 +463,7 @@ export default function TrendsPage() {
                   key={inputKey}
                   containerClass="trends-autocomplete"
                   compact
-                  suggestionQueries={suggestionQueries}
-                  rankSuggestions
+                  loadSuggestions={loadSuggestions}
                   onSearchSubmit={handleAddPackage}
                 />
               </div>

pages/trends/trendsAutocomplete.ts

@@ -0,0 +1,59 @@
+import API, {
+  sortSuggestionsBySearchScore,
+  type PackageSuggestion,
+} from '../../client/api'
+
+const MAX_RELATED_PACKAGES = 5
+
+export function rankSuggestionsByQuery(
+  suggestions: PackageSuggestion[],
+  query: string
+) {
+  const normalizedQuery = query.toLowerCase()
+  const uniqueSuggestions = new Map<string, PackageSuggestion>()
+
+  suggestions.forEach(suggestion => {
+    const packageName = suggestion.package.name.toLowerCase()
+    if (!uniqueSuggestions.has(packageName)) {
+      uniqueSuggestions.set(packageName, suggestion)
+    }
+  })
+
+  return Array.from(uniqueSuggestions.values())
+    .filter(suggestion =>
+      suggestion.package.name.toLowerCase().includes(normalizedQuery)
+    )
+    .sort((a, b) => {
+      const aStartsWithQuery = a.package.name
+        .toLowerCase()
+        .startsWith(normalizedQuery)
+      const bStartsWithQuery = b.package.name
+        .toLowerCase()
+        .startsWith(normalizedQuery)
+
+      if (aStartsWithQuery !== bStartsWithQuery) {
+        return aStartsWithQuery ? -1 : 1
+      }
+
+      return sortSuggestionsBySearchScore(a, b)
+    })
+}
+
+export async function loadRelatedPackageSuggestions(
+  query: string,
+  relatedPackageNames: string[]
+) {
+  const queries = [query, ...relatedPackageNames]
+    .filter(Boolean)
+    .slice(0, MAX_RELATED_PACKAGES + 1)
+  const results = await Promise.allSettled(
+    queries.map(packageName => API.getSuggestions(packageName))
+  )
+
+  return rankSuggestionsByQuery(
+    results.flatMap(result =>
+      result.status === 'fulfilled' ? result.value : []
+    ),
+    query
+  )
+}