feat(use-query-params): add ability to push instead of replacing current history

Author: chambo-e

packages/use-query-params/src/__tests__/index.tsx

@@ -1,19 +1,55 @@
 import { act, renderHook } from '@testing-library/react-hooks'
+import { History, createMemoryHistory } from 'history'
 import React, { ReactNode } from 'react'
-import { MemoryRouter } from 'react-router-dom'
+import { MemoryRouter, Router } from 'react-router-dom'
 import useQueryParams from '..'
 
 const wrapper =
-  ({ pathname = 'one', search }: { pathname?: string, search: string }) =>
+  ({ pathname = 'one', search, history }: { pathname?: string, search: string, history?: History }) =>
   // eslint-disable-next-line react/prop-types
   ({ children }: { children: ReactNode }) =>
     (
-      <MemoryRouter initialIndex={0} initialEntries={[{ pathname, search }]}>
-        {children}
-      </MemoryRouter>
+      history ? (
+        <Router history={history}>
+          {children}
+        </Router>
+      ) : (
+        <MemoryRouter initialIndex={0} initialEntries={[{ pathname, search }]}>
+          {children}
+        </MemoryRouter>
+      )
     )
 
 describe('useQueryParam', () => {
+  it('should correctly push instead of replacing history', () => {
+    const history = createMemoryHistory({
+      initialEntries: ['user=john'],
+      initialIndex: 0,
+    })
+
+    const { result } = renderHook(() => useQueryParams(), {
+      wrapper: wrapper({ history, search: '' }),
+    })
+
+    act(() => {
+      result.current.setQueryParams({ user: 'John' })
+    })
+    expect(result.current.queryParams).toEqual({ user: 'John' })
+    expect(history.length).toBe(1)
+    act(() => {
+      result.current.setQueryParams({ user: 'Jack' })
+    })
+    expect(result.current.queryParams).toEqual({ user: 'Jack' })
+    expect(history.length).toBe(1)
+    act(() => {
+      result.current.setQueryParams({ user: 'Jerry' }, { push: true })
+    })
+    expect(result.current.queryParams).toEqual({ user: 'Jerry' })
+    expect(history.length).toBe(2)
+
+    console.log(history)
+  })
+
   it('should set one object', () => {
     const { result } = renderHook(() => useQueryParams(), {
       wrapper: wrapper({ search: 'user=john' }),

packages/use-query-params/src/index.ts

@@ -3,13 +3,30 @@ import { ParsedQuery, parse, stringify } from 'query-string'
 import { useCallback, useMemo } from 'react'
 import { useHistory, useLocation } from 'react-router-dom'
 
+interface Options {
+  /** Set to true to push a new entry onto the history stack */
+  push: boolean
+}
+
 const useQueryParams = (): {
   queryParams: ParsedQuery<string | number | boolean>;
-  replaceQueryParams: (newParams: Record<string, unknown>) => void;
-  setQueryParams: (nextParams: Record<string, unknown>) => void;
+  /**
+   * Replace the query params in the url. It erase all current values and put the new ones
+   *
+   * @param newParams - The values to set in the query string, overweriting existing one
+   * @param options - Options to define behavior
+   */
+  replaceQueryParams: typeof replaceQueryParams
+  /**
+   * Set query params in the url. It merge the existing values with the new ones.
+   *
+   * @param nextParams - The values to add or update in the existing query string
+   * @param options - Options to define behavior
+   */
+  setQueryParams: typeof setQueryParams
 } => {
   // eslint-disable-next-line @typescript-eslint/unbound-method
-  const { replace } = useHistory<History>()
+  const { replace, push } = useHistory<History>()
   // eslint-disable-next-line @typescript-eslint/unbound-method
   const location = useLocation<History>()
 
@@ -35,35 +52,28 @@ const useQueryParams = (): {
   )
 
   const replaceInUrlIfNeeded = useCallback(
-    newState => {
+    (newState: Record<string,unknown>, options?: Options) => {
       const stringifiedParams = stringyFormat(newState)
       const searchToCompare = location.search || '?'
 
       if (searchToCompare !== `?${stringifiedParams}`) {
-        replace(`${location.pathname}?${stringifiedParams}`)
+        const fn = options?.push ? push : replace
+        fn(`${location.pathname}?${stringifiedParams}`)
       }
     },
-    [replace, location.pathname, location.search, stringyFormat],
+    [push, replace, location.pathname, location.search, stringyFormat],
   )
 
-  /**
-   * Set query params in the url. It merge the existing values with the new ones.
-   * @param {Object} nextParams The params to set in the url as query params
-   */
   const setQueryParams = useCallback(
-    (nextParams: Record<string,unknown>): void => {
-      replaceInUrlIfNeeded({ ...currentState, ...nextParams })
+    (nextParams: Record<string,unknown>, options?: Options): void => {
+      replaceInUrlIfNeeded({ ...currentState, ...nextParams }, options)
     },
     [currentState, replaceInUrlIfNeeded],
   )
 
-  /**
-   * Replace the query params in the url. It erase all current values and put the new ones
-   * @param {Object} newParams
-   */
   const replaceQueryParams = useCallback(
-    (newParams: Record<string,unknown>): void => {
-      replaceInUrlIfNeeded({ ...newParams })
+    (newParams: Record<string,unknown>, options?: Options): void => {
+      replaceInUrlIfNeeded(newParams, options)
     },
     [replaceInUrlIfNeeded],
   )