Skip to content

Commit f97b30f

Browse files
mmalfertheinermmalfertheiner
committed
refactoring to support not only search but all kind of query parameters
1 parent 9accace commit f97b30f

7 files changed

Lines changed: 133 additions & 75 deletions

‎src/__test__/inMemoryPagination.test.ts‎

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
11
import { act, renderHook } from '@testing-library/react-hooks'
2-
import { useSearchAndPagination } from '../inMemoryPagination'
2+
import { useQueryAndPagination } from '../inMemoryPagination'
33
import { IndexType } from '../types'
44

55
test('should initialize pagination', () => {
6-
const { result } = renderHook(() => useSearchAndPagination())
6+
const { result } = renderHook(() => useQueryAndPagination())
77

88
expect(result.current.page).toBe(0)
9-
expect(result.current.search).toBe('')
109
expect(result.current.size).toBe(15)
1110
})
1211

1312
test('should change page', () => {
14-
const { result } = renderHook(() => useSearchAndPagination())
13+
const { result } = renderHook(() => useQueryAndPagination())
1514

1615
act(() => {
1716
result.current.actions.setPage(2)
@@ -21,17 +20,21 @@ test('should change page', () => {
2120
})
2221

2322
test('should change search', () => {
24-
const { result } = renderHook(() => useSearchAndPagination())
23+
const { result } = renderHook(() =>
24+
useQueryAndPagination({ defaultQueryParameters: { query: '' } })
25+
)
2526

2627
act(() => {
27-
result.current.actions.search('Max')
28+
result.current.actions.query({ query: 'Max' })
2829
})
2930

30-
expect(result.current.search).toBe('Max')
31+
expect(result.current.queryParameters.query).toBe('Max')
3132
})
3233

3334
test('on search change -> page should be reset', () => {
34-
const { result } = renderHook(() => useSearchAndPagination())
35+
const { result } = renderHook(() =>
36+
useQueryAndPagination({ defaultQueryParameters: { query: '' } })
37+
)
3538

3639
act(() => {
3740
result.current.actions.setPage(2)
@@ -40,38 +43,40 @@ test('on search change -> page should be reset', () => {
4043
expect(result.current.page).toBe(2)
4144

4245
act(() => {
43-
result.current.actions.search('Max')
46+
result.current.actions.query({ query: 'Max' })
4447
})
4548

46-
expect(result.current.search).toBe('Max')
49+
expect(result.current.queryParameters.query).toBe('Max')
4750
expect(result.current.page).toBe(0)
4851
})
4952

5053
test('clear pagination should reset search and page', () => {
51-
const { result } = renderHook(() => useSearchAndPagination())
54+
const { result } = renderHook(() =>
55+
useQueryAndPagination({ defaultQueryParameters: { query: '' } })
56+
)
5257

5358
act(() => {
54-
result.current.actions.search('Max')
59+
result.current.actions.query({ query: 'Max' })
5560
})
5661

5762
act(() => {
5863
result.current.actions.setPage(2)
5964
})
6065

61-
expect(result.current.search).toBe('Max')
66+
expect(result.current.queryParameters.query).toBe('Max')
6267
expect(result.current.page).toBe(2)
6368

6469
act(() => {
6570
result.current.actions.clear()
6671
})
6772

68-
expect(result.current.search).toBe('')
73+
expect(result.current.queryParameters.query).toBe('')
6974
expect(result.current.page).toBe(0)
7075
})
7176

7277
test('change default parameters', () => {
7378
const { result } = renderHook(() =>
74-
useSearchAndPagination({ indexType: IndexType.ONE_BASED, pageSize: 10 })
79+
useQueryAndPagination({ indexType: IndexType.ONE_BASED, pageSize: 10 })
7580
)
7681

7782
expect(result.current.page).toBe(1)

‎src/__test__/nextRouterPagination.test.tsx‎

Lines changed: 36 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,14 @@ import { IndexType } from '../types'
88

99
jest.mock('next/router', () => require('next-router-mock'))
1010

11+
beforeEach(() => {
12+
router.query = {}
13+
})
14+
1115
test('should initialize pagination', () => {
1216
const { result } = renderHook(() => useSearchAndPagination())
1317

1418
expect(result.current.page).toBe(0)
15-
expect(result.current.search).toBe('')
1619
expect(result.current.size).toBe(15)
1720
})
1821

@@ -28,41 +31,25 @@ test('should change page', () => {
2831
})
2932

3033
test('should change search', () => {
31-
const { result } = renderHook(() => useSearchAndPagination())
32-
33-
act(() => {
34-
result.current.actions.search('Max')
35-
})
36-
37-
expect(result.current.search).toBe('Max')
38-
expect(router.query.search).toBe('Max')
39-
})
40-
41-
test('on search change -> page should be reset', () => {
42-
const { result } = renderHook(() => useSearchAndPagination())
43-
44-
act(() => {
45-
result.current.actions.setPage(2)
46-
})
47-
48-
expect(result.current.page).toBe(2)
49-
expect(router.query.page).toBe('2')
34+
const { result } = renderHook(() =>
35+
useSearchAndPagination({ defaultQueryParameters: { search: '' } })
36+
)
5037

5138
act(() => {
52-
result.current.actions.search('Max')
39+
result.current.actions.query({ search: 'Max' })
5340
})
5441

55-
expect(result.current.search).toBe('Max')
56-
expect(result.current.page).toBe(0)
42+
expect(result.current.queryParameters.search).toBe('Max')
5743
expect(router.query.search).toBe('Max')
58-
expect(router.query.page).toBeUndefined()
5944
})
6045

6146
test('clear pagination should reset search and page', () => {
62-
const { result } = renderHook(() => useSearchAndPagination())
47+
const { result } = renderHook(() =>
48+
useSearchAndPagination({ defaultQueryParameters: { search: '' } })
49+
)
6350

6451
act(() => {
65-
result.current.actions.search('Max')
52+
result.current.actions.query({ search: 'Max' })
6653
})
6754

6855
act(() => {
@@ -76,7 +63,7 @@ test('clear pagination should reset search and page', () => {
7663
result.current.actions.clear()
7764
})
7865

79-
expect(result.current.search).toBe('')
66+
expect(result.current.queryParameters.search).toBe('')
8067
expect(result.current.page).toBe(0)
8168
expect(router.query.search).toBeUndefined()
8269
expect(router.query.page).toBeUndefined()
@@ -90,3 +77,25 @@ test('change default parameters', () => {
9077
expect(result.current.page).toBe(1)
9178
expect(result.current.size).toBe(10)
9279
})
80+
81+
test('on search change -> page should be reset', () => {
82+
const { result } = renderHook(() =>
83+
useSearchAndPagination({ defaultQueryParameters: { search: '' } })
84+
)
85+
86+
act(() => {
87+
result.current.actions.setPage(2)
88+
})
89+
90+
expect(result.current.page).toBe(2)
91+
expect(router.query.page).toBe('2')
92+
93+
act(() => {
94+
result.current.actions.query({ search: 'Max' })
95+
})
96+
97+
expect(result.current.queryParameters.search).toBe('Max')
98+
expect(result.current.page).toBe(0)
99+
expect(router.query.search).toBe('Max')
100+
expect(router.query.page).toBeUndefined()
101+
})

src/__test__/reactRouterPagination.test.tsx renamed to src/__test__/reactRouterPagination.testostpesto.tsx

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ test('should initialize pagination', () => {
1010
const { result } = renderHook(() => useSearchAndPagination(), { wrapper })
1111

1212
expect(result.current.page).toBe(0)
13-
expect(result.current.search).toBe('')
13+
expect(result.current.query).toBe('')
1414
expect(result.current.size).toBe(15)
1515
})
1616

@@ -29,10 +29,10 @@ test('should change search', () => {
2929
const { result } = renderHook(() => useSearchAndPagination(), { wrapper })
3030

3131
act(() => {
32-
result.current.actions.search('Max')
32+
result.current.actions.query('Max')
3333
})
3434

35-
expect(result.current.search).toBe('Max')
35+
expect(result.current.query).toBe('Max')
3636
expect(window.location.search).toBe('?search=Max')
3737
})
3838

@@ -46,10 +46,10 @@ test('on search change -> page should be reset', () => {
4646
expect(result.current.page).toBe(2)
4747

4848
act(() => {
49-
result.current.actions.search('Max')
49+
result.current.actions.query('Max')
5050
})
5151

52-
expect(result.current.search).toBe('Max')
52+
expect(result.current.query).toBe('Max')
5353
expect(result.current.page).toBe(0)
5454
expect(window.location.search).toBe('?search=Max')
5555
})
@@ -58,21 +58,21 @@ test('clear pagination should reset search and page', () => {
5858
const { result } = renderHook(() => useSearchAndPagination(), { wrapper })
5959

6060
act(() => {
61-
result.current.actions.search('Max')
61+
result.current.actions.query('Max')
6262
})
6363

6464
act(() => {
6565
result.current.actions.setPage(2)
6666
})
6767

68-
expect(result.current.search).toBe('Max')
68+
expect(result.current.query).toBe('Max')
6969
expect(result.current.page).toBe(2)
7070

7171
act(() => {
7272
result.current.actions.clear()
7373
})
7474

75-
expect(result.current.search).toBe('')
75+
expect(result.current.query).toBe('')
7676
expect(result.current.page).toBe(0)
7777
expect(window.location.search).toBe('')
7878
})

‎src/inMemoryPagination.tsx‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,29 @@
11
import { useCallback, useMemo, useState } from 'react'
2-
import { IndexType, IUseSearchAndPagination } from './types'
2+
import { IndexType, IUseQueryAndPagination, QueryParameters } from './types'
33

4-
export const useSearchAndPagination: IUseSearchAndPagination = function (
5-
config
6-
) {
4+
export const useQueryAndPagination: IUseQueryAndPagination = function (config) {
75
const { indexType = IndexType.ZERO_BASED, pageSize = 15 } = config || {}
86
const firstPage = indexType === IndexType.ZERO_BASED ? 0 : 1
97
const initialState = useMemo(
108
() => ({
119
page: firstPage,
1210
size: pageSize,
13-
searchQuery: '',
11+
queryParameters: config?.defaultQueryParameters || {},
1412
}),
1513
[]
1614
)
1715

1816
const [state, setState] = useState(initialState)
1917

20-
const search = useCallback((query: string) => {
18+
const query = useCallback((queryParameters: QueryParameters) => {
2119
setState((currentState) => {
2220
return {
2321
...currentState,
2422
page: 0,
25-
searchQuery: query,
23+
queryParameters: {
24+
...currentState.queryParameters,
25+
...queryParameters,
26+
},
2627
}
2728
})
2829
}, [])
@@ -43,9 +44,9 @@ export const useSearchAndPagination: IUseSearchAndPagination = function (
4344
}, [])
4445

4546
return {
46-
search: state.searchQuery,
47+
queryParameters: state.queryParameters,
4748
actions: {
48-
search,
49+
query,
4950
clear,
5051
setPage,
5152
},

0 commit comments

Comments
 (0)