Fix issue 116: Functional updates broken when value needs to be encoded

src/__tests__/useQueryParam-test.tsx

@@ -5,6 +5,7 @@ import {
   NumberParam,
   NumericArrayParam,
   DateParam,
+  JsonParam
 } from 'serialize-query-params';
 import { QueryParamProvider, useQueryParam } from '../index';
 import { calledPushQuery, makeMockHistory, makeMockLocation } from './helpers';
@@ -152,6 +153,28 @@ describe('useQueryParam', () => {
     expect(calledPushQuery(history, 2)).toEqual({ foo: '600' });
   });
 
+  it('works with functional JsonParam updates', () => {
+    type ParamType = {a: number, b: string};
+    const { wrapper, history, location } = setupWrapper({
+      foo: '{"a":1,"b":"abc"}',
+      bar: 'xxx',
+    });
+    const { result, rerender } = renderHook(
+      () => useQueryParam('foo', JsonParam),
+      {
+        wrapper,
+      }
+    );
+    const [decodedValue, setter] = result.current;
+
+    expect(decodedValue).toEqual({a: 1, b: 'abc'});
+    setter((latestValue: ParamType) => ({...latestValue, a: latestValue.a + 1}), 'push');
+    expect(calledPushQuery(history, 0)).toEqual({ foo: '{"a":2,"b":"abc"}' });
+
+    setter((latestValue: ParamType) => ({...latestValue, b: "yyy"}), 'push');
+    expect(calledPushQuery(history, 1)).toEqual({ foo: '{"a":2,"b":"yyy"}' });
+  });
+
   it('properly detects new values when equals is overridden', () => {
     const { wrapper } = setupWrapper({
       foo: '2020-01-01',

src/__tests__/useQueryParams-test.tsx

@@ -7,6 +7,7 @@ import {
   EncodedQuery,
   NumericArrayParam,
   DateParam,
+  JsonParam
 } from 'serialize-query-params';
 
 import { useQueryParams, QueryParamProvider } from '../index';
@@ -262,6 +263,32 @@ describe('useQueryParams', () => {
     expect(calledPushQuery(history, 2)).toEqual({ foo: '600' });
   });
 
+  it('works with functional JsonParam updates', () => {
+    const { wrapper, history, location } = setupWrapper({
+      foo: '{"a":1,"b":"abc"}',
+      bar: 'xxx',
+    });
+    const { result, rerender } = renderHook(
+      () => useQueryParams({ foo: JsonParam, bar: StringParam }),
+      {
+        wrapper,
+      }
+    );
+    const [decodedValue, setter] = result.current;
+
+    expect(decodedValue).toEqual({ foo: {a: 1, b: 'abc'}, bar: 'xxx' });
+    setter(
+      (latestQuery: any) => ({
+        foo: {...latestQuery.foo, a: latestQuery.foo.a + 1},
+      }),
+      'pushIn'
+    );
+    expect(calledPushQuery(history, 0)).toEqual({
+      foo: '{"a":2,"b":"abc"}',
+      bar: 'xxx',
+    });
+  });
+
   it('properly detects new values when equals is overridden', () => {
     const { wrapper } = setupWrapper({
       foo: '2020-01-01',

src/useQueryParam.ts

@@ -134,7 +134,7 @@ export const useQueryParam = <D, D2 = D>(
         );
         decodedValueCacheRef.current = latestValue; // keep cache in sync
 
-        newEncodedValue = (newValue as Function)(latestValue);
+        newEncodedValue = paramConfig.encode((newValue as Function)(latestValue));
       } else {
         newEncodedValue = paramConfig.encode(newValue);
       }

src/useQueryParams.ts

@@ -178,7 +178,7 @@ export const useQueryParams = <QPCMap extends QueryParamConfigMap>(
         );
         decodedValuesCacheRef.current = latestValues; // keep cache in sync
 
-        encodedChanges = (changes as Function)(latestValues);
+        encodedChanges = encodeQueryParams(paramConfigMap, (changes as Function)(latestValues));
       } else {
         // encode as strings for the URL
         encodedChanges = encodeQueryParams(paramConfigMap, changes);