Add ability to override the query params transformer

Author: valentinogagliardi

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres
 to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [3.0.2-0] (beta) - 2023-13-02
+
+## Added
+
+- ability to override query params transformer to `KeywordSearchWidget` via `keywordQueryParamTransformer`
+
 ## [3.0.1-0] (beta) - 2023-13-02
 
 ## Added

cypress/component/KeywordSearchWidget.cy.tsx

@@ -87,23 +87,28 @@ describe('<KeywordSearchWidget />', () => {
     cy.get('@onKeywordSelection')
       .its('firstCall.args.0')
       .then(searchParams => {
-        expect(searchParams.toString()).to.equal('kw=Spatial+coverage%3AGlobal')
+        expect(searchParams.getAll('kw')).to.deep.equal([
+          'Spatial%20coverage%3A%20Global'
+        ])
       })
 
     cy.get('@onKeywordSelection')
       .its('secondCall.args.0')
       .then(searchParams => {
-        expect(searchParams.toString()).to.equal(
-          'kw=Spatial+coverage%3AGlobal&kw=Variable+domain%3AAtmosphere+%28composition%29'
-        )
+        expect(searchParams.getAll('kw')).to.deep.equal([
+          'Spatial%20coverage%3A%20Global',
+          'Variable%20domain%3A%20Atmosphere%20(composition)'
+        ])
       })
 
     cy.get('@onKeywordSelection')
       .its('thirdCall.args.0')
       .then(searchParams => {
-        expect(searchParams.toString()).to.equal(
-          'kw=Spatial+coverage%3AGlobal&kw=Variable+domain%3AAtmosphere+%28composition%29&kw=Variable+domain%3ALand+%28cryosphere%29'
-        )
+        expect(searchParams.getAll('kw')).to.deep.equal([
+          'Spatial%20coverage%3A%20Global',
+          'Variable%20domain%3A%20Atmosphere%20(composition)',
+          'Variable%20domain%3A%20Land%20(cryosphere)'
+        ])
       })
   })
 
@@ -210,9 +215,11 @@ describe('<KeywordSearchWidget />', () => {
       cy.get('@onKeywordSelection')
         .its('thirdCall.args.0')
         .then(searchParams => {
-          expect(searchParams.toString()).to.equal(
-            'kw=Spatial+coverage%3AGlobal&kw=Variable+domain%3AAtmosphere+%28composition%29&kw=Variable+domain%3ALand+%28cryosphere%29'
-          )
+          expect(searchParams.getAll('kw')).to.deep.equal([
+            'Spatial%20coverage%3A%20Global',
+            'Variable%20domain%3A%20Atmosphere%20(composition)',
+            'Variable%20domain%3A%20Land%20(cryosphere)'
+          ])
         })
 
       cy.findByLabelText(/Europe/i).should('have.attr', 'aria-checked', 'false')

src/widgets/KeywordSearchWidget.tsx

@@ -20,6 +20,11 @@ export interface KeywordSearchWidgetProps {
    * The key used as the query parameter for the keyword search. Defaults to "kw".
    */
   keywordQueryParam?: string
+
+  /**
+   * A custom transformer for the query parameter. Defaults to using encodeURIComponent.
+   */
+  keywordQueryParamTransformer?: (category: string, keyword: string) => string
 }
 
 type Selections = Record<string, string[]>
@@ -31,7 +36,8 @@ type Selections = Record<string, string[]>
 const KeywordSearchWidget = ({
   categories,
   onKeywordSelection,
-  keywordQueryParam = 'kw'
+  keywordQueryParam = 'kw',
+  keywordQueryParamTransformer
 }: KeywordSearchWidgetProps) => {
   /**
    * Keep track of the selected keywords. This is used to preserve selections when accordions are closed and subsequently opened.
@@ -69,7 +75,12 @@ const KeywordSearchWidget = ({
     for (const selection in selections) {
       if (selections[selection].length) {
         for (const keyword of selections[selection]) {
-          searchParams.append(keywordQueryParam, `${selection}:${keyword}`)
+          searchParams.append(
+            keywordQueryParam,
+            (keywordQueryParamTransformer &&
+              keywordQueryParamTransformer(selection, keyword)) ||
+              encodeURIComponent(`${selection}: ${keyword}`)
+          )
         }
       }
     }