-
-
Notifications
You must be signed in to change notification settings - Fork 612
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add current page parameter to the route in the listing and search blo…
…ck pagination (#4159) Co-authored-by: Mikel Larreategi <mlarreategi@codesyntax.com> Co-authored-by: Víctor Fernández de Alba <sneridagh@gmail.com> Co-authored-by: ionlizarazu <ilizarazu@codesyntax.com>
- Loading branch information
1 parent
267181c
commit c40e772
Showing
6 changed files
with
193 additions
and
20 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
Added current page parameter to route in listing and search block pagination - Fix: #3868 @bipoza |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,25 +1,59 @@ | ||
import React from 'react'; | ||
import { isEqual } from 'lodash'; | ||
import { usePrevious } from './usePrevious'; | ||
import useDeepCompareEffect from 'use-deep-compare-effect'; | ||
import React, { useRef, useEffect } from 'react'; | ||
import { useHistory, useLocation } from 'react-router-dom'; | ||
import qs from 'query-string'; | ||
import { useSelector } from 'react-redux'; | ||
import { slugify } from '@plone/volto/helpers/Utils/Utils'; | ||
|
||
/** | ||
* @function useCreatePageQueryStringKey | ||
* @description A hook that creates a key with an id if there are multiple blocks with pagination. | ||
* @returns {string} Example: page || page_012345678 | ||
*/ | ||
const useCreatePageQueryStringKey = (id) => { | ||
const blockTypesWithPagination = ['search', 'listing']; | ||
const blocks = useSelector((state) => state?.content?.data?.blocks) || []; | ||
const blocksLayout = | ||
useSelector((state) => state?.content?.data?.blocks_layout?.items) || []; | ||
const displayedBlocks = blocksLayout?.map((item) => blocks[item]); | ||
const hasMultiplePaginations = | ||
displayedBlocks.filter((item) => | ||
blockTypesWithPagination.includes(item['@type']), | ||
).length > 1 || false; | ||
|
||
return hasMultiplePaginations ? slugify(`page-${id}`) : 'page'; | ||
}; | ||
|
||
/** | ||
* A pagination helper that tracks the query and resets pagination in case the | ||
* query changes. | ||
*/ | ||
export const usePagination = (query, defaultPage = 1) => { | ||
const previousQuery = usePrevious(query); | ||
const [currentPage, setCurrentPage] = React.useState(defaultPage); | ||
export const usePagination = (id = null, defaultPage = 1) => { | ||
const location = useLocation(); | ||
const history = useHistory(); | ||
const pageQueryStringKey = useCreatePageQueryStringKey(id); | ||
const pageQueryParam = | ||
qs.parse(location.search)[pageQueryStringKey] || defaultPage; | ||
const [currentPage, setCurrentPage] = React.useState( | ||
parseInt(pageQueryParam), | ||
); | ||
const queryRef = useRef(qs.parse(location.search)?.query); | ||
|
||
useDeepCompareEffect(() => { | ||
setCurrentPage(defaultPage); | ||
}, [query, previousQuery, defaultPage]); | ||
useEffect(() => { | ||
if (queryRef.current !== qs.parse(location.search)?.query) { | ||
setCurrentPage(defaultPage); | ||
queryRef.current = qs.parse(location.search)?.query; | ||
} | ||
const newParams = { | ||
...qs.parse(location.search), | ||
[pageQueryStringKey]: currentPage, | ||
}; | ||
history.replace({ | ||
search: qs.stringify(newParams), | ||
}); | ||
}, [currentPage, defaultPage, location.search, history, pageQueryStringKey]); | ||
|
||
return { | ||
currentPage: | ||
previousQuery && !isEqual(previousQuery, query) | ||
? defaultPage | ||
: currentPage, | ||
currentPage, | ||
setCurrentPage, | ||
}; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,115 @@ | ||
import { renderHook } from '@testing-library/react-hooks'; | ||
import { usePagination } from './usePagination'; | ||
import * as redux from 'react-redux'; | ||
import routeData from 'react-router'; | ||
import { slugify } from '@plone/volto/helpers/Utils/Utils'; | ||
|
||
const searchBlockId = '545b33de-92cf-4747-969d-68851837b317'; | ||
const searchBlockId2 = '454b33de-92cf-4747-969d-68851837b713'; | ||
const searchBlock = { | ||
'@type': 'search', | ||
query: { | ||
b_size: '4', | ||
query: [ | ||
{ | ||
i: 'path', | ||
o: 'plone.app.querystring.operation.string.relativePath', | ||
v: '', | ||
}, | ||
], | ||
sort_order: 'ascending', | ||
}, | ||
showSearchInput: true, | ||
showTotalResults: true, | ||
}; | ||
let state = { | ||
content: { | ||
data: { | ||
blocks: { | ||
[searchBlockId]: searchBlock, | ||
}, | ||
blocks_layout: { | ||
items: [searchBlockId], | ||
}, | ||
}, | ||
}, | ||
}; | ||
|
||
let mockUseLocationValue = { | ||
pathname: '/testroute', | ||
search: '', | ||
}; | ||
|
||
const setUp = (searchParam, numberOfSearches) => { | ||
mockUseLocationValue.search = searchParam; | ||
if (numberOfSearches > 1) { | ||
state.content.data.blocks[searchBlockId2] = searchBlock; | ||
state.content.data.blocks_layout.items.push(searchBlockId2); | ||
} | ||
return renderHook(({ id, defaultPage }) => usePagination(id, defaultPage), { | ||
initialProps: { | ||
id: searchBlockId, | ||
defaultPage: 1, | ||
}, | ||
}); | ||
}; | ||
|
||
describe(`Tests for usePagination, for the block ${searchBlockId}`, () => { | ||
const useLocation = jest.spyOn(routeData, 'useLocation'); | ||
const useHistory = jest.spyOn(routeData, 'useHistory'); | ||
const useSelector = jest.spyOn(redux, 'useSelector'); | ||
beforeEach(() => { | ||
useLocation.mockReturnValue(mockUseLocationValue); | ||
useHistory.mockReturnValue({ replace: jest.fn() }); | ||
useSelector.mockImplementation((cb) => cb(state)); | ||
}); | ||
|
||
it('1 paginated block with id and defaultPage 1 - shoud be 1', () => { | ||
const { result } = setUp(); | ||
expect(result.current.currentPage).toBe(1); | ||
}); | ||
|
||
it('1 paginated block without params - shoud be 1', () => { | ||
const { result } = setUp(); | ||
expect(result.current.currentPage).toBe(1); | ||
}); | ||
|
||
const param1 = '?page=2'; | ||
it(`1 paginated block with params: ${param1} - shoud be 2`, () => { | ||
const { result } = setUp(param1); | ||
expect(result.current.currentPage).toBe(2); | ||
}); | ||
|
||
const param2 = `?${slugify(`page-${searchBlockId}`)}=2`; | ||
it(`2 paginated blocks with current block in the params: ${param2} - shoud be 2`, () => { | ||
const { result } = setUp(param2, 2); | ||
expect(result.current.currentPage).toBe(2); | ||
}); | ||
|
||
const param3 = `?${slugify(`page-${searchBlockId2}`)}=2`; | ||
it(`2 paginated blocks with the other block in the params: ${param3} - shoud be 1`, () => { | ||
const { result } = setUp(param3, 2); | ||
expect(result.current.currentPage).toBe(1); | ||
}); | ||
|
||
const param4 = `?${slugify(`page-${searchBlockId}`)}=2&${slugify( | ||
`page-${searchBlockId2}`, | ||
)}=1`; | ||
it(`2 paginated blocks with both blocks in the params, current 2: ${param4} - shoud be 2`, () => { | ||
const { result } = setUp(param4, 2); | ||
expect(result.current.currentPage).toBe(2); | ||
}); | ||
|
||
const param5 = `?${slugify(`page-${searchBlockId}`)}=1&${slugify( | ||
`page-${searchBlockId2}`, | ||
)}=2`; | ||
it(`2 paginated blocks with both blocks in the params, current 1: ${param5} - shoud be 1`, () => { | ||
const { result } = setUp(param5, 2); | ||
expect(result.current.currentPage).toBe(1); | ||
}); | ||
|
||
it(`2 paginated blocks with wrong page param: ${param1} - shoud be 1`, () => { | ||
const { result } = setUp(param1, 2); | ||
expect(result.current.currentPage).toBe(1); | ||
}); | ||
}); |