feat: migrate useItem hook to TanStack Query

- Refactor useItem to use TanStack Query for caching and fetching
- Improve error propagation, keep original loading states

Author: AliceR

src/hooks/useItem.test.ts

@@ -68,7 +68,10 @@ describe('useItem', () => {
     });
     await waitFor(() => expect(result.current.item).toEqual({ id: 'abc' }));
 
-    act(() => result.current.reload());
+    await act(async () => {
+      // eslint-disable-next-line @typescript-eslint/await-thenable
+      await result.current.reload();
+    });
 
     await waitFor(() => expect(result.current.item).toEqual({ id: 'abc', description: 'Updated' }));
   });

src/hooks/useItem.ts

@@ -1,4 +1,5 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useEffect, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
 import { Item } from '../types/stac';
 import { ApiError, LoadingState } from '../types';
 import { useStacApiContext } from '../context/useStacApiContext';
@@ -11,71 +12,55 @@ type ItemHook = {
 };
 
 function useItem(url: string): ItemHook {
-  const { stacApi, getItem, addItem, deleteItem } = useStacApiContext();
+  const { stacApi } = 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, reject) => {
-      const i = getItem(url);
-      if (i) {
-        resolve(i);
-      } else {
-        stacApi
-          .fetch(url)
-          .then((r: Response) => r.json())
-          .then((r: Item) => {
-            addItem(url, r);
-            resolve(r);
-          })
-          // eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors
-          .catch((err: unknown) => reject(err));
+  const fetchItem = async (): Promise<Item> => {
+    if (!stacApi) throw new Error('No STAC API configured');
+    const response: Response = await stacApi.get(url);
+    if (!response.ok) {
+      let detail;
+      try {
+        detail = await response.json();
+      } catch {
+        detail = await response.text();
       }
-    })
-      .then(setItem)
-      .catch((err: unknown) => setError(err as ApiError))
-      .finally(() => setState('IDLE'));
-  }, [stacApi, addItem, getItem, url]);
-
-  const fetchItem = useCallback(() => {
-    if (!stacApi) return;
+      const err = Object.assign(new Error(response.statusText), {
+        status: response.status,
+        statusText: response.statusText,
+        detail,
+      });
+      throw err;
+    }
+    return await response.json();
+  };
 
-    setState('LOADING');
-    new Promise((resolve, reject) => {
-      const i = getItem(url);
-      if (i) {
-        resolve(i);
-      } else {
-        stacApi
-          .fetch(url)
-          .then((r: Response) => r.json())
-          .then((r: Item) => {
-            addItem(url, r);
-            resolve(r);
-          })
-          // eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors
-          .catch((err: unknown) => reject(err));
-      }
-    })
-      .then(setItem)
-      .catch((err: unknown) => setError(err as ApiError))
-      .finally(() => setState('IDLE'));
-  }, [addItem, getItem, stacApi, url]);
+  const {
+    data: item,
+    error,
+    isLoading,
+    isFetching,
+    refetch,
+  } = useQuery<Item, ApiError>({
+    queryKey: ['item', url],
+    queryFn: fetchItem,
+    enabled: !!stacApi,
+    retry: false,
+  });
 
-  const reload = useCallback(() => {
-    deleteItem(url);
-    fetchItem();
-  }, [deleteItem, fetchItem, url]);
+  useEffect(() => {
+    if (isLoading || isFetching) {
+      setState('LOADING');
+    } else {
+      setState('IDLE');
+    }
+  }, [isLoading, isFetching]);
 
   return {
     item,
     state,
-    error,
-    reload,
+    error: error as ApiError,
+    reload: refetch,
   };
 }