feat: Add useStacApi hook

Adds a new hook to initialise a StacAPI instance. This was necessary so we can query the stac endpoint and deal with any redirects.

Author: oliverroick

example/src/pages/Main/QueryBuilder.jsx

@@ -1,8 +1,6 @@
 import T from 'prop-types';
 import { useCallback, useMemo } from 'react';
 
-import { useCollections, StacApi } from "stac-react";
-
 import { PrimaryButton } from "../../components/buttons";
 import { Checkbox, Legend } from '../../components/form';
 import { H2 } from "../../components/headers";
@@ -11,7 +9,8 @@ import Section from '../../layout/Section';
 
 function QueryBuilder ({
   setIsBboxDrawEnabled,
-  collections: selectedCollections,
+  collections,
+  selectedCollections,
   setCollections,
   handleSubmit,
   dateRangeFrom,
@@ -24,15 +23,8 @@ function QueryBuilder ({
   const handleRangeFromChange = useCallback((e) => setDateRangeFrom(e.target.value), [setDateRangeFrom]);
   const handleRangeToChange = useCallback((e) => setDateRangeTo(e.target.value), [setDateRangeTo]);
 
-  const headers = useMemo(() => ({
-    Authorization: "Basic " + btoa(process.env.REACT_APP_STAC_API_TOKEN + ":")
-  }), []);
-  
-  const stacApi = useMemo(() => new StacApi(process.env.REACT_APP_STAC_API, { headers }), [headers]);
-  const { collections } = useCollections(stacApi);
-
   const collectionOptions = useMemo(
-    () => collections ? collections.collections.map(({ id, title }) => ({ value: id, label: title})) : [],
+    () => collections.collections ? collections.collections.map(({ id, title }) => ({ value: id, label: title})) : [],
     [collections]
   );
 
@@ -45,7 +37,7 @@ function QueryBuilder ({
           label="Select Collections"
           name="collections"
           options={collectionOptions}
-          values={selectedCollections}
+          values={selectedCollections || []}
           onChange={setCollections}
         />
       </Section>
@@ -74,7 +66,8 @@ function QueryBuilder ({
 QueryBuilder.propTypes = {
   setIsBboxDrawEnabled: T.func.isRequired,
   handleSubmit: T.func.isRequired,
-  collections: T.arrayOf(T.string),
+  collections: T.object,
+  selectedCollections: T.arrayOf(T.string),
   setCollections: T.func.isRequired,
   dateRangeFrom: T.string.isRequired,
   setDateRangeFrom: T.func.isRequired,

example/src/pages/Main/index.jsx

@@ -1,21 +1,25 @@
-import { useCallback, useState, useMemo } from "react";
-import { useStacSearch, StacApi } from "stac-react";
+import { useCallback, useState } from "react";
+import { useStacSearch, useCollections, useStacApi } from "stac-react";
 
 import ItemList from "./ItemList";
 import Map from "./Map";
 import QueryBuilder from "./QueryBuilder";
 
+const options = {
+  headers: {
+    Authorization: "Basic " + btoa(process.env.REACT_APP_STAC_API_TOKEN + ":")
+  }
+};
+
 function Main() {
   const [isBboxDrawEnabled, setIsBboxDrawEnabled] = useState(false);
-  const headers = useMemo(() => ({
-    Authorization: "Basic " + btoa(process.env.REACT_APP_STAC_API_TOKEN + ":")
-  }), []);
+  const { stacApi } = useStacApi(process.env.REACT_APP_STAC_API, options);
 
-  const stacApi = useMemo(() => new StacApi(process.env.REACT_APP_STAC_API, { headers }), [headers]);
+  const { collections } = useCollections(stacApi);
 
   const {
     setBbox,
-    collections,
+    collections: selectedCollections,
     setCollections,
     dateRangeFrom,
     setDateRangeFrom,
@@ -43,6 +47,7 @@ function Main() {
         setIsBboxDrawEnabled={setIsBboxDrawEnabled}
         handleSubmit={submit}
         collections={collections}
+        selectedCollections={selectedCollections}
         setCollections={setCollections}
         dateRangeFrom={dateRangeFrom}
         setDateRangeFrom={setDateRangeFrom}

src/hooks/useCollections.test.ts

@@ -1,16 +1,15 @@
 import fetch from 'jest-fetch-mock';
 import { renderHook, act } from '@testing-library/react-hooks';
 import useCollections from './useCollections';
-import StacApi from '../stac-api';
+import StacApi, { SearchMode } from '../stac-api';
 
 describe('useCollections', () => {
   fetch.mockResponseOnce(JSON.stringify({ links: [] }));
-  const stacApi = new StacApi('https://fake-stac-api.net');
+  const stacApi = new StacApi('https://fake-stac-api.net', SearchMode.POST);
   beforeEach(() => fetch.resetMocks());
 
   it('queries collections', async () => {
     fetch.mockResponseOnce(JSON.stringify({ data: '12345' }));
-
     const { result, waitForNextUpdate } = renderHook(
       () => useCollections(stacApi)
     );
@@ -22,7 +21,6 @@ describe('useCollections', () => {
 
   it('reloads collections', async () => {
     fetch.mockResponseOnce(JSON.stringify({ data: 'original' }));
-
     const { result, waitForNextUpdate } = renderHook(
       () => useCollections(stacApi)
     );

src/hooks/useCollections.ts

@@ -10,19 +10,21 @@ type StacCollectionsHook = {
   state: LoadingState
 };
 
-function useCollections(stacApi: StacApi): StacCollectionsHook {
+function useCollections(stacApi?: StacApi): StacCollectionsHook {
   const [ collections, setCollections ] = useState<CollectionsResponse>();
   const [ state, setState ] = useState<LoadingState>('IDLE');
 
   const _getCollections = useCallback(
     () => {
-      setState('LOADING');
-      setCollections(undefined);
+      if (stacApi) {
+        setState('LOADING');
+        setCollections(undefined);
 
-      stacApi.getCollections()
-        .then(response => response.json())
-        .then(setCollections)
-        .finally(() => setState('IDLE'));
+        stacApi.getCollections()
+          .then(response => response.json())
+          .then(setCollections)
+          .finally(() => setState('IDLE'));
+      }
     },
     [stacApi]
   );

src/hooks/useStacApi.test.ts

@@ -0,0 +1,38 @@
+import fetch from 'jest-fetch-mock';
+import { renderHook } from '@testing-library/react-hooks';
+import useStacApi from './useStacApi';
+import useCollections from './useCollections';
+
+describe('useStacApi', () => {
+  beforeEach(() => fetch.resetMocks());
+
+  it('initilises StacAPI', async () => {
+    fetch.mockResponseOnce(JSON.stringify({ links: [] }), { url: 'https://fake-stac-api.net' });
+    const { result: stacApiResult, waitForNextUpdate: waitForApiUpdate } = renderHook(
+      () => useStacApi('https://fake-stac-api.net')
+    );
+    await waitForApiUpdate();
+
+    fetch.mockResponseOnce(JSON.stringify({ data: '12345' }));
+    const { waitForNextUpdate: waitForCollectionsUpdate } = renderHook(
+      () => useCollections(stacApiResult.current.stacApi)
+    );
+    await waitForCollectionsUpdate();
+    expect(fetch.mock.calls[1][0]).toEqual('https://fake-stac-api.net/collections');
+  });
+
+  it('initilises StacAPI with redirect URL', async () => {
+    fetch.mockResponseOnce(JSON.stringify({ links: [] }), { url: 'https://fake-stac-api.net/redirect/' });
+    const { result: stacApiResult, waitForNextUpdate: waitForApiUpdate } = renderHook(
+      () => useStacApi('https://fake-stac-api.net')
+    );
+    await waitForApiUpdate();
+
+    fetch.mockResponseOnce(JSON.stringify({ data: '12345' }));
+    const { waitForNextUpdate: waitForCollectionsUpdate } = renderHook(
+      () => useCollections(stacApiResult.current.stacApi)
+    );
+    await waitForCollectionsUpdate();
+    expect(fetch.mock.calls[1][0]).toEqual('https://fake-stac-api.net/redirect/collections');
+  });
+});

src/hooks/useStacApi.ts

@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react';
+import StacApi, { SearchMode } from '../stac-api';
+import { Link } from '../types/stac';
+import { GenericObject } from '../types';
+
+type StacApiHook = {
+  stacApi?: StacApi
+}
+
+function useStacApi(url: string, options?: GenericObject): StacApiHook {
+  const [ stacApi, setStacApi ] = useState<StacApi>();
+
+  useEffect(() => {
+    let baseUrl: string;
+    let searchMode = SearchMode.GET;
+
+    fetch(url, {
+      headers: {
+        'Content-Type': 'application/json',
+        ...options?.headers
+      }
+    })
+      .then(response => {
+        baseUrl = response.url;
+        return response;
+      })
+      .then(response => response.json())
+      .then(response => {
+        const doesPost = response.links.find(({ rel, method }: Link) => rel === 'search' && method === 'POST');
+        if (doesPost) {
+          searchMode = SearchMode.POST;
+        }
+      })
+      .then(() => setStacApi(new StacApi(baseUrl, searchMode, options)));
+  }, [url, options]);
+
+  return { stacApi };
+}
+
+export default useStacApi;

src/hooks/useStacSearch.test.ts

@@ -1,7 +1,7 @@
 import fetch from 'jest-fetch-mock';
 import { renderHook, act } from '@testing-library/react-hooks';
 import useStacSearch from './useStacSearch';
-import StacApi from '../stac-api';
+import StacApi, { SearchMode } from '../stac-api';
 import { Bbox } from '../types/stac';
 
 function parseRequestPayload(mockApiCall?: RequestInit) {
@@ -12,8 +12,7 @@ function parseRequestPayload(mockApiCall?: RequestInit) {
 }
 
 describe('useStacSearch — API supports POST', () => {
-  fetch.mockResponseOnce(JSON.stringify({ links: [{ rel: 'search', method: 'POST' }] }));
-  const stacApi = new StacApi('https://fake-stac-api.net');
+  const stacApi = new StacApi('https://fake-stac-api.net', SearchMode.POST);
   beforeEach(() => fetch.resetMocks());
 
   it('includes Bbox in search', async () => {
@@ -411,17 +410,15 @@ describe('useStacSearch — API supports POST', () => {
     expect(result.current.results).toEqual({ data: '12345' });
     expect(result.current.bbox).toEqual(bbox);
 
-    fetch.mockResponseOnce(JSON.stringify({ links: [{ rel: 'search', method: 'POST' }] }));
-    const newStac = new StacApi('https://otherstack.com');
+    const newStac = new StacApi('https://otherstack.com', SearchMode.POST);
     rerender({ stacApi: newStac });
     expect(result.current.results).toBeUndefined();
     expect(result.current.bbox).toBeUndefined();
   });
 });
 
 describe('useStacSearch — API supports GET', () => {
-  fetch.mockResponseOnce(JSON.stringify({ links: [{ rel: 'search', method: 'GET' }] }));
-  const stacApi = new StacApi('https://fake-stac-api.net');
+  const stacApi = new StacApi('https://fake-stac-api.net', SearchMode.GET);
   beforeEach(() => fetch.resetMocks());
 
   it('includes Bbox in search', async () => {

src/hooks/useStacSearch.ts

@@ -51,7 +51,7 @@ function useStacSearch(stacApi: StacApi): StacSearchHook {
   };
 
   /**
-   * Reset state when stacApu changes
+   * Reset state when stacApi changes
    */
   useEffect(reset, [stacApi]);
 
@@ -103,15 +103,15 @@ function useStacSearch(stacApi: StacApi): StacSearchHook {
    * Executes a POST request against the `search` endpoint using the provided payload and headers
    */
   const executeSearch = useCallback(
-    (payload: SearchPayload, headers = {}) => processRequest(stacApi.search(payload, headers)),
+    (payload: SearchPayload, headers = {}) => stacApi && processRequest(stacApi.search(payload, headers)),
     [stacApi, processRequest]
   );
 
   /**
    * Execute a GET request against the provided URL
    */
   const getItems = useCallback(
-    (url: string) => processRequest(stacApi.get(url)),
+    (url: string) => stacApi && processRequest(stacApi.get(url)),
     [stacApi, processRequest]
   );
 

src/index.ts

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

src/stac-api/index.ts

@@ -1,5 +1,5 @@
 import type { ApiError, GenericObject } from '../types';
-import type { Bbox, SearchPayload, DateRange, CollectionIdList, Link } from '../types/stac';
+import type { Bbox, SearchPayload, DateRange, CollectionIdList } from '../types/stac';
 
 type RequestPayload = SearchPayload;
 type FetchOptions = {
@@ -8,26 +8,20 @@ type FetchOptions = {
   headers?: GenericObject
 }
 
+export enum SearchMode {
+  GET = 'GET',
+  POST = 'POST'
+}
+
 class StacApi {
   baseUrl: string;
   options?: GenericObject;
-  searchMode = 'GET';
+  searchMode = SearchMode.GET;
 
-  constructor(baseUrl: string, options?: GenericObject) {
+  constructor(baseUrl: string, searchMode: SearchMode, options?: GenericObject) {
     this.baseUrl = baseUrl.endsWith('/') ? baseUrl.slice(0, -1) : baseUrl;
+    this.searchMode = searchMode;
     this.options = options;
-    this.fetchApiMeta();
-  }
-
-  fetchApiMeta(): void {
-    this.fetch(this.baseUrl)
-      .then(r => r.json())
-      .then(r => {
-        const doesPost = r.links.find(({ rel, method }: Link) => rel === 'search' && method === 'POST');
-        if (doesPost) {
-          this.searchMode = 'POST';
-        }
-      });
   }
 
   fixBboxCoordinateOrder(bbox?: Bbox): Bbox | undefined {