diff --git a/plugins/search-react/src/components/SearchResult/SearchResult.tsx b/plugins/search-react/src/components/SearchResult/SearchResult.tsx index 40c60c3263..dd11f42903 100644 --- a/plugins/search-react/src/components/SearchResult/SearchResult.tsx +++ b/plugins/search-react/src/components/SearchResult/SearchResult.tsx @@ -98,16 +98,10 @@ export const SearchResultApi = (props: SearchResultApiProps) => { const { query, children } = props; const searchApi = useApi(searchApiRef); - const state = useAsync( - () => - searchApi.query({ - term: query.term ?? '', - types: query.types ?? [], - filters: query.filters ?? {}, - pageCursor: query.pageCursor, - }), - [query], - ); + const state = useAsync(() => { + const { term = '', types = [], filters = {}, ...rest } = query; + return searchApi.query({ ...rest, term, types, filters }); + }, [query]); return children(state); }; diff --git a/plugins/search-react/src/context/SearchContext.test.tsx b/plugins/search-react/src/context/SearchContext.test.tsx index b5888fa8a9..edee2f153f 100644 --- a/plugins/search-react/src/context/SearchContext.test.tsx +++ b/plugins/search-react/src/context/SearchContext.test.tsx @@ -40,8 +40,8 @@ describe('SearchContext', () => { const initialState = { term: '', - filters: {}, types: ['*'], + filters: {}, }; beforeEach(() => { @@ -167,8 +167,8 @@ describe('SearchContext', () => { initialProps: { initialState: { ...initialState, - filters: { foo: 'bar' }, term: 'first term', + filters: { foo: 'bar' }, pageCursor: 'SOMEPAGE', }, }, @@ -194,8 +194,8 @@ describe('SearchContext', () => { initialProps: { initialState: { ...initialState, - filters: { foo: 'bar' }, term: 'first term', + filters: { foo: 'bar' }, pageCursor: 'SOMEPAGE', }, }, @@ -236,58 +236,9 @@ describe('SearchContext', () => { await waitForNextUpdate(); expect(query).toHaveBeenLastCalledWith({ - filters: {}, - types: ['*'], term, - }); - }); - - it('When filters are set', async () => { - const { result, waitForNextUpdate } = renderHook(() => useSearch(), { - wrapper, - initialProps: { - initialState, - }, - }); - - await waitForNextUpdate(); - - const filters = { filter: 'filter' }; - - act(() => { - result.current.setFilters(filters); - }); - - await waitForNextUpdate(); - - expect(query).toHaveBeenLastCalledWith({ - filters, types: ['*'], - term: '', - }); - }); - - it('When page is set', async () => { - const { result, waitForNextUpdate } = renderHook(() => useSearch(), { - wrapper, - initialProps: { - initialState, - }, - }); - - await waitForNextUpdate(); - - act(() => { - result.current.setPageCursor('SOMEPAGE'); - }); - - await waitForNextUpdate(); - - expect(query).toHaveBeenLastCalledWith({ filters: {}, - types: ['*'], - pageCursor: 'SOMEPAGE', - term: '', }); }); @@ -311,8 +262,85 @@ describe('SearchContext', () => { expect(query).toHaveBeenLastCalledWith({ types, - filters: {}, term: '', + filters: {}, + }); + }); + + it('When filters are set', async () => { + const { result, waitForNextUpdate } = renderHook(() => useSearch(), { + wrapper, + initialProps: { + initialState, + }, + }); + + await waitForNextUpdate(); + + const filters = { filter: 'filter' }; + + act(() => { + result.current.setFilters(filters); + }); + + await waitForNextUpdate(); + + expect(query).toHaveBeenLastCalledWith({ + filters, + term: '', + types: ['*'], + }); + }); + + it('When page limit is set', async () => { + const { result, waitForNextUpdate } = renderHook(() => useSearch(), { + wrapper, + initialProps: { + initialState, + }, + }); + + await waitForNextUpdate(); + + const pageLimit = 30; + + act(() => { + result.current.setPageLimit(pageLimit); + }); + + await waitForNextUpdate(); + + expect(query).toHaveBeenLastCalledWith({ + pageLimit, + term: '', + types: ['*'], + filters: {}, + }); + }); + + it('When page cursor is set', async () => { + const { result, waitForNextUpdate } = renderHook(() => useSearch(), { + wrapper, + initialProps: { + initialState, + }, + }); + + await waitForNextUpdate(); + + const pageCursor = 'SOMEPAGE'; + + act(() => { + result.current.setPageCursor(pageCursor); + }); + + await waitForNextUpdate(); + + expect(query).toHaveBeenLastCalledWith({ + pageCursor, + term: '', + types: ['*'], + filters: {}, }); }); @@ -341,9 +369,9 @@ describe('SearchContext', () => { await waitForNextUpdate(); expect(query).toHaveBeenLastCalledWith({ + term: '', types: ['*'], filters: {}, - term: '', pageCursor: 'NEXT', }); }); @@ -373,9 +401,9 @@ describe('SearchContext', () => { await waitForNextUpdate(); expect(query).toHaveBeenLastCalledWith({ + term: '', types: ['*'], filters: {}, - term: '', pageCursor: 'PREVIOUS', }); }); diff --git a/plugins/search-react/src/context/SearchContext.tsx b/plugins/search-react/src/context/SearchContext.tsx index 6557f04c15..94e51c0668 100644 --- a/plugins/search-react/src/context/SearchContext.tsx +++ b/plugins/search-react/src/context/SearchContext.tsx @@ -44,6 +44,7 @@ export type SearchContextValue = { setTerm: React.Dispatch>; setTypes: React.Dispatch>; setFilters: React.Dispatch>; + setPageLimit: React.Dispatch>; setPageCursor: React.Dispatch>; fetchNextPage?: React.DispatchWithoutAction; fetchPreviousPage?: React.DispatchWithoutAction; @@ -57,6 +58,7 @@ export type SearchContextState = { term: string; types: string[]; filters: JsonObject; + pageLimit?: number; pageCursor?: string; }; @@ -98,9 +100,10 @@ export const useSearchContextCheck = () => { */ const searchInitialState: SearchContextState = { term: '', - pageCursor: undefined, - filters: {}, types: [], + filters: {}, + pageLimit: undefined, + pageCursor: undefined, }; const useSearchContextValue = ( @@ -111,6 +114,9 @@ const useSearchContextValue = ( const [term, setTerm] = useState(initialValue.term); const [types, setTypes] = useState(initialValue.types); const [filters, setFilters] = useState(initialValue.filters); + const [pageLimit, setPageLimit] = useState( + initialValue.pageLimit, + ); const [pageCursor, setPageCursor] = useState( initialValue.pageCursor, ); @@ -122,20 +128,23 @@ const useSearchContextValue = ( () => searchApi.query({ term, - filters, - pageCursor, types, + filters, + pageLimit, + pageCursor, }), - [term, types, filters, pageCursor], + [term, types, filters, pageLimit, pageCursor], ); const hasNextPage = !result.loading && !result.error && result.value?.nextPageCursor; const hasPreviousPage = !result.loading && !result.error && result.value?.previousPageCursor; + const fetchNextPage = useCallback(() => { setPageCursor(result.value?.nextPageCursor); }, [result.value?.nextPageCursor]); + const fetchPreviousPage = useCallback(() => { setPageCursor(result.value?.previousPageCursor); }, [result.value?.previousPageCursor]); @@ -158,12 +167,14 @@ const useSearchContextValue = ( const value: SearchContextValue = { result, - filters, - setFilters, term, setTerm, types, setTypes, + filters, + setFilters, + pageLimit, + setPageLimit, pageCursor, setPageCursor, fetchNextPage: hasNextPage ? fetchNextPage : undefined,