From e2deae0d9aa504f66ff64d05437a2f6c45c4b843 Mon Sep 17 00:00:00 2001
From: Drew Rautenberg <drew@drewrautenberg.com>
Date: Wed, 15 Jan 2025 20:36:03 -0600
Subject: [PATCH] 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.
---
 barkmanui/.env                                |  1 +
 barkmanui/src/App.tsx                         |  4 ++--
 barkmanui/src/common/components/Button.tsx    |  9 +++++++++
 .../inventory/InventoryList.tsx}              | 19 ++++++++++++-------
 barkmanui/src/features/inventory/types.ts     |  6 ++++++
 barkmanui/src/pages/home.tsx                  |  3 ++-
 6 files changed, 32 insertions(+), 10 deletions(-)
 create mode 100644 barkmanui/.env
 create mode 100644 barkmanui/src/common/components/Button.tsx
 rename barkmanui/src/{pages/inventory.tsx => features/inventory/InventoryList.tsx} (77%)
 create mode 100644 barkmanui/src/features/inventory/types.ts

diff --git a/barkmanui/.env b/barkmanui/.env
new file mode 100644
index 0000000..29a2dbd
--- /dev/null
+++ b/barkmanui/.env
@@ -0,0 +1 @@
+VITE_API_URL=https://barkdev.ts.drewr.io
\ No newline at end of file
diff --git a/barkmanui/src/App.tsx b/barkmanui/src/App.tsx
index b268533..024fe46 100644
--- a/barkmanui/src/App.tsx
+++ b/barkmanui/src/App.tsx
@@ -1,6 +1,6 @@
 import { Routes, Route} from 'react-router';
 import Home from './pages/home.tsx';
-import Inventory from "./pages/inventory.tsx";
+import InventoryList from "./features/inventory/InventoryList.tsx";
 import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
 
 // Create a client
@@ -12,7 +12,7 @@ function App() {
     <>
         <Routes>
             <Route index element={<Home />} />
-            <Route path="inventory" element={<Inventory />} />
+            <Route path="inventory" element={<InventoryList />} />
         </Routes>
 
 
diff --git a/barkmanui/src/common/components/Button.tsx b/barkmanui/src/common/components/Button.tsx
new file mode 100644
index 0000000..f181445
--- /dev/null
+++ b/barkmanui/src/common/components/Button.tsx
@@ -0,0 +1,9 @@
+import {PropsWithChildren} from "react";
+
+function Button({children}: PropsWithChildren) {
+   return (
+    <button className="bg-brand rounded text-white font-bold px-4 py-2">{children}</button>
+   )
+}
+
+export default Button
\ No newline at end of file
diff --git a/barkmanui/src/pages/inventory.tsx b/barkmanui/src/features/inventory/InventoryList.tsx
similarity index 77%
rename from barkmanui/src/pages/inventory.tsx
rename to barkmanui/src/features/inventory/InventoryList.tsx
index 250ee6a..fb6139b 100644
--- a/barkmanui/src/pages/inventory.tsx
+++ b/barkmanui/src/features/inventory/InventoryList.tsx
@@ -1,17 +1,23 @@
 import {useQuery} from "@tanstack/react-query";
 import {Link} from "react-router";
+import {InventoryItem} from "./types";
+import Button from "../../common/components/Button.tsx";
 
-function Inventory() {
+
+function InventoryList() {
 
     const { isPending, error, data, isFetching } = useQuery({
         queryKey: ['inventory'],
-        queryFn: async () => {
+        queryFn: async (): Promise<InventoryItem[]> => {
             const response = await fetch(
-                'https://barkdev.ts.drewr.io/inventory',
+                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...'
 
@@ -27,7 +33,7 @@ function Inventory() {
                 ARFF ARFF BARK BARK
             </p>
             <Link to="/">
-                <button className="bg-brand rounded text-white font-bold px-4 py-2">Home</button>
+                <Button>Home</Button>
             </Link>
             <div>{isFetching ? 'Updating...' : ''}</div>
 
@@ -54,5 +60,4 @@ function Inventory() {
         </>
     )
 }
-
-export default Inventory
\ No newline at end of file
+export default InventoryList;
\ No newline at end of file
diff --git a/barkmanui/src/features/inventory/types.ts b/barkmanui/src/features/inventory/types.ts
new file mode 100644
index 0000000..f7d7264
--- /dev/null
+++ b/barkmanui/src/features/inventory/types.ts
@@ -0,0 +1,6 @@
+export interface InventoryItem {
+    id: number,
+    brand: string,
+    name: string,
+    status: string,
+}
diff --git a/barkmanui/src/pages/home.tsx b/barkmanui/src/pages/home.tsx
index d5ed448..143aa39 100644
--- a/barkmanui/src/pages/home.tsx
+++ b/barkmanui/src/pages/home.tsx
@@ -1,4 +1,5 @@
 import {Link} from "react-router";
+import Button from "../common/components/Button.tsx";
 
 
 function Home() {
@@ -13,7 +14,7 @@ function Home() {
                 ARFF ARFF BARK BARK
             </p>
             <Link to="/inventory">
-                <button className="bg-brand rounded text-white font-bold px-4 py-2">Inventory</button>
+                <Button>Inventory</Button>
             </Link>
 
         </>