feat: Add reload item

Author: oliverroick

src/context/index.tsx

@@ -12,6 +12,7 @@ type StacApiContextType = {
   setCollections: (collections?: CollectionsResponse) => void;
   getItem: (id: string) => Item | undefined;
   addItem: (id: string, item: Item) => void;
+  deleteItem: (id: string) => void;
 }
 
 type StacApiProviderType = {
@@ -33,13 +34,20 @@ export function StacApiProvider({ children, apiUrl, options }: StacApiProviderTy
     setItems(new Map(items.set(itemPath, item)));
   }, [items]);
 
+  const deleteItem = useCallback((itemPath: string) => {
+    const tempItems = new Map(items);
+    items.delete(itemPath);
+    setItems(tempItems);
+  }, [items]);
+
   const contextValue = useMemo(() => ({
     stacApi,
     collections,
     setCollections,
     getItem,
-    addItem
-  }), [addItem, collections, getItem, stacApi]);
+    addItem,
+    deleteItem
+  }), [addItem, collections, deleteItem, getItem, stacApi]);
 
   return (
     <StacApiContext.Provider value={contextValue}>
@@ -54,14 +62,16 @@ export function useStacApiContext() {
     collections,
     setCollections, 
     getItem,
-    addItem
+    addItem,
+    deleteItem
   } = useContext(StacApiContext);
 
   return {
     stacApi,
     collections,
     setCollections,
     getItem,
-    addItem
+    addItem,
+    deleteItem
   };
 }

src/hooks/useItem.test.ts

@@ -1,5 +1,5 @@
 import fetch from 'jest-fetch-mock';
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook, act } from '@testing-library/react-hooks';
 import useItem from './useItem';
 import wrapper from './wrapper';
 
@@ -57,4 +57,23 @@ describe('useItem', () => {
       detail: 'Wrong query'
     });
   });
+
+  it('reloads item', async () => {
+    fetch
+      .mockResponseOnce(JSON.stringify({ id: 'abc', links: [] }))
+      .mockResponseOnce(JSON.stringify({ id: 'abc' }))
+      .mockResponseOnce(JSON.stringify({ id: 'abc', description: 'Updated' }));
+    
+    const { result, waitForNextUpdate } = renderHook(
+      () => useItem('https://fake-stac-api.net/items/abc'),
+      { wrapper }
+    );
+    await waitForNextUpdate();
+    expect(result.current.item).toEqual({ id: 'abc' });
+
+    act(() => result.current.reload());
+
+    await waitForNextUpdate();
+    expect(result.current.item).toEqual({ id: 'abc', description: 'Updated' });
+  });
 });

src/hooks/useItem.ts

@@ -1,16 +1,17 @@
-import { useState, useEffect} from 'react';
+import { useState, useEffect, useCallback} from 'react';
 import { Item } from '../types/stac';
 import { ApiError, LoadingState } from '../types';
 import { useStacApiContext } from '../context';
 
 type ItemHook = {
-  item?: Item
-  state: LoadingState
-  error?: ApiError
+  item?: Item;
+  state: LoadingState;
+  error?: ApiError;
+  reload: () => void;
 }
 
 function useItem(url: string): ItemHook {
-  const { stacApi, getItem, addItem } = useStacApiContext();
+  const { stacApi, getItem, addItem, deleteItem } = useStacApiContext();
   const [ state, setState ] = useState<LoadingState>('IDLE');
   const [ item, setItem ] = useState<Item>();
   const [ error, setError ] = useState<ApiError>();
@@ -38,10 +39,39 @@ function useItem(url: string): ItemHook {
       .finally(() => setState('IDLE'));
   }, [stacApi, addItem, getItem, url]);
 
+  const fetchItem = useCallback(() => {
+    if (!stacApi) return;
+
+    setState('LOADING');
+    new Promise((resolve, reject) => {
+      const i = getItem(url);
+      if (i) {
+        resolve(i);
+      } else {
+        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, stacApi, url]);
+
+  const reload = useCallback(() => {
+    deleteItem(url);
+    fetchItem();
+  }, [deleteItem, fetchItem, url]);
+
   return { 
     item,
     state,
-    error
+    error,
+    reload
   };
 }