Include component type in search pattern for browse

To refine the component search result in PageBrowse, pass component type information in search pattern. Task: clearlydefined#957
qtomlinson · Oct 4, 2022 · 2b2321a · 2b2321a
1 parent 6d64263
commit 2b2321a
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 14 deletions.
diff --git a/src/components/Navigation/Pages/PageBrowse/PageBrowse.js b/src/components/Navigation/Pages/PageBrowse/PageBrowse.js
@@ -73,8 +73,12 @@ class PageBrowse extends SystemManagedList {
 
   onSearch = value => {
     this.setState({ searchTerm: value })
-    const valueToSearch = this.state.selectedProvider.value + '/' + value
-    this.props.dispatch(uiBrowseUpdateFilterList(this.props.token, valueToSearch))
+    const searchPattern = this._buildSearchPattern(this.state.selectedProvider, value)
+    this.props.dispatch(uiBrowseUpdateFilterList(this.props.token, searchPattern))
+  }
+
+  _buildSearchPattern = (provider, value) => {
+    return provider.type + '/' + provider.value + '/' + value
   }
 
   tableTitle() {
@@ -171,8 +175,8 @@ class PageBrowse extends SystemManagedList {
   onProviderChange(item) {
     this.setState({ selectedProvider: item })
     if (this.state.searchTerm) {
-      const valueToSearch = item.value + '/' + this.state.searchTerm
-      this.props.dispatch(uiBrowseUpdateFilterList(this.props.token, valueToSearch))
+      const searchPattern = this._buildSearchPattern(item, this.state.searchTerm)
+      this.props.dispatch(uiBrowseUpdateFilterList(this.props.token, searchPattern))
     }
   }
 

diff --git a/src/utils/utils.js b/src/utils/utils.js
@@ -121,16 +121,16 @@ const types = [
 ]
 
 const providers = [
-  { value: 'npmjs', label: 'NpmJS', image: npmImage },
-  { value: 'github', label: 'GitHub', image: gitImage },
-  { value: 'mavencentral', label: 'MavenCentral', image: mavenImage },
-  { value: 'nuget', label: 'NuGet', image: nugetImage },
-  { value: 'pypi', label: 'PyPi', image: pypiImage },
-  { value: 'rubygems', label: 'RubyGems', image: gemImage },
-  { value: 'cocoapods', label: 'CocoaPods', image: podImage },
-  { value: 'cratesio', label: 'Crates.io', image: crateImage },
-  { value: 'debian', label: 'Debian', image: debianImage },
-  { value: 'packagist', label: 'Packagist', image: composerImage }
+  { value: 'npmjs', label: 'NpmJS', image: npmImage, type: 'npm' },
+  { value: 'github', label: 'GitHub', image: gitImage, type: 'git' },
+  { value: 'mavencentral', label: 'MavenCentral', image: mavenImage, type: 'maven' },
+  { value: 'nuget', label: 'NuGet', image: nugetImage, type: 'nuget' },
+  { value: 'pypi', label: 'PyPi', image: pypiImage, type: 'pypi' },
+  { value: 'rubygems', label: 'RubyGems', image: gemImage, type: 'gem' },
+  { value: 'cocoapods', label: 'CocoaPods', image: podImage, type: 'pod' },
+  { value: 'cratesio', label: 'Crates.io', image: crateImage, type: 'crate' },
+  { value: 'debian', label: 'Debian', image: debianImage, type: 'deb' },
+  { value: 'packagist', label: 'Packagist', image: composerImage, type: 'composer' }
 ]
 
 const multiEditableFields = ['licensed.declared']