Add page limit to search context and state

Signed-off-by: Camila Belo <camilaibs@gmail.com>

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);
 };

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',
       });
     });

plugins/search-react/src/context/SearchContext.tsx

@@ -44,6 +44,7 @@ export type SearchContextValue = {
   setTerm: React.Dispatch<React.SetStateAction<string>>;
   setTypes: React.Dispatch<React.SetStateAction<string[]>>;
   setFilters: React.Dispatch<React.SetStateAction<JsonObject>>;
+  setPageLimit: React.Dispatch<React.SetStateAction<number | undefined>>;
   setPageCursor: React.Dispatch<React.SetStateAction<string | undefined>>;
   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<string>(initialValue.term);
   const [types, setTypes] = useState<string[]>(initialValue.types);
   const [filters, setFilters] = useState<JsonObject>(initialValue.filters);
+  const [pageLimit, setPageLimit] = useState<number | undefined>(
+    initialValue.pageLimit,
+  );
   const [pageCursor, setPageCursor] = useState<string | undefined>(
     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,