Add support for GET pagination [fix #14]

Author: oliverroick

src/hooks/useStacSearch.test.ts

@@ -335,4 +335,60 @@ describe('useStacSearch', () => {
     const postHeader = fetch.mock.calls[1][1]?.headers;
     expect(postHeader).toEqual({ 'Content-Type': 'application/json', next: '123abc' });
   });
+
+  it('loads next-page from GET request', async () => {
+    const response = {
+      links: [{
+        rel: 'next',
+        href: 'https://fake-stac-api.net/?page=2'
+      }]
+    };
+    fetch.mockResponseOnce(JSON.stringify(response));
+
+    const { result, waitForNextUpdate } = renderHook(
+      () => useStacSearch(stacApi)
+    );
+
+    act(() => result.current.setDateRangeTo('2022-05-17'));
+    act(() => result.current.submit());
+    await waitForNextUpdate(); // wait to set results
+    expect(result.current.results).toEqual(response);
+    expect(result.current.nextPage).toBeDefined();
+
+    fetch.mockResponseOnce(JSON.stringify({ data: '12345' }));
+    act(() => result.current.nextPage && result.current.nextPage());
+    await waitForNextUpdate();
+
+    expect(fetch.mock.calls[1][0]).toEqual('https://fake-stac-api.net/?page=2');
+    expect(fetch.mock.calls[1][1]?.method).toEqual('GET');
+    expect(result.current.results).toEqual({ data: '12345' });
+  });
+
+  it('loads prev-page from GET request', async () => {
+    const response = {
+      links: [{
+        rel: 'prev',
+        href: 'https://fake-stac-api.net/?page=2'
+      }]
+    };
+    fetch.mockResponseOnce(JSON.stringify(response));
+
+    const { result, waitForNextUpdate } = renderHook(
+      () => useStacSearch(stacApi)
+    );
+
+    act(() => result.current.setDateRangeTo('2022-05-17'));
+    act(() => result.current.submit());
+    await waitForNextUpdate(); // wait to set results
+    expect(result.current.results).toEqual(response);
+    expect(result.current.previousPage).toBeDefined();
+
+    fetch.mockResponseOnce(JSON.stringify({ data: '12345' }));
+    act(() => result.current.previousPage && result.current.previousPage());
+    await waitForNextUpdate();
+
+    expect(fetch.mock.calls[1][0]).toEqual('https://fake-stac-api.net/?page=2');
+    expect(fetch.mock.calls[1][1]?.method).toEqual('GET');
+    expect(result.current.results).toEqual({ data: '12345' });
+  });
 });

src/hooks/useStacSearch.ts

@@ -42,13 +42,19 @@ function useStacSearch(stacApi: StacApi): StacSearchHook {
   const [ nextPageConfig, setNextPageConfig ] = useState<Link>();
   const [ previousPageConfig, setPreviousPageConfig ] = useState<Link>();
 
+  /**
+   * Extracts the pagination config from the the links array of the items response
+   */
   const setPaginationConfig = useCallback(
     (links: Link[]) => {
       setNextPageConfig(links.find(({ rel }) => rel === 'next'));
       setPreviousPageConfig(links.find(({ rel }) => ['prev', 'previous'].includes(rel)));
     }, []
   );
 
+  /**
+   * Returns the search payload based on the current application state
+   */
   const getSearchPayload = useCallback(
     () => ({
       bbox,
@@ -58,40 +64,65 @@ function useStacSearch(stacApi: StacApi): StacSearchHook {
     [ bbox, collections, dateRangeFrom, dateRangeTo ]
   );
 
+  /**
+   * Resets the state and processes the results from the provided request
+   */
+  const processRequest = useCallback((request: Promise<Response>) => {
+    setResults(undefined);
+    setState('LOADING');
+    setError(undefined);
+    setNextPageConfig(undefined);
+    setPreviousPageConfig(undefined);
+
+    request
+      .then(response => response.json())
+      .then(data => {
+        setResults(data);
+        setPaginationConfig(data.links);
+      })
+      .catch((err) => setError(err))
+      .finally(() => setState('IDLE'));
+  }, [setPaginationConfig]);
+
+  /**
+   * Executes a POST request against the `search` endpoint using the provided payload and headers
+   */
   const executeSearch = useCallback(
-    (payload: SearchPayload, headers = {}) => {
-      setResults(undefined);
-      setState('LOADING');
-      setError(undefined);
-      setNextPageConfig(undefined);
-      setPreviousPageConfig(undefined);
+    (payload: SearchPayload, headers = {}) => processRequest(stacApi.search(payload, headers)),
+    [stacApi, processRequest]
+  );
 
-      stacApi.search(payload, headers)
-        .then(response => response.json())
-        .then(data => {
-          setResults(data);
-          setPaginationConfig(data.links);
-        })
-        .catch((err) => setError(err))
-        .finally(() => setState('IDLE'));
-    },
-    [stacApi, setPaginationConfig]
+  /**
+   * Execute a GET request against the provided URL
+   */
+  const getItems = useCallback(
+    (url: string) => processRequest(stacApi.get(url)),
+    [stacApi, processRequest]
   );
 
+  /**
+   * Retreives a page from a paginatied item set using the provided link config.
+   * Executes a POST request against the `search` endpoint if pagination uses POST
+   * or retrieves the page items using GET against the link href
+   */
   const flipPage = useCallback(
     (link?: Link) => {
       if (link) {
         let payload = link.body as LinkBody;
-        if (payload.merge) {
-          payload = {
-            ...payload,
-            ...getSearchPayload()
-          };
+        if (payload) {
+          if (payload.merge) {
+            payload = {
+              ...payload,
+              ...getSearchPayload()
+            };
+          }
+          executeSearch(payload, link.headers);
+        } else {
+          getItems(link.href);
         }
-        executeSearch(payload, link.headers);
       }
     },
-    [executeSearch, getSearchPayload]
+    [executeSearch, getItems, getSearchPayload]
   );
 
   const nextPageFn = useCallback(

src/stac-api/index.ts

@@ -109,6 +109,10 @@ class StacApi {
   getCollections(): Promise<Response> {
     return this.fetch(`${this.baseUrl}/collections`);
   }
+
+  get(href: string, headers = {}): Promise<Response> {
+    return this.fetch(href, { headers });
+  }
 }
 
 export default StacApi;