Skip to content

Commit bcea134

Browse files
mmalfertheinermmalfertheiner
committed
refactoring react-router implementation to new interface
1 parent f97b30f commit bcea134

4 files changed

Lines changed: 73 additions & 53 deletions

File tree

‎src/__test__/nextRouterPagination.test.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import React from 'react'
33
import { act, renderHook } from '@testing-library/react-hooks'
44
import router from 'next/router'
55

6-
import { useSearchAndPagination } from '../nextRouterPagination'
6+
import { useQueryAndPagination } from '../nextRouterPagination'
77
import { IndexType } from '../types'
88

99
jest.mock('next/router', () => require('next-router-mock'))
@@ -13,14 +13,14 @@ beforeEach(() => {
1313
})
1414

1515
test('should initialize pagination', () => {
16-
const { result } = renderHook(() => useSearchAndPagination())
16+
const { result } = renderHook(() => useQueryAndPagination())
1717

1818
expect(result.current.page).toBe(0)
1919
expect(result.current.size).toBe(15)
2020
})
2121

2222
test('should change page', () => {
23-
const { result } = renderHook(() => useSearchAndPagination())
23+
const { result } = renderHook(() => useQueryAndPagination())
2424

2525
act(() => {
2626
result.current.actions.setPage(2)
@@ -32,7 +32,7 @@ test('should change page', () => {
3232

3333
test('should change search', () => {
3434
const { result } = renderHook(() =>
35-
useSearchAndPagination({ defaultQueryParameters: { search: '' } })
35+
useQueryAndPagination({ defaultQueryParameters: { search: '' } })
3636
)
3737

3838
act(() => {
@@ -45,7 +45,7 @@ test('should change search', () => {
4545

4646
test('clear pagination should reset search and page', () => {
4747
const { result } = renderHook(() =>
48-
useSearchAndPagination({ defaultQueryParameters: { search: '' } })
48+
useQueryAndPagination({ defaultQueryParameters: { search: '' } })
4949
)
5050

5151
act(() => {
@@ -71,7 +71,7 @@ test('clear pagination should reset search and page', () => {
7171

7272
test('change default parameters', () => {
7373
const { result } = renderHook(() =>
74-
useSearchAndPagination({ indexType: IndexType.ONE_BASED, pageSize: 10 })
74+
useQueryAndPagination({ indexType: IndexType.ONE_BASED, pageSize: 10 })
7575
)
7676

7777
expect(result.current.page).toBe(1)
@@ -80,7 +80,7 @@ test('change default parameters', () => {
8080

8181
test('on search change -> page should be reset', () => {
8282
const { result } = renderHook(() =>
83-
useSearchAndPagination({ defaultQueryParameters: { search: '' } })
83+
useQueryAndPagination({ defaultQueryParameters: { search: '' } })
8484
)
8585

8686
act(() => {

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

Lines changed: 23 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,23 @@
11
import React from 'react'
22
import { act, renderHook } from '@testing-library/react-hooks'
33
import { BrowserRouter as Router } from 'react-router-dom'
4-
import { useSearchAndPagination } from '../reactRouterPagination'
4+
import { useQueryAndPagination } from '../reactRouterPagination'
55
import { IndexType } from '../types'
6-
76
const wrapper: React.FC = ({ children }) => <Router>{children}</Router>
87

8+
beforeEach(() => {
9+
window.history.pushState({}, '', '/')
10+
})
11+
912
test('should initialize pagination', () => {
10-
const { result } = renderHook(() => useSearchAndPagination(), { wrapper })
13+
const { result } = renderHook(() => useQueryAndPagination(), { wrapper })
1114

1215
expect(result.current.page).toBe(0)
13-
expect(result.current.query).toBe('')
1416
expect(result.current.size).toBe(15)
1517
})
1618

1719
test('should change page', () => {
18-
const { result } = renderHook(() => useSearchAndPagination(), { wrapper })
20+
const { result } = renderHook(() => useQueryAndPagination(), { wrapper })
1921

2022
act(() => {
2123
result.current.actions.setPage(2)
@@ -26,61 +28,51 @@ test('should change page', () => {
2628
})
2729

2830
test('should change search', () => {
29-
const { result } = renderHook(() => useSearchAndPagination(), { wrapper })
30-
31-
act(() => {
32-
result.current.actions.query('Max')
33-
})
34-
35-
expect(result.current.query).toBe('Max')
36-
expect(window.location.search).toBe('?search=Max')
37-
})
38-
39-
test('on search change -> page should be reset', () => {
40-
const { result } = renderHook(() => useSearchAndPagination(), { wrapper })
41-
42-
act(() => {
43-
result.current.actions.setPage(2)
44-
})
45-
46-
expect(result.current.page).toBe(2)
31+
const { result } = renderHook(
32+
() => useQueryAndPagination({ defaultQueryParameters: { search: '' } }),
33+
{ wrapper }
34+
)
4735

4836
act(() => {
49-
result.current.actions.query('Max')
37+
result.current.actions.query({ search: 'Max' })
5038
})
5139

52-
expect(result.current.query).toBe('Max')
53-
expect(result.current.page).toBe(0)
40+
expect(result.current.queryParameters.search).toBe('Max')
5441
expect(window.location.search).toBe('?search=Max')
5542
})
5643

5744
test('clear pagination should reset search and page', () => {
58-
const { result } = renderHook(() => useSearchAndPagination(), { wrapper })
45+
const { result } = renderHook(
46+
() => useQueryAndPagination({ defaultQueryParameters: { search: '' } }),
47+
{ wrapper }
48+
)
49+
50+
console.log(window.location.search)
5951

6052
act(() => {
61-
result.current.actions.query('Max')
53+
result.current.actions.query({ search: 'Max' })
6254
})
6355

6456
act(() => {
6557
result.current.actions.setPage(2)
6658
})
6759

68-
expect(result.current.query).toBe('Max')
60+
expect(result.current.queryParameters.search).toBe('Max')
6961
expect(result.current.page).toBe(2)
7062

7163
act(() => {
7264
result.current.actions.clear()
7365
})
7466

75-
expect(result.current.query).toBe('')
67+
expect(result.current.queryParameters.search).toBe('')
7668
expect(result.current.page).toBe(0)
7769
expect(window.location.search).toBe('')
7870
})
7971

8072
test('change default parameters', () => {
8173
const { result } = renderHook(
8274
() =>
83-
useSearchAndPagination({ indexType: IndexType.ONE_BASED, pageSize: 10 }),
75+
useQueryAndPagination({ indexType: IndexType.ONE_BASED, pageSize: 10 }),
8476
{ wrapper }
8577
)
8678

‎src/nextRouterPagination.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,7 @@ function extractCurrentQueryParameters(
3333
return result
3434
}
3535

36-
export const useSearchAndPagination: IUseQueryAndPagination = function (
37-
config
38-
) {
36+
export const useQueryAndPagination: IUseQueryAndPagination = function (config) {
3937
const { indexType = IndexType.ZERO_BASED, pageSize = 15 } = config || {}
4038
const router = useRouter()
4139

‎src/reactRouterPagination.tsx‎

Lines changed: 42 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,50 @@
11
import { useCallback, useMemo } from 'react'
22
import { useHistory, useLocation, useRouteMatch } from 'react-router-dom'
33

4-
import { IndexType, IUseQueryAndPagination } from './types'
4+
import { IndexType, IUseQueryAndPagination, QueryParameters } from './types'
55
import { convert } from './utils'
66

7-
export const useSearchAndPagination: IUseQueryAndPagination = function (
8-
config
7+
function extractCurrentQueryParameters(
8+
query: URLSearchParams,
9+
defaultQueryParameters?: QueryParameters
910
) {
11+
if (!defaultQueryParameters) {
12+
return {}
13+
}
14+
15+
const result: QueryParameters = defaultQueryParameters
16+
17+
for (const parameter in defaultQueryParameters) {
18+
if (query.get(parameter)) {
19+
result[parameter] = query.get(parameter) as string
20+
}
21+
}
22+
23+
return result
24+
}
25+
26+
export const useQueryAndPagination: IUseQueryAndPagination = function (config) {
1027
const { indexType = IndexType.ZERO_BASED, pageSize = 15 } = config || {}
1128
const routerHistory = useHistory()
1229
const { url: routerUrl } = useRouteMatch()
1330
const { search: routeQuery } = useLocation()
1431

1532
const params = useMemo(() => new URLSearchParams(routeQuery), [routeQuery])
1633

17-
const search = useCallback(
18-
(query: string) => {
19-
if (query === '') {
20-
params.delete('search')
21-
} else {
22-
params.set('search', query)
34+
const query = useCallback(
35+
(queryParameters: QueryParameters) => {
36+
for (const parameter in queryParameters) {
37+
if (
38+
config?.defaultQueryParameters &&
39+
config.defaultQueryParameters[parameter] ===
40+
queryParameters[parameter]
41+
) {
42+
params.delete(parameter)
43+
} else {
44+
params.set(parameter, queryParameters[parameter].toString())
45+
}
2346
}
47+
2448
params.delete('page')
2549
params.delete('size')
2650

@@ -33,7 +57,10 @@ export const useSearchAndPagination: IUseQueryAndPagination = function (
3357
)
3458

3559
const clear = useCallback(() => {
36-
params.delete('search')
60+
for (const parameter in config?.defaultQueryParameters) {
61+
params.delete(parameter)
62+
}
63+
3764
params.delete('page')
3865
params.delete('size')
3966

@@ -55,14 +82,17 @@ export const useSearchAndPagination: IUseQueryAndPagination = function (
5582
)
5683

5784
return {
58-
search: params.get('search') || '',
85+
queryParameters: extractCurrentQueryParameters(
86+
params,
87+
config?.defaultQueryParameters
88+
),
5989
page: convert(
6090
params.get('page'),
6191
indexType === IndexType.ZERO_BASED ? 0 : 1
6292
),
6393
size: convert(params.get('size'), pageSize),
6494
actions: {
65-
search,
95+
query,
6696
clear,
6797
setPage,
6898
},

0 commit comments

Comments
 (0)