maybe almost there

barkmanui/src/features/inventory/InventoryList.tsx

@@ -1,27 +1,13 @@
-import {useQuery} from "@tanstack/react-query";
-import {InventoryItem} from "./types";
 import {Flex, Table} from '@mantine/core';
 import BarkButton from "../../common/components/BarkButton.tsx";
 import {Link, NavLink} from "react-router";
+import useInventoryList from "./hooks/useInventoryList.tsx";
 
 function InventoryList() {
 
-    const { isPending, error, data, isFetching } = useQuery({
+    const data = useInventoryList();
-        queryKey: ['inventory'],
-        queryFn: async (): Promise<InventoryItem[]> => {
-            const response = await fetch(
-                import.meta.env.VITE_API_URL + '/inventory',
-            )
 
-            if (!response.ok) throw new Error('Failed to fetch inventory ' + response.statusText)
 
-            return await response.json()
-        },
-    });
-
-    if (isPending) return 'Loading...'
-
-    if (error) return 'An error has occurred: ' + error.message
 
     return (
         <>
@@ -40,8 +26,6 @@ function InventoryList() {
             </Flex>
 
 
-            <div>{isFetching ? 'Updating...' : ''}</div>
-
             <Table striped>
             <Table.Thead>
                 <Table.Tr>
@@ -53,7 +37,7 @@ function InventoryList() {
                 </Table.Tr>
                 </Table.Thead>
                 <Table.Tbody>
-                {data.map((data) => (
+                {data?.map((data) => (
                     <Table.Tr key={data.id}>
                         <Table.Td>{data.barcode}</Table.Td>
                         <Table.Td>{data.brand}</Table.Td>

barkmanui/src/features/inventory/hooks/useInventoryList.tsx

@@ -0,0 +1,17 @@
+import {useQuery} from "@tanstack/react-query";
+import {InventoryItem} from "../types.js";
+
+    const useInventoryList = () => useQuery({
+        queryKey: ['inventory'],
+        queryFn: async (): Promise<InventoryItem[]> => {
+            const response = await fetch(
+                import.meta.env.VITE_API_URL + '/inventory',
+            )
+
+            if (!response.ok) throw new Error('Failed to fetch inventory ' + response.statusText)
+
+            return await response.json()
+        },
+    });
+
+export default useInventoryList;