Skip to content

Commit 9a19a34

Browse files
mmalfertheinermmalfertheiner
committed
refactor -> remove pagination and search only hooks as they are not needed
1 parent 74ed477 commit 9a19a34

7 files changed

Lines changed: 79 additions & 124 deletions

‎src/__test__/inMemoryPagination.test.ts‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ test('should change page', () => {
1313
const { result } = renderHook(() => useSearchAndPagination())
1414

1515
act(() => {
16-
result.current.paginationActions.setPage(2)
16+
result.current.actions.setPage(2)
1717
})
1818

1919
expect(result.current.page).toBe(2)
@@ -23,7 +23,7 @@ test('should change search', () => {
2323
const { result } = renderHook(() => useSearchAndPagination())
2424

2525
act(() => {
26-
result.current.searchActions.search('Max')
26+
result.current.actions.search('Max')
2727
})
2828

2929
expect(result.current.search).toBe('Max')
@@ -33,13 +33,13 @@ test('on search change -> page should be reset', () => {
3333
const { result } = renderHook(() => useSearchAndPagination())
3434

3535
act(() => {
36-
result.current.paginationActions.setPage(2)
36+
result.current.actions.setPage(2)
3737
})
3838

3939
expect(result.current.page).toBe(2)
4040

4141
act(() => {
42-
result.current.searchActions.search('Max')
42+
result.current.actions.search('Max')
4343
})
4444

4545
expect(result.current.search).toBe('Max')
@@ -50,18 +50,18 @@ test('clear pagination should reset search and page', () => {
5050
const { result } = renderHook(() => useSearchAndPagination())
5151

5252
act(() => {
53-
result.current.searchActions.search('Max')
53+
result.current.actions.search('Max')
5454
})
5555

5656
act(() => {
57-
result.current.paginationActions.setPage(2)
57+
result.current.actions.setPage(2)
5858
})
5959

6060
expect(result.current.search).toBe('Max')
6161
expect(result.current.page).toBe(2)
6262

6363
act(() => {
64-
result.current.searchActions.clear()
64+
result.current.actions.clear()
6565
})
6666

6767
expect(result.current.search).toBe('')

‎src/__test__/nextRouterPagination.test.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ test('should change page', () => {
1919
const { result } = renderHook(() => useSearchAndPagination())
2020

2121
act(() => {
22-
result.current.paginationActions.setPage(2)
22+
result.current.actions.setPage(2)
2323
})
2424

2525
expect(result.current.page).toBe(2)
@@ -30,7 +30,7 @@ test('should change search', () => {
3030
const { result } = renderHook(() => useSearchAndPagination())
3131

3232
act(() => {
33-
result.current.searchActions.search('Max')
33+
result.current.actions.search('Max')
3434
})
3535

3636
expect(result.current.search).toBe('Max')
@@ -41,14 +41,14 @@ test('on search change -> page should be reset', () => {
4141
const { result } = renderHook(() => useSearchAndPagination())
4242

4343
act(() => {
44-
result.current.paginationActions.setPage(2)
44+
result.current.actions.setPage(2)
4545
})
4646

4747
expect(result.current.page).toBe(2)
4848
expect(router.query.page).toBe('2')
4949

5050
act(() => {
51-
result.current.searchActions.search('Max')
51+
result.current.actions.search('Max')
5252
})
5353

5454
expect(result.current.search).toBe('Max')
@@ -61,18 +61,18 @@ test('clear pagination should reset search and page', () => {
6161
const { result } = renderHook(() => useSearchAndPagination())
6262

6363
act(() => {
64-
result.current.searchActions.search('Max')
64+
result.current.actions.search('Max')
6565
})
6666

6767
act(() => {
68-
result.current.paginationActions.setPage(2)
68+
result.current.actions.setPage(2)
6969
})
7070

7171
expect(router.query.search).toBe('Max')
7272
expect(router.query.page).toBe('2')
7373

7474
act(() => {
75-
result.current.searchActions.clear()
75+
result.current.actions.clear()
7676
})
7777

7878
expect(result.current.search).toBe('')

‎src/__test__/reactRouterPagination.test.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ test('should change page', () => {
1717
const { result } = renderHook(() => useSearchAndPagination(), { wrapper })
1818

1919
act(() => {
20-
result.current.paginationActions.setPage(2)
20+
result.current.actions.setPage(2)
2121
})
2222

2323
expect(result.current.page).toBe(2)
@@ -28,7 +28,7 @@ test('should change search', () => {
2828
const { result } = renderHook(() => useSearchAndPagination(), { wrapper })
2929

3030
act(() => {
31-
result.current.searchActions.search('Max')
31+
result.current.actions.search('Max')
3232
})
3333

3434
expect(result.current.search).toBe('Max')
@@ -39,13 +39,13 @@ test('on search change -> page should be reset', () => {
3939
const { result } = renderHook(() => useSearchAndPagination(), { wrapper })
4040

4141
act(() => {
42-
result.current.paginationActions.setPage(2)
42+
result.current.actions.setPage(2)
4343
})
4444

4545
expect(result.current.page).toBe(2)
4646

4747
act(() => {
48-
result.current.searchActions.search('Max')
48+
result.current.actions.search('Max')
4949
})
5050

5151
expect(result.current.search).toBe('Max')
@@ -57,18 +57,18 @@ test('clear pagination should reset search and page', () => {
5757
const { result } = renderHook(() => useSearchAndPagination(), { wrapper })
5858

5959
act(() => {
60-
result.current.searchActions.search('Max')
60+
result.current.actions.search('Max')
6161
})
6262

6363
act(() => {
64-
result.current.paginationActions.setPage(2)
64+
result.current.actions.setPage(2)
6565
})
6666

6767
expect(result.current.search).toBe('Max')
6868
expect(result.current.page).toBe(2)
6969

7070
act(() => {
71-
result.current.searchActions.clear()
71+
result.current.actions.clear()
7272
})
7373

7474
expect(result.current.search).toBe('')

‎src/inMemoryPagination.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,13 +40,13 @@ const useSearchAndPagination = (): UseSearchAndPagination => {
4040

4141
return {
4242
search: state.searchQuery,
43-
searchActions: {
43+
actions: {
4444
search,
4545
clear,
46+
setPage,
4647
},
4748
page: state.page,
4849
size: state.size,
49-
paginationActions: { setPage },
5050
}
5151
}
5252

‎src/nextRouterPagination.tsx‎

Lines changed: 37 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useRouter } from 'next/router'
22
import { useCallback } from 'react'
33

4-
import { UseSearchQuery, UsePagination, UseSearchAndPagination } from './types'
4+
import { UseSearchAndPagination } from './types'
55
import { convert } from './utils'
66

77
function getSingleParameterValue(
@@ -10,43 +10,7 @@ function getSingleParameterValue(
1010
return Array.isArray(parameter) ? parameter[0] : parameter
1111
}
1212

13-
export function useSearch(): UseSearchQuery {
14-
const router = useRouter()
15-
16-
return {
17-
search: getSingleParameterValue(router.query.search) || '',
18-
searchActions: {
19-
search: (query: string) => {
20-
const params: { page?: string; size?: string; search?: string } = {
21-
...router.query,
22-
search: query === '' ? undefined : query,
23-
}
24-
25-
delete params['page']
26-
delete params['size']
27-
28-
router.push({
29-
query: params,
30-
})
31-
},
32-
clear: () => {
33-
const params = {
34-
...router.query,
35-
}
36-
37-
delete params['search']
38-
delete params['page']
39-
delete params['size']
40-
41-
router.push({
42-
query: params,
43-
})
44-
},
45-
},
46-
}
47-
}
48-
49-
export function usePagination(): UsePagination {
13+
export function useSearchAndPagination(): UseSearchAndPagination {
5014
const router = useRouter()
5115

5216
const setPage = useCallback(
@@ -63,21 +27,45 @@ export function usePagination(): UsePagination {
6327
[router]
6428
)
6529

30+
const search = useCallback(
31+
(query: string) => {
32+
const params: { page?: string; size?: string; search?: string } = {
33+
...router.query,
34+
search: query === '' ? undefined : query,
35+
}
36+
37+
delete params['page']
38+
delete params['size']
39+
40+
router.push({
41+
query: params,
42+
})
43+
},
44+
[router]
45+
)
46+
47+
const clear = useCallback(() => {
48+
const params = {
49+
...router.query,
50+
}
51+
52+
delete params['search']
53+
delete params['page']
54+
delete params['size']
55+
56+
router.push({
57+
query: params,
58+
})
59+
}, [router])
60+
6661
return {
62+
search: getSingleParameterValue(router.query.search) || '',
6763
page: convert(getSingleParameterValue(router.query.page) || null, 0),
6864
size: convert(getSingleParameterValue(router.query.size) || null, 15),
69-
paginationActions: {
65+
actions: {
66+
search,
67+
clear,
7068
setPage,
7169
},
7270
}
7371
}
74-
75-
export function useSearchAndPagination(): UseSearchAndPagination {
76-
const searchParameters = useSearch()
77-
const paginationParameters = usePagination()
78-
79-
return {
80-
...searchParameters,
81-
...paginationParameters,
82-
}
83-
}

‎src/reactRouterPagination.tsx‎

Lines changed: 13 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import { useCallback, useMemo } from 'react'
1+
import { useMemo } from 'react'
22
import { useHistory, useLocation, useRouteMatch } from 'react-router-dom'
33

4-
import { UseSearchQuery, UsePagination, UseSearchAndPagination } from './types'
4+
import { UseSearchAndPagination } from './types'
55
import { convert } from './utils'
66

7-
export function useSearch(): UseSearchQuery {
7+
export function useSearchAndPagination(): UseSearchAndPagination {
88
const routerHistory = useHistory()
99
const { url: routerUrl } = useRouteMatch()
1010
const { search: routeQuery } = useLocation()
@@ -13,7 +13,9 @@ export function useSearch(): UseSearchQuery {
1313

1414
return {
1515
search: params.get('search') || '',
16-
searchActions: {
16+
page: convert(params.get('page'), 0),
17+
size: convert(params.get('size'), 15),
18+
actions: {
1719
search: (query: string) => {
1820
if (query === '') {
1921
params.delete('search')
@@ -38,43 +40,13 @@ export function useSearch(): UseSearchQuery {
3840
search: params.toString(),
3941
})
4042
},
43+
setPage: (page: number) => {
44+
params.set('page', page.toString())
45+
routerHistory.push({
46+
pathname: routerUrl,
47+
search: params.toString(),
48+
})
49+
},
4150
},
4251
}
4352
}
44-
45-
export function usePagination(): UsePagination {
46-
const routerHistory = useHistory()
47-
const { search: routeQuery } = useLocation()
48-
const { url: routerUrl } = useRouteMatch()
49-
50-
const params = useMemo(() => new URLSearchParams(routeQuery), [routeQuery])
51-
52-
const setPage = useCallback(
53-
(page: number) => {
54-
params.set('page', page.toString())
55-
routerHistory.push({
56-
pathname: routerUrl,
57-
search: params.toString(),
58-
})
59-
},
60-
[params, routerHistory, routerUrl]
61-
)
62-
63-
return {
64-
page: convert(params.get('page'), 0),
65-
size: convert(params.get('size'), 15),
66-
paginationActions: {
67-
setPage,
68-
},
69-
}
70-
}
71-
72-
export function useSearchAndPagination(): UseSearchAndPagination {
73-
const searchParameters = useSearch()
74-
const paginationParameters = usePagination()
75-
76-
return {
77-
...searchParameters,
78-
...paginationParameters,
79-
}
80-
}

‎src/types.ts‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,10 @@
1-
export type UseSearchQuery = {
1+
export type UseSearchAndPagination = {
22
search: string
3-
searchActions: { search: (query: string) => void; clear: () => void }
4-
}
5-
6-
export type UsePagination = {
73
page: number
84
size: number
9-
} & PaginationActions
10-
11-
export type PaginationActions = {
12-
paginationActions: { setPage: (page: number) => void }
5+
actions: {
6+
search: (query: string) => void
7+
clear: () => void
8+
setPage: (page: number) => void
9+
}
1310
}
14-
15-
export type UseSearchAndPagination = UseSearchQuery & UsePagination

0 commit comments

Comments
 (0)