diff --git a/frontend/src/metabase/collections/containers/CollectionContent.jsx b/frontend/src/metabase/collections/containers/CollectionContent.jsx index 42a71214ca7d01a01babf57651262b2e7a1638f2..85979b7ed88757ea79ac626f224d21d7f09fe99f 100644 --- a/frontend/src/metabase/collections/containers/CollectionContent.jsx +++ b/frontend/src/metabase/collections/containers/CollectionContent.jsx @@ -80,7 +80,8 @@ function CollectionContent({ sort_column: "name", sort_direction: "asc", }); - const { handleNextPage, handlePreviousPage, setPage, page } = usePagination(); + const { handleNextPage, handlePreviousPage, setPage, page, resetPage } = + usePagination(); const { selected, toggleItem, toggleAll, getIsSelected, clear } = useListSelect(itemKeyFn); const previousCollection = usePrevious(collection); @@ -94,8 +95,9 @@ function CollectionContent({ useEffect(() => { if (previousCollection && previousCollection.id !== collection.id) { clear(); + resetPage(); } - }, [previousCollection, collection, clear]); + }, [previousCollection, collection, clear, resetPage]); useEffect(() => { const shouldBeBookmarked = bookmarks.some( diff --git a/frontend/src/metabase/hooks/use-pagination.js b/frontend/src/metabase/hooks/use-pagination.ts similarity index 79% rename from frontend/src/metabase/hooks/use-pagination.js rename to frontend/src/metabase/hooks/use-pagination.ts index e3f5f72f1ea9c97a032fec99e76179050929d452..51108d168ae4c7177f19fb78fa01a8e9bb635898 100644 --- a/frontend/src/metabase/hooks/use-pagination.js +++ b/frontend/src/metabase/hooks/use-pagination.ts @@ -12,10 +12,16 @@ export const usePagination = (initialPage = 0) => { [setPage], ); + const resetPage = useCallback( + () => setPage(initialPage), + [setPage, initialPage], + ); + return { handleNextPage, handlePreviousPage, setPage, page, + resetPage, }; }; diff --git a/frontend/src/metabase/hooks/use-pagination.unit.spec.ts b/frontend/src/metabase/hooks/use-pagination.unit.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..2d1e34dbdb389fca369d7b3339456f1ecda2e8d7 --- /dev/null +++ b/frontend/src/metabase/hooks/use-pagination.unit.spec.ts @@ -0,0 +1,15 @@ +import { renderHook, act } from "@testing-library/react-hooks"; +import { usePagination } from "./use-pagination"; + +describe("usePagination", () => { + it("should set 'page' to 'initialPage' upon calling 'resetPage'", () => { + const initialPage = 3; + const { result } = renderHook(() => usePagination(initialPage)); + + act(() => result.current.handleNextPage()); + expect(result.current.page).toEqual(initialPage + 1); + + act(() => result.current.resetPage()); + expect(result.current.page).toEqual(initialPage); + }); +});