Refactor inventory functionality and improve modularity.

Relocated inventory page to features directory and renamed it for clarity. Introduced a reusable `Button` component and replaced inline buttons across components. Added type definitions for inventory items and environment variable support for API URL configuration.
2026-06-13 06:11:55 +00:00 · 2025-01-15 20:36:03 -06:00
parent 524730a559
commit e2deae0d9a
6 changed files with 32 additions and 10 deletions
@@ -0,0 +1,63 @@
+import {useQuery} from "@tanstack/react-query";
+import {Link} from "react-router";
+import {InventoryItem} from "./types";
+import Button from "../../common/components/Button.tsx";
+
+
+function InventoryList() {
+
+    const { isPending, error, data, isFetching } = 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()
+        },
+    });
+
+    if (isPending) return 'Loading...'
+
+    if (error) return 'An error has occurred: ' + error.message
+
+
+    return (
+        <>
+            <div>
+                <h1 className={"text-brand"}>Inventory</h1>
+            </div>
+            <p>
+                ARFF ARFF BARK BARK
+            </p>
+            <Link to="/">
+                <Button>Home</Button>
+            </Link>
+            <div>{isFetching ? 'Updating...' : ''}</div>
+
+            <table className="w-1/2">
+                <thead>
+                <tr className="text-left">
+                    <th className="text-brand">ID</th>
+                    <th className="text-brand">Brand</th>
+                    <th className="text-brand">Item</th>
+                    <th className="text-brand">Status</th>
+                </tr>
+                </thead>
+                <tbody>
+                {data.map((data) => (
+                    <tr key={data.id}>
+                        <td>{data.id}</td>
+                        <td>{data.brand}</td>
+                        <td>{data.name}</td>
+                        <td>{data.status}</td>
+                    </tr>
+                ))}
+                </tbody>
+            </table>
+        </>
+    )
+}
+export default InventoryList;