feat: Add error handling to useCollections

Author: oliverroick

src/hooks/useCollections.test.ts

@@ -24,6 +24,44 @@ describe('useCollections', () => {
     expect(result.current.state).toEqual('IDLE');
   });
 
+  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(
+      () => useCollections(),
+      { 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(
+      () => useCollections(),
+      { wrapper }
+    );
+    await waitForNextUpdate();
+    await waitForNextUpdate();
+    expect(result.current.error).toEqual({
+      status: 400,
+      statusText: 'Bad Request',
+      detail: 'Wrong query'
+    });
+  });
+
   it('reloads collections', async () => {
     fetch
       .mockResponseOnce(JSON.stringify({ links: [] }), { url: 'https://fake-stac-api.net' })
@@ -40,6 +78,7 @@ describe('useCollections', () => {
 
     expect(result.current.state).toEqual('IDLE');
     act(() => result.current.reload());
+ 
     await waitForNextUpdate();
     expect(result.current.collections).toEqual({ data: 'reloaded' });
   });

src/hooks/useCollections.ts

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState, useMemo } from 'react';
-import type { LoadingState } from '../types';
+import { type ApiError, type LoadingState } from '../types';
 import type { CollectionsResponse } from '../types/stac';
 import debounce from '../utils/debounce';
 import { useStacApiContext } from '../context';
@@ -8,11 +8,14 @@ type StacCollectionsHook = {
   collections?: CollectionsResponse,
   reload: () => void,
   state: LoadingState
+  error?: ApiError
 };
 
 function useCollections(): StacCollectionsHook {
   const { stacApi, collections, setCollections } = useStacApiContext();
   const [ state, setState ] = useState<LoadingState>('IDLE');
+  const [ error, setError ] = useState<ApiError>();
+
 
   const _getCollections = useCallback(
     () => {
@@ -23,6 +26,7 @@ function useCollections(): StacCollectionsHook {
         stacApi.getCollections()
           .then(response => response.json())
           .then(setCollections)
+          .catch((err) => setError(err))
           .finally(() => setState('IDLE'));
       }
     },
@@ -42,7 +46,8 @@ function useCollections(): StacCollectionsHook {
   return {
     collections,
     reload: getCollections,
-    state
+    state,
+    error,
   };
 }