feat: Add limit to set page size in search (resolves #22)

Author: oliverroick

README.md

@@ -273,6 +273,8 @@ Option             | Type      | Description
 `setDateRangeTo(toDate)`   | `function` | Callback to set `dateRangeto`. `toDate` must be ISO representation of a date, ie. `2022-05-18`, or `undefined` to reset.
 `sortby`             | `array`   | Specifies the order of results. Array of `{ field: string, direction: 'asc' | 'desc' }`
 `setSortby(sort)`          | `function` | Callback to set `sortby`. `sort` must be an array of `{ field: string, direction: 'asc' | 'desc' }`, or `undefined` to reset.
+`limit`            | `number`   | The number of results returned per result page.
+`setLimit(limit)`  | `function` | Callback to set `limit`. `limit` must be a `number`, or `undefined` to reset.
 `results`          | `object`   | The result of the last search query; a [GeoJSON `FeatureCollection` with additional members](https://github.com/radiantearth/stac-api-spec/blob/v1.0.0-rc.2/fragments/itemcollection/README.md). `undefined` if the search request has not been submitted, or if there was an error. 
 `state`            | `string` | The status of the request. `"IDLE"` before and after the request is sent or received. `"LOADING"` when the request is in progress. 
 `error`            | [`Error`](#error)   | Error information if the last request was unsuccessful. `undefined` if the last request was successful. 

src/hooks/useStacSearch.test.ts

@@ -552,6 +552,30 @@ describe('useStacSearch — API supports POST', () => {
     expect(result.current.results).toEqual({ data: '12345' });
   });
 
+  it('includes limit in search', async () => {
+    fetch
+      .mockResponseOnce(
+        JSON.stringify({ links: [{ rel: 'search', method: 'POST' }] }),
+        { url: 'https://fake-stac-api.net' }
+      )
+      .mockResponseOnce(JSON.stringify({ data: '12345' }));
+
+    const { result, waitForNextUpdate } = renderHook(
+      () => useStacSearch(),
+      { wrapper }
+    );
+    await waitForNextUpdate();
+
+    act(() => result.current.setLimit(50));
+    act(() => result.current.submit());
+
+    await waitForNextUpdate();
+
+    const postPayload = parseRequestPayload(fetch.mock.calls[1][1]);
+    expect(postPayload).toEqual({ limit: 50 });
+    expect(result.current.results).toEqual({ data: '12345' });
+  });
+
   // it('should reset state with each new StacApi instance', async () => {
   //   const bbox: Bbox = [-0.59, 51.24, 0.30, 51.74];
   //   fetch.mockResponseOnce(JSON.stringify({ data: '12345' }));
@@ -597,7 +621,7 @@ describe('useStacSearch — API supports GET', () => {
     act(() => result.current.submit());
     await waitForNextUpdate();
 
-    expect(fetch.mock.calls[1][0]).toEqual('https://fake-stac-api.net/search?bbox=-0.59%2C51.24%2C0.3%2C51.74&limit=25');
+    expect(fetch.mock.calls[1][0]).toEqual('https://fake-stac-api.net/search?limit=25&bbox=-0.59%2C51.24%2C0.3%2C51.74');
     expect(result.current.results).toEqual({ data: '12345' });
   });
 
@@ -619,7 +643,7 @@ describe('useStacSearch — API supports GET', () => {
     act(() => result.current.submit());
     await waitForNextUpdate();
 
-    expect(fetch.mock.calls[1][0]).toEqual('https://fake-stac-api.net/search?collections=wildfire%2Csurface_temp&limit=25');
+    expect(fetch.mock.calls[1][0]).toEqual('https://fake-stac-api.net/search?limit=25&collections=wildfire%2Csurface_temp');
     expect(result.current.results).toEqual({ data: '12345' });
   });
 
@@ -642,7 +666,7 @@ describe('useStacSearch — API supports GET', () => {
     act(() => result.current.submit());
     await waitForNextUpdate();
 
-    expect(fetch.mock.calls[1][0]).toEqual('https://fake-stac-api.net/search?datetime=2022-01-17%2F2022-05-17&limit=25');
+    expect(fetch.mock.calls[1][0]).toEqual('https://fake-stac-api.net/search?limit=25&datetime=2022-01-17%2F2022-05-17');
     expect(result.current.results).toEqual({ data: '12345' });
   });
 
@@ -664,7 +688,7 @@ describe('useStacSearch — API supports GET', () => {
     act(() => result.current.submit());
     await waitForNextUpdate();
 
-    expect(fetch.mock.calls[1][0]).toEqual('https://fake-stac-api.net/search?datetime=2022-01-17%2F..&limit=25');
+    expect(fetch.mock.calls[1][0]).toEqual('https://fake-stac-api.net/search?limit=25&datetime=2022-01-17%2F..');
     expect(result.current.results).toEqual({ data: '12345' });
   });
 
@@ -686,7 +710,7 @@ describe('useStacSearch — API supports GET', () => {
     act(() => result.current.submit());
     await waitForNextUpdate();
 
-    expect(fetch.mock.calls[1][0]).toEqual('https://fake-stac-api.net/search?datetime=..%2F2022-05-17&limit=25');
+    expect(fetch.mock.calls[1][0]).toEqual('https://fake-stac-api.net/search?limit=25&datetime=..%2F2022-05-17');
     expect(result.current.results).toEqual({ data: '12345' });
   });
 
@@ -714,4 +738,26 @@ describe('useStacSearch — API supports GET', () => {
     expect(fetch.mock.calls[1][0]).toEqual('https://fake-stac-api.net/search?limit=25&sortby=%2Bid%2C-properties.cloud');
     expect(result.current.results).toEqual({ data: '12345' });
   });
+
+  it('includes limit', async () => {
+    fetch
+      .mockResponseOnce(
+        JSON.stringify({ links: [] }),
+        { url: 'https://fake-stac-api.net' }
+      )
+      .mockResponseOnce(JSON.stringify({ data: '12345' }));
+
+    const { result, waitForNextUpdate } = renderHook(
+      () => useStacSearch(),
+      { wrapper }
+    );
+    await waitForNextUpdate();
+
+    act(() => result.current.setLimit(50));
+    act(() => result.current.submit());
+    await waitForNextUpdate();
+
+    expect(fetch.mock.calls[1][0]).toEqual('https://fake-stac-api.net/search?limit=50');
+    expect(result.current.results).toEqual({ data: '12345' });
+  });
 });

src/hooks/useStacSearch.ts

@@ -25,6 +25,8 @@ type StacSearchHook = {
   setDateRangeFrom: (date: string) => void
   dateRangeTo?: string
   setDateRangeTo: (date: string) => void
+  limit?: number;
+  setLimit: (limit: number) => void;
   sortby?: Sortby[]
   setSortby: (sort: Sortby[]) => void
   submit: () => void
@@ -43,6 +45,7 @@ function useStacSearch(): StacSearchHook {
   const [ collections, setCollections ] = useState<CollectionIdList>();
   const [ dateRangeFrom, setDateRangeFrom ] = useState<string>('');
   const [ dateRangeTo, setDateRangeTo ] = useState<string>('');
+  const [ limit, setLimit ] = useState<number>(25);
   const [ sortby, setSortby ] = useState<Sortby[]>();
   const [ state, setState ] = useState<LoadingState>('IDLE');
   const [ error, setError ] = useState<ApiError>();
@@ -58,6 +61,7 @@ function useStacSearch(): StacSearchHook {
     setDateRangeFrom('');
     setDateRangeTo('');
     setSortby(undefined);
+    setLimit(25);
   };
 
   /**
@@ -84,9 +88,10 @@ function useStacSearch(): StacSearchHook {
       bbox,
       collections,
       dateRange: { from: dateRangeFrom, to: dateRangeTo },
-      sortby
+      sortby,
+      limit
     }),
-    [ ids, bbox, collections, dateRangeFrom, dateRangeTo, sortby ]
+    [ ids, bbox, collections, dateRangeFrom, dateRangeTo, sortby, limit ]
   );
 
   /**
@@ -187,6 +192,8 @@ function useStacSearch(): StacSearchHook {
     error,
     sortby,
     setSortby,
+    limit,
+    setLimit,
     nextPage: nextPageConfig ? nextPageFn : undefined,
     previousPage: previousPageConfig ? previousPageFn : undefined
   };

src/stac-api/index.ts

@@ -130,7 +130,6 @@ class StacApi {
       collections: this.makeArrayPayload(collections),
       bbox: this.fixBboxCoordinateOrder(bbox),
       datetime: this.makeDatetimePayload(dateRange),
-      limit: 25
     };
 
     if (this.searchMode === 'POST') {