Skip to content

Commit e71e2d3

Browse files
author
devgioele
committed
add options to pagination and routers, add replace history flag to react router and next router
1 parent a72d134 commit e71e2d3

4 files changed

Lines changed: 87 additions & 25 deletions

File tree

‎src/engine/pagination.ts‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
ParseQuery,
66
useAbstractQuery,
77
Router,
8+
AbstractQueryOptions,
89
} from './query'
910

1011
export type PaginationQuery = { page: number; size: number }
@@ -29,7 +30,8 @@ export const useAbstractQueryAndPagination = <T extends AbstractQuery>(
2930
defaultQuery: T,
3031
parseQuery: ParseQuery<T>,
3132
router: Router,
32-
defaultPagination?: PaginationQuery
33+
defaultPagination?: PaginationQuery,
34+
options?: Partial<AbstractQueryOptions>
3335
) => {
3436
const mergedDefaultPagination = {
3537
...DEFAULT_PAGINATION,
@@ -43,14 +45,20 @@ export const useAbstractQueryAndPagination = <T extends AbstractQuery>(
4345
const { query, setQuery } = useAbstractQuery(
4446
mergedDefaultQueryAndPagination,
4547
parseQuery,
46-
router
48+
router,
49+
options
4750
)
4851

4952
const {
5053
query: pagination,
5154
setQuery: setPagination,
5255
resetQuery: resetPagination,
53-
} = useAbstractQuery(mergedDefaultPagination, parsePagination, router)
56+
} = useAbstractQuery(
57+
mergedDefaultPagination,
58+
parsePagination,
59+
router,
60+
options
61+
)
5462

5563
return {
5664
query,

‎src/routers/inMemory.ts‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -41,19 +41,24 @@ export const useQuery = <T extends AbstractQuery>(
4141
export const useQueryAndPagination = <T extends AbstractQuery>(
4242
defaultQuery: T,
4343
parseQuery: ParseQuery<T>,
44-
defaultPagination?: PaginationQuery
44+
defaultPagination?: PaginationQuery,
45+
options?: Partial<AbstractQueryOptions>
4546
) => {
4647
const router = useInMemoryRouter()
4748
return useAbstractQueryAndPagination(
4849
defaultQuery,
4950
parseQuery,
5051
router,
51-
defaultPagination
52+
defaultPagination,
53+
options
5254
)
5355
}
5456

55-
export const usePagination = (defaultPagination?: PaginationQuery) => {
57+
export const usePagination = (
58+
defaultPagination?: PaginationQuery,
59+
options?: Partial<AbstractQueryOptions>
60+
) => {
5661
const { page, size, setPage, setSize, setPagination, resetPagination } =
57-
useQueryAndPagination({}, () => ({}), defaultPagination)
62+
useQueryAndPagination({}, () => ({}), defaultPagination, options)
5863
return { page, size, setPage, setSize, setPagination, resetPagination }
5964
}

‎src/routers/nextRouter.ts‎

Lines changed: 34 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { useRouter } from 'next/router'
2+
import { useMemo } from 'react'
23
import {
34
Query,
45
ParseQuery,
@@ -12,9 +13,24 @@ import {
1213
useAbstractQueryAndPagination,
1314
} from '../engine/pagination'
1415

15-
const useNextRouter = (): Router => {
16+
export type NextRouterOptions = {
17+
setQueryMethod: 'replace' | 'push'
18+
}
19+
20+
const DEFAULT_NEXT_ROUTER_OPTIONS: NextRouterOptions = {
21+
setQueryMethod: 'replace',
22+
}
23+
24+
const useNextRouter = (
25+
options: undefined | Partial<NextRouterOptions>
26+
): Router => {
1627
const nextRouter = useRouter()
1728

29+
const mergedOptions = useMemo(
30+
() => ({ ...DEFAULT_NEXT_ROUTER_OPTIONS, ...options }),
31+
[options]
32+
)
33+
1834
return {
1935
getQuery: (defaultQuery) => {
2036
const query: Query = {}
@@ -32,36 +48,45 @@ const useNextRouter = (): Router => {
3248
delete newQuery[key]
3349
}
3450
}
35-
nextRouter.push({ query: newQuery }, undefined, { shallow: true })
51+
if (mergedOptions.setQueryMethod === 'push') {
52+
nextRouter.push({ query: newQuery }, undefined, { shallow: true })
53+
} else {
54+
nextRouter.replace({ query: newQuery }, undefined, { shallow: true })
55+
}
3656
},
3757
}
3858
}
3959

4060
export const useQuery = <T extends AbstractQuery>(
4161
defaultQuery: T,
4262
parseQuery: ParseQuery<T>,
43-
options?: Partial<AbstractQueryOptions>
63+
options?: Partial<AbstractQueryOptions & NextRouterOptions>
4464
) => {
45-
const router = useNextRouter()
65+
const router = useNextRouter(options)
4666
return useAbstractQuery(defaultQuery, parseQuery, router, options)
4767
}
4868

4969
export const useQueryAndPagination = <T extends AbstractQuery>(
5070
defaultQuery: T,
5171
parseQuery: ParseQuery<T>,
52-
defaultPagination?: PaginationQuery
72+
defaultPagination?: PaginationQuery,
73+
options?: Partial<AbstractQueryOptions & NextRouterOptions>
5374
) => {
54-
const router = useNextRouter()
75+
const router = useNextRouter(options)
5576
return useAbstractQueryAndPagination(
5677
defaultQuery,
5778
parseQuery,
5879
router,
59-
defaultPagination
80+
defaultPagination,
81+
options
6082
)
6183
}
6284

63-
export const usePagination = (defaultPagination?: PaginationQuery) => {
85+
export const usePagination = (
86+
defaultPagination?: PaginationQuery,
87+
options?: Partial<AbstractQueryOptions & NextRouterOptions>
88+
) => {
6489
const { page, size, setPage, setSize, setPagination, resetPagination } =
65-
useQueryAndPagination({}, () => ({}), defaultPagination)
90+
useQueryAndPagination({}, () => ({}), defaultPagination, options)
6691
return { page, size, setPage, setSize, setPagination, resetPagination }
6792
}

‎src/routers/reactRouter.ts‎

Lines changed: 33 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { useLocation, useNavigate } from 'react-router-dom'
2+
import { useMemo } from 'react'
23
import {
34
Query,
45
AbstractQuery,
@@ -12,10 +13,25 @@ import {
1213

1314
const QUERY_ARRAY_SEPARATOR = ','
1415

15-
const useReactRouter = (): Router => {
16+
export type ReactRouterOptions = {
17+
setQueryMethod: 'replace' | 'push'
18+
}
19+
20+
const DEFAULT_REACT_ROUTER_OPTIONS: ReactRouterOptions = {
21+
setQueryMethod: 'replace',
22+
}
23+
24+
const useReactRouter = (
25+
options: undefined | Partial<ReactRouterOptions>
26+
): Router => {
1627
const navigate = useNavigate()
1728
const { pathname, search } = useLocation()
1829

30+
const mergedOptions = useMemo(
31+
() => ({ ...DEFAULT_REACT_ROUTER_OPTIONS, ...options }),
32+
[options]
33+
)
34+
1935
return {
2036
getQuery: (defaultQuery) => {
2137
const query: Query = {}
@@ -48,36 +64,44 @@ const useReactRouter = (): Router => {
4864
urlSearchParams.set(key, encodedValues)
4965
}
5066
}
51-
navigate({ pathname, search: urlSearchParams.toString() })
67+
navigate(
68+
{ pathname, search: urlSearchParams.toString() },
69+
{ replace: mergedOptions.setQueryMethod === 'replace' }
70+
)
5271
},
5372
}
5473
}
5574

5675
export const useQuery = <T extends AbstractQuery>(
5776
defaultQuery: T,
5877
parseQuery: ParseQuery<T>,
59-
options?: Partial<AbstractQueryOptions>
78+
options?: Partial<AbstractQueryOptions & ReactRouterOptions>
6079
) => {
61-
const router = useReactRouter()
80+
const router = useReactRouter(options)
6281
return useAbstractQuery(defaultQuery, parseQuery, router, options)
6382
}
6483

6584
export const useQueryAndPagination = <T extends AbstractQuery>(
6685
defaultQuery: T,
6786
parseQuery: ParseQuery<T>,
68-
defaultPagination?: PaginationQuery
87+
defaultPagination?: PaginationQuery,
88+
options?: Partial<AbstractQueryOptions & ReactRouterOptions>
6989
) => {
70-
const router = useReactRouter()
90+
const router = useReactRouter(options)
7191
return useAbstractQueryAndPagination(
7292
defaultQuery,
7393
parseQuery,
7494
router,
75-
defaultPagination
95+
defaultPagination,
96+
options
7697
)
7798
}
7899

79-
export const usePagination = (defaultPagination?: PaginationQuery) => {
100+
export const usePagination = (
101+
defaultPagination?: PaginationQuery,
102+
options?: Partial<AbstractQueryOptions & ReactRouterOptions>
103+
) => {
80104
const { page, size, setPage, setSize, setPagination, resetPagination } =
81-
useQueryAndPagination({}, () => ({}), defaultPagination)
105+
useQueryAndPagination({}, () => ({}), defaultPagination, options)
82106
return { page, size, setPage, setSize, setPagination, resetPagination }
83107
}

0 commit comments

Comments
 (0)