feat: Add useItem hook

Author: oliverroick

src/context/index.tsx

@@ -1,15 +1,17 @@
-import React, { useMemo, useContext, useState } from 'react';
+import React, { useMemo, useContext, useState, useCallback } from 'react';
 import { createContext } from 'react';
 
 import StacApi from '../stac-api';
 import useStacApi from '../hooks/useStacApi';
-import type { CollectionsResponse } from '../types/stac';
+import type { CollectionsResponse, Item } from '../types/stac';
 import { GenericObject } from '../types';
 
 type StacApiContextType = {
   stacApi?: StacApi;
   collections?: CollectionsResponse;
   setCollections: (collections?: CollectionsResponse) => void;
+  getItem: (id: string) => Item | undefined;
+  addItem: (id: string, item: Item) => void;
 }
 
 type StacApiProviderType = {
@@ -23,12 +25,21 @@ export const StacApiContext = createContext<StacApiContextType>({} as StacApiCon
 export function StacApiProvider({ children, apiUrl, options }: StacApiProviderType) {
   const { stacApi } = useStacApi(apiUrl, options);
   const [ collections, setCollections ] = useState<CollectionsResponse>();
+  const [ items, setItems ] = useState(new Map<string, Item>());
+
+  const getItem = useCallback((id: string) => items.get(id), [items]);
+
+  const addItem = useCallback((itemPath: string, item: Item) => {
+    setItems(new Map(items.set(itemPath, item)));
+  }, [items]);
 
   const contextValue = useMemo(() => ({
     stacApi,
     collections,
-    setCollections
-  }), [collections, stacApi]);
+    setCollections,
+    getItem,
+    addItem
+  }), [addItem, collections, getItem, stacApi]);
 
   return (
     <StacApiContext.Provider value={contextValue}>
@@ -38,11 +49,19 @@ export function StacApiProvider({ children, apiUrl, options }: StacApiProviderTy
 }
 
 export function useStacApiContext() {
-  const { stacApi, collections, setCollections } = useContext(StacApiContext);
+  const {
+    stacApi,
+    collections,
+    setCollections, 
+    getItem,
+    addItem
+  } = useContext(StacApiContext);
 
   return {
     stacApi,
     collections,
-    setCollections
+    setCollections,
+    getItem,
+    addItem
   };
 }

src/hooks/useItem.test.ts

@@ -0,0 +1,25 @@
+import fetch from 'jest-fetch-mock';
+import { renderHook } from '@testing-library/react-hooks';
+import useItem from './useItem';
+import wrapper from './wrapper';
+
+describe('useItem', () => {
+  beforeEach(() => {
+    fetch.resetMocks();
+  });
+
+  it('queries item', async () => {
+    fetch
+      .mockResponseOnce(JSON.stringify({ id: 'abc' }))
+      .mockResponseOnce(JSON.stringify({ id: 'abc', links: [] }))
+      .mockResponseOnce(JSON.stringify({ id: 'abc' }));
+    
+    const { result, waitForNextUpdate } = renderHook(
+      () => useItem('https://fake-stac-api.net/items/abc'),
+      { wrapper }
+    );
+    await waitForNextUpdate();
+    expect(result.current.item).toEqual({ id: 'abc' });
+    expect(result.current.state).toEqual('IDLE');
+  });
+});

src/hooks/useItem.ts

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