From 68328db3482d1e2004f03b861d464fdd3dca4e55 Mon Sep 17 00:00:00 2001 From: Hochrainer Christof Date: Wed, 7 Aug 2024 14:36:27 +0200 Subject: [PATCH 1/5] fix usePagination --- src/engine/pagination.ts | 2 +- src/routers/inMemory.ts | 10 ++++++++-- src/routers/nextRouter.ts | 21 +++++++++++---------- src/routers/reactRouter.ts | 10 ++++++++-- 4 files changed, 28 insertions(+), 15 deletions(-) diff --git a/src/engine/pagination.ts b/src/engine/pagination.ts index 6c09abd..b64feec 100644 --- a/src/engine/pagination.ts +++ b/src/engine/pagination.ts @@ -52,7 +52,7 @@ export const useAbstractQueryAndPagination = < TDefaultQuery extends Partial, >( router: Router, - parseQuery: ParseQuery, + parseQuery: ParseQuery = () => ({}) , defaultQuery: TDefaultQuery = {} as TDefaultQuery, defaultPagination?: Partial, options?: Partial, diff --git a/src/routers/inMemory.ts b/src/routers/inMemory.ts index 780862a..d4ece97 100644 --- a/src/routers/inMemory.ts +++ b/src/routers/inMemory.ts @@ -77,7 +77,13 @@ export const usePagination = ( defaultPagination?: Partial, options?: Partial, ) => { - const { page, size, setPage, setSize, setPagination, resetPagination } = - useQueryAndPagination(() => ({}), {}, defaultPagination, options) + const router = useInMemoryRouter() + const { page, size, setPage, setSize, setPagination, resetPagination } = useAbstractQueryAndPagination( + router, + undefined, + undefined, + defaultPagination, + options, + ) return { page, size, setPage, setSize, setPagination, resetPagination } } diff --git a/src/routers/nextRouter.ts b/src/routers/nextRouter.ts index 2e0cc78..39217ce 100644 --- a/src/routers/nextRouter.ts +++ b/src/routers/nextRouter.ts @@ -102,18 +102,19 @@ export const useQueryAndPagination = < ) } + export const usePagination = ( defaultPagination?: Partial, options?: Partial, ) => { - const { page, size, setPage, setSize, setPagination, resetPagination } = - useQueryAndPagination(() => ({}), {}, defaultPagination, options) - return { - page, - size, - setPage, - setSize, - setPagination, - resetPagination, - } + const router = useNextRouter(options) + const { page, size, setPage, setSize, setPagination, resetPagination } = useAbstractQueryAndPagination( + router, + undefined, + undefined, + defaultPagination, + options, + ) + return { page, size, setPage, setSize, setPagination, resetPagination } } + diff --git a/src/routers/reactRouter.ts b/src/routers/reactRouter.ts index f522102..c7aaa36 100644 --- a/src/routers/reactRouter.ts +++ b/src/routers/reactRouter.ts @@ -119,7 +119,13 @@ export const usePagination = ( defaultPagination?: Partial, options?: Partial, ) => { - const { page, size, setPage, setSize, setPagination, resetPagination } = - useQueryAndPagination(() => ({}), {}, defaultPagination, options) + const router = useReactRouter(options) + const { page, size, setPage, setSize, setPagination, resetPagination } = useAbstractQueryAndPagination( + router, + undefined, + undefined, + defaultPagination, + options, + ) return { page, size, setPage, setSize, setPagination, resetPagination } } From b0c7d7048112af014f73c5bad8be3d4f18e03df1 Mon Sep 17 00:00:00 2001 From: Hochrainer Christof Date: Wed, 7 Aug 2024 14:36:44 +0200 Subject: [PATCH 2/5] fix prettier error --- src/engine/pagination.ts | 2 +- src/routers/inMemory.ts | 15 ++++++++------- src/routers/nextRouter.ts | 17 ++++++++--------- src/routers/reactRouter.ts | 15 ++++++++------- 4 files changed, 25 insertions(+), 24 deletions(-) diff --git a/src/engine/pagination.ts b/src/engine/pagination.ts index b64feec..2b62b11 100644 --- a/src/engine/pagination.ts +++ b/src/engine/pagination.ts @@ -52,7 +52,7 @@ export const useAbstractQueryAndPagination = < TDefaultQuery extends Partial, >( router: Router, - parseQuery: ParseQuery = () => ({}) , + parseQuery: ParseQuery = () => ({}), defaultQuery: TDefaultQuery = {} as TDefaultQuery, defaultPagination?: Partial, options?: Partial, diff --git a/src/routers/inMemory.ts b/src/routers/inMemory.ts index d4ece97..9f9b3e5 100644 --- a/src/routers/inMemory.ts +++ b/src/routers/inMemory.ts @@ -78,12 +78,13 @@ export const usePagination = ( options?: Partial, ) => { const router = useInMemoryRouter() - const { page, size, setPage, setSize, setPagination, resetPagination } = useAbstractQueryAndPagination( - router, - undefined, - undefined, - defaultPagination, - options, - ) + const { page, size, setPage, setSize, setPagination, resetPagination } = + useAbstractQueryAndPagination( + router, + undefined, + undefined, + defaultPagination, + options, + ) return { page, size, setPage, setSize, setPagination, resetPagination } } diff --git a/src/routers/nextRouter.ts b/src/routers/nextRouter.ts index 39217ce..dc97a40 100644 --- a/src/routers/nextRouter.ts +++ b/src/routers/nextRouter.ts @@ -102,19 +102,18 @@ export const useQueryAndPagination = < ) } - export const usePagination = ( defaultPagination?: Partial, options?: Partial, ) => { const router = useNextRouter(options) - const { page, size, setPage, setSize, setPagination, resetPagination } = useAbstractQueryAndPagination( - router, - undefined, - undefined, - defaultPagination, - options, - ) + const { page, size, setPage, setSize, setPagination, resetPagination } = + useAbstractQueryAndPagination( + router, + undefined, + undefined, + defaultPagination, + options, + ) return { page, size, setPage, setSize, setPagination, resetPagination } } - diff --git a/src/routers/reactRouter.ts b/src/routers/reactRouter.ts index c7aaa36..a232109 100644 --- a/src/routers/reactRouter.ts +++ b/src/routers/reactRouter.ts @@ -120,12 +120,13 @@ export const usePagination = ( options?: Partial, ) => { const router = useReactRouter(options) - const { page, size, setPage, setSize, setPagination, resetPagination } = useAbstractQueryAndPagination( - router, - undefined, - undefined, - defaultPagination, - options, - ) + const { page, size, setPage, setSize, setPagination, resetPagination } = + useAbstractQueryAndPagination( + router, + undefined, + undefined, + defaultPagination, + options, + ) return { page, size, setPage, setSize, setPagination, resetPagination } } From 5ababf7fa34f5fd8c4e276f85aec5ff472f6d47a Mon Sep 17 00:00:00 2001 From: Hochrainer Christof Date: Wed, 7 Aug 2024 14:59:10 +0200 Subject: [PATCH 3/5] fix undefined error --- src/engine/pagination.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/engine/pagination.ts b/src/engine/pagination.ts index 2b62b11..deaac10 100644 --- a/src/engine/pagination.ts +++ b/src/engine/pagination.ts @@ -40,6 +40,10 @@ export type ChangeQueryOptions = { const DEFAULT_CHANGE_QUERY_OPTIONS: ChangeQueryOptions = { resetPage: true } +const DEFAULT_PARSE_QUERY: ParseQuery = () => ({}) + +const DEFAULT_QUERY: Partial = {} + const parsePagination = (query: Query): Partial => { return { page: queryValueToIntOrUndefined(query.page), @@ -52,8 +56,8 @@ export const useAbstractQueryAndPagination = < TDefaultQuery extends Partial, >( router: Router, - parseQuery: ParseQuery = () => ({}), - defaultQuery: TDefaultQuery = {} as TDefaultQuery, + parseQuery: ParseQuery = DEFAULT_PARSE_QUERY as ParseQuery, + defaultQuery: TDefaultQuery = DEFAULT_QUERY as TDefaultQuery, defaultPagination?: Partial, options?: Partial, ) => { From f37b253e7827679e932a67d38fe3ddf559530366 Mon Sep 17 00:00:00 2001 From: Hochrainer Christof Date: Wed, 7 Aug 2024 16:23:51 +0200 Subject: [PATCH 4/5] Revert "fix undefined error" This reverts commit 5ababf7fa34f5fd8c4e276f85aec5ff472f6d47a. --- src/routers/nextRouter.ts | 49 +++++++++++++++++++++++---------------- 1 file changed, 29 insertions(+), 20 deletions(-) diff --git a/src/routers/nextRouter.ts b/src/routers/nextRouter.ts index dc97a40..dace6dc 100644 --- a/src/routers/nextRouter.ts +++ b/src/routers/nextRouter.ts @@ -1,5 +1,5 @@ import { useRouter } from 'next/router' -import { useCallback, useMemo } from 'react' +import { useCallback, useMemo, useRef } from 'react' import { Query, ParseQuery, @@ -23,43 +23,52 @@ const useNextRouter = ( ): Router => { const nextRouter = useRouter() + // Make sure Next router has a stable reference to use in callbacks + const routerRef = useRef(nextRouter) + routerRef.current = nextRouter + const mergedOptions = useMemo( () => ({ ...DEFAULT_NEXT_ROUTER_OPTIONS, ...options }), [options], ) - const getQuery = useCallback( - (defaultQuery: Query) => { - const query: Query = {} - for (const [key, value] of Object.entries(nextRouter.query)) { - if (value !== undefined) { - query[key] = value - } + const getQuery = useCallback((defaultQuery: Query) => { + const query: Query = {} + for (const [key, value] of Object.entries(routerRef.current.query)) { + if (value !== undefined) { + query[key] = value } - return { ...defaultQuery, ...query } - }, - [nextRouter.query], - ) + } + return { ...defaultQuery, ...query } + }, []) const setQuery = useCallback( (query: Partial, defaultQuery: Query) => { - const newQuery = { ...nextRouter.query, ...query } + const newQuery = { ...routerRef.current.query, ...query } const newQueryWithoutDefaults = Object.fromEntries( Object.entries(newQuery).filter( ([key, value]) => value !== defaultQuery[key], ), ) if (mergedOptions.setQueryMethod === 'push') { - void nextRouter.push({ query: newQueryWithoutDefaults }, undefined, { - shallow: true, - }) + void routerRef.current.push( + { query: newQueryWithoutDefaults }, + undefined, + { + shallow: true, + }, + ) } else { - void nextRouter.replace({ query: newQueryWithoutDefaults }, undefined, { - shallow: true, - }) + void routerRef.current.replace( + { query: newQueryWithoutDefaults }, + undefined, + { + shallow: true, + }, + ) } }, - [nextRouter, mergedOptions], + [mergedOptions], ) return useMemo( From 2507f113b1622e5135be75f1e47370b55b844939 Mon Sep 17 00:00:00 2001 From: Hochrainer Christof Date: Wed, 7 Aug 2024 16:32:46 +0200 Subject: [PATCH 5/5] delete constants --- src/engine/pagination.ts | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/src/engine/pagination.ts b/src/engine/pagination.ts index deaac10..2b62b11 100644 --- a/src/engine/pagination.ts +++ b/src/engine/pagination.ts @@ -40,10 +40,6 @@ export type ChangeQueryOptions = { const DEFAULT_CHANGE_QUERY_OPTIONS: ChangeQueryOptions = { resetPage: true } -const DEFAULT_PARSE_QUERY: ParseQuery = () => ({}) - -const DEFAULT_QUERY: Partial = {} - const parsePagination = (query: Query): Partial => { return { page: queryValueToIntOrUndefined(query.page), @@ -56,8 +52,8 @@ export const useAbstractQueryAndPagination = < TDefaultQuery extends Partial, >( router: Router, - parseQuery: ParseQuery = DEFAULT_PARSE_QUERY as ParseQuery, - defaultQuery: TDefaultQuery = DEFAULT_QUERY as TDefaultQuery, + parseQuery: ParseQuery = () => ({}), + defaultQuery: TDefaultQuery = {} as TDefaultQuery, defaultPagination?: Partial, options?: Partial, ) => {