handle falsy query parameter values correctly

Author: lukasvice

src/__test__/inMemoryPagination.test.ts

@@ -113,3 +113,17 @@ test('query a property that is not configured, should do nothing', () => {
   expect(result.current.queryParameters.search).toBe('')
   expect(result.current.queryParameters.department).toBeUndefined()
 })
+
+test('query property with empty value and different default value', () => {
+  const { result } = renderHook(() =>
+    useQueryAndPagination({
+      defaultQueryParameters: { search: 'Default search' },
+    })
+  )
+
+  act(() => {
+    result.current.actions.updateQuery({ search: '' })
+  })
+
+  expect(result.current.queryParameters.search).toBe('')
+})

src/__test__/nextRouterPagination.test.tsx

@@ -168,3 +168,18 @@ test('query property with default value, should remove it from url', () => {
   expect(result.current.queryParameters.search).toBe('')
   expect(router.query.search).toBeUndefined()
 })
+
+test('query property with empty value and different default value', () => {
+  const { result } = renderHook(() =>
+    useQueryAndPagination({
+      defaultQueryParameters: { search: 'Default search' },
+    })
+  )
+
+  act(() => {
+    result.current.actions.updateQuery({ search: '' })
+  })
+
+  expect(result.current.queryParameters.search).toBe('')
+  expect(router.query.search).toBe('')
+})

src/__test__/reactRouterPagination.test.tsx

@@ -151,3 +151,20 @@ test('query property with default value, should remove it from url', () => {
   expect(result.current.queryParameters.search).toBe('')
   expect(window.location.search).toBe('')
 })
+
+test('query property with empty value and different default value', () => {
+  const { result } = renderHook(
+    () =>
+      useQueryAndPagination({
+        defaultQueryParameters: { search: 'Default search' },
+      }),
+    { wrapper }
+  )
+
+  act(() => {
+    result.current.actions.updateQuery({ search: '' })
+  })
+
+  expect(result.current.queryParameters.search).toBe('')
+  expect(window.location.search).toBe('?search=')
+})

src/nextRouterPagination.tsx

@@ -22,11 +22,10 @@ function extractCurrentQueryParameters(
   const result: QueryParameters = { ...defaultQueryParameters }
 
   for (const parameter in defaultQueryParameters) {
-    if (
-      query[parameter] &&
-      getSingleParameterValue(query[parameter]) !== undefined
-    ) {
-      result[parameter] = getSingleParameterValue(query[parameter]) as string
+    const queryParameter = getSingleParameterValue(query[parameter])
+
+    if (typeof queryParameter !== 'undefined') {
+      result[parameter] = queryParameter
     }
   }
 

src/reactRouterPagination.tsx

@@ -15,8 +15,10 @@ function extractCurrentQueryParameters(
   const result: QueryParameters = { ...defaultQueryParameters }
 
   for (const parameter in defaultQueryParameters) {
-    if (query.get(parameter)) {
-      result[parameter] = query.get(parameter) as string
+    const queryParameter = query.get(parameter)
+
+    if (queryParameter !== null) {
+      result[parameter] = queryParameter
     }
   }