feat: Add error handling for useItem

Author: oliverroick

src/hooks/useItem.test.ts

@@ -10,7 +10,6 @@ describe('useItem', () => {
 
   it('queries item', async () => {
     fetch
-      .mockResponseOnce(JSON.stringify({ id: 'abc' }))
       .mockResponseOnce(JSON.stringify({ id: 'abc', links: [] }))
       .mockResponseOnce(JSON.stringify({ id: 'abc' }));
 
@@ -22,4 +21,40 @@ describe('useItem', () => {
     expect(result.current.item).toEqual({ id: 'abc' });
     expect(result.current.state).toEqual('IDLE');
   });
+
+  it('handles error with JSON response', async () => {
+    fetch
+      .mockResponseOnce(JSON.stringify({ id: 'abc', links: [] }))
+      .mockResponseOnce(JSON.stringify({ error: 'Wrong query' }), { status: 400, statusText: 'Bad Request' });
+
+    const { result, waitForNextUpdate } = renderHook(
+      () => useItem('https://fake-stac-api.net/items/abc'),
+      { wrapper }
+    );
+    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({ id: 'abc', links: [] }))
+      .mockResponseOnce('Wrong query', { status: 400, statusText: 'Bad Request' });
+
+    const { result, waitForNextUpdate } = renderHook(
+      () => useItem('https://fake-stac-api.net/items/abc'),
+      { wrapper }
+    );
+    await waitForNextUpdate();
+
+    expect(result.current.error).toEqual({
+      status: 400,
+      statusText: 'Bad Request',
+      detail: 'Wrong query'
+    });
+  });
 });

src/hooks/useItem.ts

@@ -1,40 +1,47 @@
 import { useState, useEffect} from 'react';
 import { Item } from '../types/stac';
-import { LoadingState } from '../types';
+import { ApiError, LoadingState } from '../types';
 import { useStacApiContext } from '../context';
 
 type ItemHook = {
   item?: Item
   state: LoadingState
+  error?: ApiError
 }
 
 function useItem(url: string): ItemHook {
-  const { getItem, addItem } = useStacApiContext();
+  const { stacApi, getItem, addItem } = useStacApiContext();
   const [ state, setState ] = useState<LoadingState>('IDLE');
   const [ item, setItem ] = useState<Item>();
+  const [ error, setError ] = useState<ApiError>();
 
   useEffect(() => {
+    if (!stacApi) return;
+
     setState('LOADING');
-    new Promise((resolve) => {
+    new Promise((resolve, reject) => {
       const i = getItem(url);
       if (i) {
         resolve(i);
       } else {
-        fetch(url)
+        stacApi.fetch(url)
           .then(r => r.json())
           .then(r => {
             addItem(url, r);
             resolve(r);
-          });
+          })
+          .catch((err) => reject(err));
       }
     })
       .then(setItem)
+      .catch((err) => setError(err))
       .finally(() => setState('IDLE'));
-  }, [addItem, getItem, url]);
+  }, [stacApi, addItem, getItem, url]);
 
   return { 
     item,
-    state
+    state,
+    error
   };
 }