Adds the ability to customize the URL scheme for search pages when fi… (

#134) * Adds the ability to customize the URL scheme for search pages when filters and sort are applied. * Clean up and version bump Co-authored-by: Richard van der Dys <[email protected]>
storefront-foundation · Sep 28, 2020 · 011983f · 011983f
1 parent 6b0e96d
commit 011983f
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 12 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-storefront",
-  "version": "8.16.4",
+  "version": "8.17.0",
   "description": "Build and deploy e-commerce progressive web apps (PWAs) in record time.",
   "module": "./index.js",
   "license": "Apache-2.0",

diff --git a/src/mock-connector/index.js b/src/mock-connector/index.js
@@ -7,7 +7,6 @@ export { default as home } from './home.js'
 export { default as product } from './product.js'
 export { default as productMedia } from './productMedia.js'
 export { default as productSuggestions } from './productSuggestions.js'
-export { default as routes } from './routes.js'
 export { default as search } from './search.js'
 export { default as searchSuggestions } from './searchSuggestions.js'
 export { default as session } from './session.js'

diff --git a/src/mock-connector/routes.js b/src/mock-connector/routes.js
diff --git a/src/plp/SearchResultsProvider.js b/src/plp/SearchResultsProvider.js
@@ -24,7 +24,7 @@ import getAPIURL from '../api/getAPIURL'
  *  }
  * ```
  */
-export default function SearchResultsProvider({ store, updateStore, children }) {
+export default function SearchResultsProvider({ store, updateStore, queryForState, children }) {
   useEffect(() => {
     if (store.reloading) {
       async function refresh() {
@@ -133,6 +133,8 @@ export default function SearchResultsProvider({ store, updateStore, children })
    * Computes the query for the current state of the search controls
    */
   const getQueryForState = () => {
+    if (queryForState) return queryForState(store.pageData)
+
     const { filters, page, sort } = store.pageData
     const { search } = window.location
     const query = qs.parse(search, { ignoreQueryPrefix: true })
@@ -167,7 +169,6 @@ export default function SearchResultsProvider({ store, updateStore, children })
    */
   const getURLForState = query => {
     const { pathname, hash } = window.location
-
     return pathname + qs.stringify(query, { addQueryPrefix: true }) + hash
   }
 
@@ -211,4 +212,10 @@ SearchResultsProvider.propTypes = {
    * The update function returned from [`useSearchResultsStore`](/apiReference/plp/useSearchResultsStore).
    */
   updateStore: PropTypes.func.isRequired,
+
+  /**
+   * An optional function to customize the URL format for search pages when the user
+   * changes filters and sort.
+   */
+  queryForState: PropTypes.func,
 }
diff --git a/test/plp/SearchResultsProvider.test.js b/test/plp/SearchResultsProvider.test.js
@@ -29,7 +29,7 @@ describe('SearchResultsProvider', () => {
     delete window.__NEXT_DATA__
   })
 
-  const Test = () => {
+  const Test = props => {
     const [store, updateStore] = useState(initialStore)
 
     const ContextGetter = () => {
@@ -40,7 +40,7 @@ describe('SearchResultsProvider', () => {
     }
 
     return (
-      <SearchResultsProvider store={store} updateStore={updateStore}>
+      <SearchResultsProvider store={store} updateStore={updateStore} {...props}>
         <ContextGetter />
       </SearchResultsProvider>
     )
@@ -220,4 +220,31 @@ describe('SearchResultsProvider', () => {
       expect(fetch).toHaveBeenCalled()
     })
   })
+
+  it('should use the query string returned by queryForState', async () => {
+    fetchMock.mockResponseOnce(
+      JSON.stringify({
+        pageData: {
+          products: [],
+        },
+      }),
+    )
+
+    let providedState
+
+    const queryForState = state => {
+      providedState = state
+      return { foo: 'bar' }
+    }
+
+    wrapper = mount(<Test queryForState={queryForState} />)
+
+    await act(async () => {
+      await context.actions.toggleFilter({ code: 'red' }, true)
+      await wrapper.update()
+    })
+
+    expect(providedState.filters).toEqual(['blue', 'red'])
+    expect(fetch).toHaveBeenCalledWith('/api/test?foo=bar&__v__=development')
+  })
 })