feat: Add useCollections hook

Author: oliverroick

src/hooks/useCollections.test.ts

@@ -0,0 +1,38 @@
+import fetch from 'jest-fetch-mock';
+import { renderHook, act } from '@testing-library/react-hooks';
+import useCollections from './useCollections';
+import StacApi from '../stac-api';
+
+describe('useCollections', () => {
+  const stacApi = new StacApi('https://fake-stac-api.net');
+  beforeEach(() => fetch.resetMocks());
+
+  it('queries collections', async () => {
+    fetch.mockResponseOnce(JSON.stringify({ data: '12345' }));
+
+    const { result, waitForNextUpdate } = renderHook(
+      () => useCollections(stacApi)
+    );
+    expect(result.current.state).toEqual('LOADING');
+    await waitForNextUpdate();
+    expect(fetch.mock.calls[0][0]).toEqual('https://fake-stac-api.net/collections');
+    expect(result.current.collections).toEqual({ data: '12345' });
+    expect(result.current.state).toEqual('IDLE');
+  });
+
+  it('reloads collections', async () => {
+    fetch.mockResponseOnce(JSON.stringify({ data: 'original' }));
+
+    const { result, waitForNextUpdate } = renderHook(
+      () => useCollections(stacApi)
+    );
+    await waitForNextUpdate();
+    expect(result.current.collections).toEqual({ data: 'original' });
+    
+    expect(result.current.state).toEqual('IDLE');
+    fetch.mockResponseOnce(JSON.stringify({ data: 'reloaded' }));
+    act(() => result.current.reload());
+    await waitForNextUpdate();
+    expect(result.current.collections).toEqual({ data: 'reloaded' });
+  });
+});

src/hooks/useCollections.ts

@@ -0,0 +1,37 @@
+import { useCallback, useEffect, useState } from 'react';
+import StacApi from '../stac-api';
+import type { GenericObject, LoadingState } from '../types';
+
+type StacCollectionsHook = {
+  collections?: GenericObject,
+  reload: () => void,
+  state: LoadingState
+};
+
+function useCollections(stacApi: StacApi): StacCollectionsHook {
+  const [ collections, setCollections ] = useState<GenericObject>();
+  const [ state, setState ] = useState<LoadingState>('IDLE');
+
+  const getCollections = useCallback(
+    () => {
+      setState('LOADING');
+      setCollections(undefined);
+
+      stacApi.getCollections()
+        .then(response => response.json())
+        .then(setCollections)
+        .finally(() => setState('IDLE'));
+    },
+    [stacApi]
+  );
+
+  useEffect(() => getCollections() ,[getCollections]);
+
+  return {
+    collections,
+    reload: getCollections,
+    state
+  };
+}
+
+export default useCollections;

src/index.ts

@@ -1,7 +1,9 @@
 import useStacSearch from './hooks/useStacSearch';
+import useCollections from './hooks/useCollections';
 import StacApi from './stac-api';
 
 export {
+  useCollections,
   useStacSearch,
   StacApi
 };

src/stac-api/index.ts

@@ -68,15 +68,15 @@ class StacApi {
   }
 
   fetch(url: string, options: Partial<FetchOptions> = {}): Promise<Response> {
-    const { method = 'GET', payload = {}, headers = {} } = options;
+    const { method = 'GET', payload, headers = {} } = options;
 
     return fetch(url, {
       method,
       headers: {
         'Content-Type': 'application/json',
         ...headers
       },
-      body: JSON.stringify(payload)
+      body: payload ? JSON.stringify(payload) : undefined
     }).then(async (response) => {
       if (response.ok) {
         return response;
@@ -99,6 +99,10 @@ class StacApi {
       { method: 'POST', payload: requestPayload, headers }
     );
   }
+
+  getCollections(): Promise<Response> {
+    return this.fetch(`${this.baseUrl}/collections`);
+  }
 }
 
 export default StacApi;