feat: Add error handling for useCollection

Author: oliverroick

src/hooks/useCollection.test.ts

@@ -11,11 +11,11 @@ describe('useCollection' ,() => {
   it('queries collection', async () => {
     fetch
       .mockResponseOnce(JSON.stringify({ links: [] }), { url: 'https://fake-stac-api.net' })
-      .mockResponseOnce(JSON.stringify({ 
+      .mockResponseOnce(JSON.stringify({
         collections: [
           {id: 'abc', title: 'Collection A'},
           {id: 'def', title: 'Collection B'}
-        ]  
+        ]
       }));
 
     const { result, waitForNextUpdate } = renderHook(
@@ -27,4 +27,65 @@ describe('useCollection' ,() => {
     expect(result.current.collection).toEqual({id: 'abc', title: 'Collection A'});
     expect(result.current.state).toEqual('IDLE');
   });
+
+  it('returns error if collection does not exist', async () => {
+    fetch
+      .mockResponseOnce(JSON.stringify({ links: [] }), { url: 'https://fake-stac-api.net' })
+      .mockResponseOnce(JSON.stringify({
+        collections: [
+          {id: 'abc', title: 'Collection A'},
+          {id: 'def', title: 'Collection B'}
+        ]
+      }));
+
+    const { result, waitForNextUpdate } = renderHook(
+      () => useCollection('ghi'),
+      { wrapper }
+    );
+    await waitForNextUpdate();
+    await waitForNextUpdate();
+    expect(result.current.error).toEqual({
+      status: 404,
+      statusText: 'Not found',
+      detail: 'Collection does not exist'
+    });
+  });
+
+  it('handles error with JSON response', async () => {
+    fetch
+      .mockResponseOnce(JSON.stringify({ links: [] }), { url: 'https://fake-stac-api.net' })
+      .mockResponseOnce(JSON.stringify({ error: 'Wrong query' }), { status: 400, statusText: 'Bad Request' });
+
+    const { result, waitForNextUpdate } = renderHook(
+      () => useCollection('abc'),
+      { wrapper }
+    );
+    await waitForNextUpdate();
+    await waitForNextUpdate();
+
+    expect(result.current.error).toEqual({
+      status: 400,
+      statusText: 'Bad Request',
+      detail: { error: 'Wrong query' }
+    });
+  });
+
+  it('handles error with non-JSON response', async () => {
+    fetch
+      .mockResponseOnce(JSON.stringify({ links: [] }), { url: 'https://fake-stac-api.net' })
+      .mockResponseOnce('Wrong query', { status: 400, statusText: 'Bad Request' });
+
+    const { result, waitForNextUpdate } = renderHook(
+      () => useCollection('abc'),
+      { wrapper }
+    );
+    await waitForNextUpdate();
+    await waitForNextUpdate();
+
+    expect(result.current.error).toEqual({
+      status: 400,
+      statusText: 'Bad Request',
+      detail: 'Wrong query'
+    });
+  });
 });

src/hooks/useCollection.ts

@@ -1,25 +1,42 @@
-import { useMemo } from 'react';
+import { useMemo, useState, useEffect } from 'react';
 
-import type { LoadingState } from '../types';
+import type { ApiError, LoadingState } from '../types';
 import type { Collection } from '../types/stac';
 import useCollections from './useCollections';
 
 type StacCollectionHook = {
   collection?: Collection,
-  state: LoadingState
+  state: LoadingState,
+  error?: ApiError
 };
 
 function useCollection(collectionId: string): StacCollectionHook {
-  const { collections, state } = useCollections();
+  const { collections, state, error: requestError } = useCollections();
+  const [ error, setError ] = useState<ApiError>();
+
+  useEffect(() => {
+    setError(requestError);
+  }, [requestError]);
 
   const collection = useMemo(
-    () => collections?.collections.find(({ id }) => id === collectionId),
+    () => {
+      const coll = collections?.collections.find(({ id }) => id === collectionId);
+      if (!coll) {
+        setError({
+          status: 404,
+          statusText: 'Not found',
+          detail: 'Collection does not exist'
+        });
+      }
+      return coll;
+    },
     [collectionId, collections]
   );
 
   return {
     collection,
-    state
+    state,
+    error
   };
 }